Estas dos plantillas permiten crear un nuevo formato de página reestructurando los sidebars y los posts.

 

SHOWCASE.PHP

Creamos el archivo showcase.php y añadimos el siguiente código:

  1. <?php
  2. /**
  3.  * Template Name: Showcase Template
  4.  * Description: A Page Template that showcases Sticky Posts, Asides, and Blog Posts
  5.  *
  6.  * The showcase template in New Theme consists of a featured posts section using sticky posts,
  7.  * another recent posts area (with the latest post shown in full and the rest as a list)
  8.  * and a left sidebar holding aside posts.
  9.  *
  10.  * We are creating two queries to fetch the proper posts and a custom widget for the sidebar.
  11.  *
  12.  * @package WordPress
  13.  * @subpackage New_Theme
  14.  */
  15.  
  16. // Enqueue showcase script for the slider
  17. wp_enqueue_script( 'newtheme-showcase', get_template_directory_uri() . '/js/showcase.js', array( 'jquery' ), '2011-04-28' );
  18.  
  19. get_header(); ?>
  20.  
  21. <div id="primary" class="showcase">
  22. <div id="content" role="main">
  23.  
  24. <?php while ( have_posts() ) : the_post(); ?>
  25.  
  26. <?php
  27. /**
  28. * We are using a heading by rendering the_content
  29. * If we have content for this page, let's display it.
  30. */
  31. if ( '' != get_the_content() )
  32. get_template_part( 'content', 'intro' );
  33. ?>
  34.  
  35. <?php endwhile; ?>
  36.  
  37. <?php
  38. /**
  39. * Begin the featured posts section.
  40. *
  41. * See if we have any sticky posts and use them to create our featured posts.
  42. * We limit the featured posts at ten.
  43. */
  44. $sticky = get_option( 'sticky_posts' );
  45.  
  46. // Proceed only if sticky posts exist.
  47. if ( ! empty( $sticky ) ) :
  48.  
  49. $featured_args = array(
  50. 'post__in' => $sticky,
  51. 'post_status' => 'publish',
  52. 'posts_per_page' => 10,
  53. 'no_found_rows' => true,
  54. );
  55.  
  56. // The Featured Posts query.
  57. $featured = new WP_Query( $featured_args );
  58.  
  59. // Proceed only if published posts exist
  60. if ( $featured->have_posts() ) :
  61.  
  62. /**
  63. * We will need to count featured posts starting from zero
  64. * to create the slider navigation.
  65. */
  66. $counter_slider = 0;
  67.  
  68. // Compatibility with versions of WordPress prior to 3.4.
  69. if ( function_exists( 'get_custom_header' ) )
  70. $header_image_width = get_theme_support( 'custom-header', 'width' );
  71. else
  72. $header_image_width = HEADER_IMAGE_WIDTH;
  73. ?>
  74.  
  75. <div class="featured-posts">
  76. <h1 class="showcase-heading"><?php _e( 'Featured Post', 'newtheme' ); ?></h1>
  77.  
  78. <?php
  79. // Let's roll.
  80. while ( $featured->have_posts() ) : $featured->the_post();
  81.  
  82. // Increase the counter.
  83. $counter_slider++;
  84.  
  85. /**
  86. * We're going to add a class to our featured post for featured images
  87. * by default it'll have the feature-text class.
  88. */
  89. $feature_class = 'feature-text';
  90.  
  91. if ( has_post_thumbnail() ) {
  92. // ... but if it has a featured image let's add some class
  93. $feature_class = 'feature-image small';
  94.  
  95. // Hang on. Let's check this here image out.
  96. $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) );
  97.  
  98. // Is it bigger than or equal to our header?
  99. if ( $image[1] >= $header_image_width ) {
  100. // If bigger, let's add a BIGGER class. It's EXTRA classy now.
  101. $feature_class = 'feature-image large';
  102. }
  103. }
  104. ?>
  105.  
  106. <section class="featured-post <?php echo $feature_class; ?>" id="featured-post-<?php echo $counter_slider; ?>">
  107.  
  108. <?php
  109. /**
  110. * If the thumbnail is as big as the header image
  111. * make it a large featured post, otherwise render it small
  112. */
  113. if ( has_post_thumbnail() ) {
  114. if ( $image[1] >= $header_image_width )
  115. $thumbnail_size = 'large-feature';
  116. else
  117. $thumbnail_size = 'small-feature';
  118. ?>
  119. <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_post_thumbnail( $thumbnail_size ); ?></a>
  120. <?php
  121. }
  122. ?>
  123. <?php get_template_part( 'content', 'featured' ); ?>
  124. </section>
  125. <?php endwhile; ?>
  126.  
  127. <?php
  128. // Show slider only if we have more than one featured post.
  129. if ( $featured->post_count > 1 ) :
  130. ?>
  131. <nav class="feature-slider">
  132. <ul>
  133. <?php
  134.  
  135. // Reset the counter so that we end up with matching elements
  136. $counter_slider = 0;
  137.  
  138. // Begin from zero
  139. rewind_posts();
  140.  
  141. // Let's roll again.
  142. while ( $featured->have_posts() ) : $featured->the_post();
  143. $counter_slider++;
  144. if ( 1 == $counter_slider )
  145. $class = 'class="active"';
  146. else
  147. $class = '';
  148. ?>
  149. <li><a href="#featured-post-<?php echo $counter_slider; ?>" title="<?php printf( esc_attr__( 'Featuring: %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" <?php echo $class; ?>></a></li>
  150. <?php endwhile; ?>
  151. </ul>
  152. </nav>
  153. <?php endif; // End check for more than one sticky post. ?>
  154. </div><!-- .featured-posts -->
  155. <?php endif; // End check for published posts. ?>
  156. <?php endif; // End check for sticky posts. ?>
  157.  
  158. <section class="recent-posts">
  159. <h1 class="showcase-heading"><?php _e( 'Recent Posts', 'newtheme' ); ?></h1>
  160.  
  161. <?php
  162.  
  163. // Display our recent posts, showing full content for the very latest, ignoring Aside posts.
  164. $recent_args = array(
  165. 'order' => 'DESC',
  166. 'post__not_in' => get_option( 'sticky_posts' ),
  167. 'tax_query' => array(
  168. 'taxonomy' => 'post_format',
  169. 'terms' => array( 'post-format-aside', 'post-format-link', 'post-format-quote', 'post-format-status' ),
  170. 'field' => 'slug',
  171. 'operator' => 'NOT IN',
  172. ),
  173. ),
  174. 'no_found_rows' => true,
  175. );
  176.  
  177. // Our new query for the Recent Posts section.
  178. $recent = new WP_Query( $recent_args );
  179.  
  180. // The first Recent post is displayed normally
  181. if ( $recent->have_posts() ) : $recent->the_post();
  182.  
  183. // Set $more to 0 in order to only get the first part of the post.
  184. global $more;
  185. $more = 0;
  186.  
  187. get_template_part( 'content', get_post_format() );
  188.  
  189. echo '<ol class="other-recent-posts">';
  190.  
  191. endif;
  192.  
  193. // For all other recent posts, just display the title and comment status.
  194. while ( $recent->have_posts() ) : $recent->the_post(); ?>
  195.  
  196. <li class="entry-title">
  197. <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
  198. <span class="comments-link">
  199. <?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'newtheme' ) . '</span>', __( '<b>1</b> Reply', 'newtheme' ), __( '<b>%</b> Replies', 'newtheme' ) ); ?>
  200. </span>
  201. </li>
  202.  
  203. <?php
  204. endwhile;
  205.  
  206. // If we had some posts, close the <ol>
  207. if ( $recent->post_count > 0 )
  208. echo '</ol>';
  209. ?>
  210. </section><!-- .recent-posts -->
  211.  
  212. <div class="widget-area" role="complementary">
  213. <?php if ( ! dynamic_sidebar( 'sidebar-2' ) ) : ?>
  214.  
  215. <?php
  216. the_widget( 'New_Theme_Ephemera_Widget', '', array( 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>' ) );
  217. ?>
  218.  
  219. <?php endif; // end sidebar widget area ?>
  220. </div><!-- .widget-area -->
  221.  
  222. </div><!-- #content -->
  223. </div><!-- #primary -->
  224.  
  225. <?php get_footer(); ?>

Lo primero que hace el código es indicar a WordPress que cargue el archivo showcase.js, que nosotros deberemos copiar a nuestra carpeta en la ruta correcta.

  1. <?php while ( have_posts() ) : the_post(); ?>
  2.  
  3. <?php
  4. /**
  5. * We are using a heading by rendering the_content
  6. * If we have content for this page, let's display it.
  7. */
  8. if ( '' != get_the_content() )
  9. get_template_part( 'content', 'intro' );
  10. ?>
  11.  
  12. <?php endwhile; ?>

A continuación se carga el contenido de la página, normalmente una descripción, o una galería de imágenes.

  1. <?php
  2. /**
  3. * Begin the featured posts section.
  4. *
  5. * See if we have any sticky posts and use them to create our featured posts.
  6. * We limit the featured posts at ten.
  7. */
  8. $sticky = get_option( 'sticky_posts' );
  9.  
  10. // Proceed only if sticky posts exist.
  11. if ( ! empty( $sticky ) ) :
  12.  
  13. $featured_args = array(
  14. 'post__in' => $sticky,
  15. 'post_status' => 'publish',
  16. 'posts_per_page' => 10,
  17. 'no_found_rows' => true,
  18. );
  19.  
  20. // The Featured Posts query.
  21. $featured = new WP_Query( $featured_args );
  22.  
  23. // Proceed only if published posts exist
  24. if ( $featured->have_posts() ) :
  25.  
  26. /**
  27. * We will need to count featured posts starting from zero
  28. * to create the slider navigation.
  29. */
  30. $counter_slider = 0;
  31.  
  32. // Compatibility with versions of WordPress prior to 3.4.
  33. if ( function_exists( 'get_custom_header' ) )
  34. $header_image_width = get_theme_support( 'custom-header', 'width' );
  35. else
  36. $header_image_width = HEADER_IMAGE_WIDTH;
  37. ?>
  38.  
  39. <div class="featured-posts">
  40. <h1 class="showcase-heading"><?php _e( 'Featured Post', 'newtheme' ); ?></h1>
  41.  
  42. <?php
  43. // Let's roll.
  44. while ( $featured->have_posts() ) : $featured->the_post();
  45.  
  46. // Increase the counter.
  47. $counter_slider++;
  48.  
  49. /**
  50. * We're going to add a class to our featured post for featured images
  51. * by default it'll have the feature-text class.
  52. */
  53. $feature_class = 'feature-text';
  54.  
  55. if ( has_post_thumbnail() ) {
  56. // ... but if it has a featured image let's add some class
  57. $feature_class = 'feature-image small';
  58.  
  59. // Hang on. Let's check this here image out.
  60. $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) );
  61.  
  62. // Is it bigger than or equal to our header?
  63. if ( $image[1] >= $header_image_width ) {
  64. // If bigger, let's add a BIGGER class. It's EXTRA classy now.
  65. $feature_class = 'feature-image large';
  66. }
  67. }
  68. ?>
  69.  
  70. <section class="featured-post <?php echo $feature_class; ?>" id="featured-post-<?php echo $counter_slider; ?>">
  71.  
  72. <?php
  73. /**
  74. * If the thumbnail is as big as the header image
  75. * make it a large featured post, otherwise render it small
  76. */
  77. if ( has_post_thumbnail() ) {
  78. if ( $image[1] >= $header_image_width )
  79. $thumbnail_size = 'large-feature';
  80. else
  81. $thumbnail_size = 'small-feature';
  82. ?>
  83. <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_post_thumbnail( $thumbnail_size ); ?></a>
  84. <?php
  85. }
  86. ?>
  87. <?php get_template_part( 'content', 'featured' ); ?>
  88. </section>
  89. <?php endwhile; ?>
  90.  
  91. <?php
  92. // Show slider only if we have more than one featured post.
  93. if ( $featured->post_count > 1 ) :
  94. ?>
  95. <nav class="feature-slider">
  96. <ul>
  97. <?php
  98.  
  99. // Reset the counter so that we end up with matching elements
  100. $counter_slider = 0;
  101.  
  102. // Begin from zero
  103. rewind_posts();
  104.  
  105. // Let's roll again.
  106. while ( $featured->have_posts() ) : $featured->the_post();
  107. $counter_slider++;
  108. if ( 1 == $counter_slider )
  109. $class = 'class="active"';
  110. else
  111. $class = '';
  112. ?>
  113. <li><a href="#featured-post-<?php echo $counter_slider; ?>" title="<?php printf( esc_attr__( 'Featuring: %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" <?php echo $class; ?>></a></li>
  114. <?php endwhile; ?>
  115. </ul>
  116. </nav>
  117. <?php endif; // End check for more than one sticky post. ?>
  118. </div><!-- .featured-posts -->
  119. <?php endif; // End check for published posts. ?>
  120. <?php endif; // End check for sticky posts. ?>

