Wenn Sie noch keine Gelegenheit hatten, WordPress 3.0 zu testen, dann verpassen Sie es. Wir haben zahlreiche Beiträge zu WordPress 3.0-Funktionen erstellt und auch WordPress 3.0-Screenshots gezeigt. Eines der bemerkenswerten Upgrades in dieser Version ist ein neues Standardthema namens Zwanzig Zehn. In diesem Thema sind viele großartige Funktionen aktiviert, aber eine der Funktionen, die viele Benutzer wünschen, ist das benutzerdefinierte Header-Panel. In diesem Artikel teilen wir Ihnen mit, wie Sie benutzerdefinierte Header mit einem Back-End-Admin-Panel in WordPress 3.0 aktivieren können.
Was genau wird diese Funktion bewirken?
Es wird eine Registerkarte in Ihrem Admin-Panel erstellt, mit der Sie Header-Bilder ändern können. Wenn Sie ein Designdesigner sind, können Sie Standardbilder registrieren, um Benutzern mehr Optionen zu bieten. Es ermöglicht Benutzern auch, benutzerdefinierte Bilder für den Header hochzuladen. Zu guter Letzt nutzt diese Funktion Post-Thumbnails auf einzelnen Post-Seiten. Wenn Ihr Beitrags-Thumbnail groß genug ist, um der Header-Größe zu entsprechen, wird Ihr Beitrags-Thumbnail als Header anstelle des Standardbilds verwendet. Wenn Ihr Thumbnail größer ist, wird es für Sie zugeschnitten.
Sehen Sie sich den Screencast an
Wie fügt man das hinzu?
Wir haben den Code direkt von Twenty Ten genommen Funktionen.php Datei. Sie müssen die folgenden Codes in Ihr Theme einfügen Funktionen.php Datei.
<?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; ?>
Das ist für mich Quatsch. Bitte erkläre
Natürlich mag das für einige von Ihnen lächerlich erscheinen. Dies ist hauptsächlich für Themendesigner, aber wir werden unser Bestes tun, um es aufzuschlüsseln. Bevor wir beginnen, stellen Sie sicher, dass Sie diesen Code kopieren und in Ihren Code-Editor einfügen, damit Sie die erforderlichen Änderungen vornehmen können.
Hinweis: Wir verwenden /images/headers/ als Verzeichnis, in dem Sie Ihre Standard-Header-Bilder speichern.
- Sie starten den Code, indem Sie eine Funktion yourtheme_setup() erstellen.
- In Zeile 21 definieren wir das Standard-Header-Bild. Beachten Sie, dass es eine Variable %s gibt, die im Grunde ein Platzhalter für den Themenverzeichnis-URI ist.
- In den Zeilen 25 und 26 definieren Sie die Bildbreite und -höhe. Standardmäßig ist es auf 940px breit und 198px hoch eingestellt. Sie können es ändern, indem Sie diese beiden Zeilen bearbeiten.
- Ab Zeile 42 beginnen wir mit der Registrierung der Standardheader. Dies sind die Bilder, die als Optionsfeldoption in Ihrem Admin-Panel angezeigt werden. Wenn Sie weitere Optionen benötigen, folgen Sie einfach dem verwendeten Format.
- In Zeile 95 wählen wir das Header-Styling. Sie brauchen diese Einstellungen nicht zu ändern, da Sie sie bereits in Zeile 25 und 26 definiert haben.
Das ist alles, was Sie für die Datei functions.php des Themes tun. Als nächstes werden wir darauf eingehen, wie Sie dies zu Ihrem Thema hinzufügen werden.
Code zum Hinzufügen zu Ihrem Theme
Dieser Code wird höchstwahrscheinlich in das Thema eingefügt header.php Datei. Sie können es nach Belieben stylen.
<?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; ?>
Was macht dieser Code?
- Zuerst wird überprüft, ob es sich um einen einzelnen Beitrag oder eine Seite handelt. Es prüft auch, ob dieser Beitrag/diese Seite ein Thumbnail hat und ob es groß genug ist.
- Wenn die Seite eine einzelne Seite ist und ein ausreichend großes Thumbnail hat, wird das für diesen Beitrag spezifische Thumbnail des Beitrags angezeigt.
- Wenn es sich nicht um eine einzelne Seite handelt oder die Miniaturansicht des Beitrags nicht groß genug ist, wird die Standardüberschrift angezeigt.
Wir hoffen, dass dieses Tutorial hilfreich war. Wir haben ein paar E-Mails bekommen, die nach diesem Tutorial gefragt haben, also haben wir den Code vom Thema Twenty Ten heruntergebrochen. Wenn Sie Fragen haben, können Sie diese gerne in den Kommentaren stellen.