SÄ hÀr aktiverar du panelen Anpassad rubrikbilder i WordPress 3.0

LĂ€gga till ytterligare standardrubriker i WordPress Twenty Ten-temat

Om ni inte har haft en chans att testa WordPress 3.0, missar ni det. Vi har skapat ett stort antal inlÀgg om WordPress 3.0-funktioner och har ocksÄ visat WordPress 3.0-skÀrmdumpar. En av den anmÀrkningsvÀrda uppgraderingen i den hÀr versionen Àr ett nytt standardtema som heter Tjugohundratio. Det hÀr temat har mÄnga fantastiska funktioner aktiverade, men en av de funktioner som mÄnga anvÀndare vill ha Àr panelen Anpassade rubriker. I den hÀr artikeln kommer vi att dela med dig om hur du kan aktivera anpassade rubriker med en administratörspanel i WordPress 3.0.

Vad kommer den hÀr funktionen att göra?

Det skapar en flik i din adminpanel som gör att du kan Àndra rubrikbilder. Du kan registrera standardbilder om du Àr temadesigner för att ge anvÀndarna fler alternativ. Det tillÄter ocksÄ anvÀndare att ladda upp anpassade bilder för rubriken. Sist men absolut inte minst, den hÀr funktionen anvÀnder miniatyrer för inlÀgg pÄ enstaka inlÀggssidor. Om min inlÀggsminiatyr Àr tillrÀckligt stor för att passa rubrikstorleken kommer den att anvÀnda din inlÀggsminiatyr som rubrik istÀllet för standardbilden. Om miniatyrbilden Àr större kommer den att beskÀras Ät dig.

Titta pÄ Screencast

Hur lÀgger man till detta?

Vi tog koden direkt frÄn Twenty Ten-filen. Du mÄste klistra in följande koder i ditt temas fil.

<?php
/** Tell WordPress to run yourtheme_setup() when the 'after_setup_theme' hook is run. */
add_action( 'after_setup_theme', 'yourtheme_setup' );
if ( ! function_exists('yourtheme_setup') ):
/**
* @uses add_custom_image_header() To add support for a custom header.
* @uses register_default_headers() To register the default custom header images provided with the theme.
*
* @since 3.0.0
*/
function yourtheme_setup() {
// This theme uses post thumbnails
add_theme_support( 'post-thumbnails' );
// Your changeable header business starts here
define( 'HEADER_TEXTCOLOR', '' );
// No CSS, just IMG call. The %s is a placeholder for the theme template directory URI.
define( 'HEADER_IMAGE', '%s/images/headers/forestfloor.jpg' );
// The height and width of your custom header. You can hook into the theme's own filters to change these values.
// Add a filter to yourtheme_header_image_width and yourtheme_header_image_height to change these values.
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'yourtheme_header_image_width', 940 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'yourtheme_header_image_height',	198 ) );
// We'll be using post thumbnails for custom header images on posts and pages.
// We want them to be 940 pixels wide by 198 pixels tall (larger images will be auto-cropped to fit).
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
// Don't support text inside the header image.
define( 'NO_HEADER_TEXT', true );
// Add a way for the custom header to be styled in the admin panel that controls
// custom headers. See yourtheme_admin_header_style(), below.
add_custom_image_header( '', 'yourtheme_admin_header_style' );
// 
 and thus ends the changeable header business.
// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
register_default_headers( array (
'berries' => array (
'url' => '%s/images/headers/berries.jpg',
'thumbnail_url' => '%s/images/headers/berries-thumbnail.jpg',
'description' => __( 'Berries', 'yourtheme' )
),
'cherryblossom' => array (
'url' => '%s/images/headers/cherryblossoms.jpg',
'thumbnail_url' => '%s/images/headers/cherryblossoms-thumbnail.jpg',
'description' => __( 'Cherry Blossoms', 'yourtheme' )
),
'concave' => array (
'url' => '%s/images/headers/concave.jpg',
'thumbnail_url' => '%s/images/headers/concave-thumbnail.jpg',
'description' => __( 'Concave', 'yourtheme' )
),
'fern' => array (
'url' => '%s/images/headers/fern.jpg',
'thumbnail_url' => '%s/images/headers/fern-thumbnail.jpg',
'description' => __( 'Fern', 'yourtheme' )
),
'forestfloor' => array (
'url' => '%s/images/headers/forestfloor.jpg',
'thumbnail_url' => '%s/images/headers/forestfloor-thumbnail.jpg',
'description' => __( 'Forest Floor', 'yourtheme' )
),
'inkwell' => array (
'url' => '%s/images/headers/inkwell.jpg',
'thumbnail_url' => '%s/images/headers/inkwell-thumbnail.jpg',
'description' => __( 'Inkwell', 'yourtheme' )
),
'path' => array (
'url' => '%s/images/headers/path.jpg',
'thumbnail_url' => '%s/images/headers/path-thumbnail.jpg',
'description' => __( 'Path', 'yourtheme' )
),
'sunset' => array (
'url' => '%s/images/headers/sunset.jpg',
'thumbnail_url' => '%s/images/headers/sunset-thumbnail.jpg',
'description' => __( 'Sunset', 'yourtheme' )
)
) );
}
endif;
if ( ! function_exists( 'yourtheme_admin_header_style' ) ) :
/**
* Styles the header image displayed on the Appearance > Header admin panel.
*
* Referenced via add_custom_image_header() in yourtheme_setup().
*
* @since 3.0.0
*/
function yourtheme_admin_header_style() {
?>
<style type="text/css">
#headimg {
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
}
#headimg h1, #headimg #desc {
display: none;
}
</style>
<?php
}
endif;
?>

Det Àr jibbrish för mig. VÀnligen förklara

Naturligtvis kan det hÀr se jibrish ut för vissa av er. Detta Àr frÀmst för temadesigners, men vi kommer att göra vÄrt bÀsta för att bryta ner det. Innan vi börjar se till att du kopierar och klistrar in den hÀr koden i din kodredigerare sÄ att du kan göra de Àndringar som krÀvs.

Obs! Vi anvÀnder / images / headers / som katalog dÀr du kommer att lagra dina standardhuvudbilder.

Du startar koden genom att skapa en funktion yourtheme_setup (). I rad 21 definierar vi standardhuvudbilden. Observera att det finns en variabel% s som i grunden Àr en platshÄllare för temakatalogen URI. Rad 25 och 26 Àr dÀr du definierar bildens bredd och höjd. Som standard Àr den instÀlld pÄ 940 pixlar breda och 198 pixlar höga. Du kan Àndra det genom att redigera dessa tvÄ rader. FrÄn och med rad 42 börjar vi registrera standardrubrikerna. Det hÀr Àr bilderna som visas som alternativknapp i din adminpanel. Om du behöver fler alternativ följer du bara det format som anvÀnds. I rad 95 vÀljer vi rubrikstyling. Du behöver inte Àndra de hÀr instÀllningarna eftersom du redan lÀste om dem i rad 25 och 26.

Det Àr allt vad du gör för temas funktioner.php-fil. NÀsta kommer vi att gÄ in pÄ hur du ska lÀgga till detta i ditt tema.

Kod att lÀgga till i ditt tema

Den hÀr koden kommer sannolikt att finnas i temafilen. Du kan utforma det hur du vill.

<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail') ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// We have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>

Vad gör den hÀr koden?

Först kontrollerar det om det Àr ett enda inlÀgg eller en sida. Den kontrollerar ocksÄ om det hÀr inlÀgget / sidan har en miniatyrbild och om den Àr tillrÀckligt stor. Om sidan Àr en enda sida och har en tillrÀckligt stor miniatyrbild visas den miniatyrbild som Àr specifik för det inlÀgget. Om det inte Àr en enda sida, eller om miniatyren för inlÀgget inte Àr tillrÀckligt stor, visas standardrubriken.

Vi hoppas att den hÀr guiden var till hjÀlp. Vi fick nÄgra e-postmeddelanden som frÄgade om den hÀr guiden, sÄ vi bröt koden frÄn Twenty Ten-temat. Om du har nÄgra frÄgor Àr du vÀlkommen att stÀlla i kommentarerna.