A continuación comprueba si existen post destacados para mostrar, si es así se inicia el bucle para procesar los datos y mostrar el código html correspondiente.

  1. <section class="recent-posts">
  2. <h1 class="showcase-heading"><?php _e( 'Recent Posts', 'newtheme' ); ?></h1>
  3.  
  4. <?php
  5.  
  6. // Display our recent posts, showing full content for the very latest, ignoring Aside posts.
  7. $recent_args = array(
  8. 'order' => 'DESC',
  9. 'post__not_in' => get_option( 'sticky_posts' ),
  10. 'tax_query' => array(
  11. 'taxonomy' => 'post_format',
  12. 'terms' => array( 'post-format-aside', 'post-format-link', 'post-format-quote', 'post-format-status' ),
  13. 'field' => 'slug',
  14. 'operator' => 'NOT IN',
  15. ),
  16. ),
  17. 'no_found_rows' => true,
  18. );
  19.  
  20. // Our new query for the Recent Posts section.
  21. $recent = new WP_Query( $recent_args );
  22.  
  23. // The first Recent post is displayed normally
  24. if ( $recent->have_posts() ) : $recent->the_post();
  25.  
  26. // Set $more to 0 in order to only get the first part of the post.
  27. global $more;
  28. $more = 0;
  29.  
  30. get_template_part( 'content', get_post_format() );
  31.  
  32. echo '<ol class="other-recent-posts">';
  33.  
  34. endif;
  35.  
  36. // For all other recent posts, just display the title and comment status.
  37. while ( $recent->have_posts() ) : $recent->the_post(); ?>
  38.  
  39. <li class="entry-title">
  40. <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
  41. <span class="comments-link">
  42. <?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'newtheme' ) . '</span>', __( '<b>1</b> Reply', 'newtheme' ), __( '<b>%</b> Replies', 'newtheme' ) ); ?>
  43. </span>
  44. </li>
  45.  
  46. <?php
  47. endwhile;
  48.  
  49. // If we had some posts, close the <ol>
  50. if ( $recent->post_count > 0 )
  51. echo '</ol>';
  52. ?>
  53. </section><!-- .recent-posts -->

