WordPress: TwentyTen-Theme mit Slideshow im Header


Quelle : http://upload.wikimedia.org

Hach, wieder ein bisschen mit WordPress rumgespielt. Und egal, was für tolle Themes es doch gibt, das TwentyTen ist mir immer noch eines der liebsten. Jetzt möchte der „Kunde“ aber ein paar Extrasachen haben. Zum Beispiel ein rotierendes Header-Image, also eine Slideshow im Header.
Da gibt es ein nettes Plugin namens wp-cycle Ist das erstmal aktiviert und man hat ein paar Bilder im Standard-Maß 980*198 via Admin-Interface von wp-cycle hochgeladen, kann man auch schon an den Quellcode von WordPress ran. In der Datei header.php sucht man den Abschnitt, der hinter der Blog-Description kommt und kommentiert diesen aus bzw. löscht diesen und setzt an die Stelle einfach den Aufruf des cycle-Plugins:

aus diesem Stück

<div id="branding" role="banner">
   <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
      <<?php echo $heading_tag; ?> id="site-title">
         <span>
            <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
         </span>
         </<?php echo $heading_tag; ?>>
         <div id="site-description"><?php bloginfo( 'description' ); ?></div>

      <?php
      // Check if this is a post or page, if it has a thumbnail, and if it's a big one
      if ( is_singular() && current_theme_supports( 'post-thumbnails' ) && 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 ) : // Houston, we have a new header image!
         echo get_the_post_thumbnail( $post->ID );
      elseif ( get_header_image() ) : ?>     						
         <?php wp_cycle(); ?>     
      <?php endif; ?>
</div><!-- #branding -->

wird

<div id="branding" role="banner">
   <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
      <<?php echo $heading_tag; ?> id="site-title">
         <span>
            <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
         </span>
         </<?php echo $heading_tag; ?>>
         <div id="site-description"><?php bloginfo( 'description' ); ?></div>	
         <div id="rotator-wrapper">			
              <?php wp_cycle(); ?>
         </div>   
</div><!-- #branding -->

die rotator-wrapper-CSS sieht dann so aus:

#rotator-wrapper {
   float: none;
   margin: 0;
   padding: 0;        
   float: left;
   margin: 0 0 0 0;
   width: 700px;
}

Im wp-cycle-Plugin wird die CSS ganz unten angepasst. Und schon hat man ne coole Header-Slideshow 🙂