Después tenemos los post más recientes, que se obtienen de la misma manera que los destacados.

  1. <div class="widget-area" role="complementary">
  2. <?php if ( ! dynamic_sidebar( 'sidebar-2' ) ) : ?>
  3.  
  4. <?php
  5. the_widget( 'New_Theme_Ephemera_Widget', '', array( 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>' ) );
  6. ?>
  7.  
  8. <?php endif; // end sidebar widget area ?>
  9. </div><!-- .widget-area -->

Por último cargamos el widget que mostrará un listado de links a diferentes post.

 

CONTENT-INTRO.PHP

Creamos el archivo content-intro.php y añadimos el siguiente código:

  1. <?php
  2. /**
  3.  * The template for displaying page content in the showcase.php page template
  4.  *
  5.  * @package WordPress
  6.  * @subpackage New_Theme
  7.  */
  8. ?>
  9.  
  10. <article id="post-<?php the_ID(); ?>" <?php post_class( 'intro' ); ?>>
  11. <header class="entry-header">
  12. <h2 class="entry-title"><?php the_title(); ?></h2>
  13. </header><!-- .entry-header -->
  14.  
  15. <div class="entry-content">
  16. <?php the_content(); ?>
  17. <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'newtheme' ) . '</span>', 'after' => '</div>' ) ); ?>
  18. <?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?>
  19. </div><!-- .entry-content -->
  20. </article><!-- #post-<?php the_ID(); ?> -->

Código sencillo, simplemente da formato al contenido.