Interadictos
Para los que no pueden separarse de internet
WordPress 3.x para desarrolladores: Temas y plantillas, showcase.php y content-intro.php
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:
[codesyntax lang=»php»]
<?php
/**
* Template Name: Showcase Template
* Description: A Page Template that showcases Sticky Posts, Asides, and Blog Posts
*
* The showcase template in New Theme consists of a featured posts section using sticky posts,
* another recent posts area (with the latest post shown in full and the rest as a list)
* and a left sidebar holding aside posts.
*
* We are creating two queries to fetch the proper posts and a custom widget for the sidebar.
*
* @package WordPress
* @subpackage New_Theme
*/
// Enqueue showcase script for the slider
wp_enqueue_script( 'newtheme-showcase', get_template_directory_uri() . '/js/showcase.js', array( 'jquery' ), '2011-04-28' );
get_header(); ?>
<div id="primary" class="showcase">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php
/**
* We are using a heading by rendering the_content
* If we have content for this page, let's display it.
*/
if ( '' != get_the_content() )
get_template_part( 'content', 'intro' );
?>
<?php endwhile; ?>
<?php
/**
* Begin the featured posts section.
*
* See if we have any sticky posts and use them to create our featured posts.
* We limit the featured posts at ten.
*/
$sticky = get_option( 'sticky_posts' );
// Proceed only if sticky posts exist.
if ( ! empty( $sticky ) ) :
$featured_args = array(
'post__in' => $sticky,
'post_status' => 'publish',
'posts_per_page' => 10,
'no_found_rows' => true,
);
// The Featured Posts query.
$featured = new WP_Query( $featured_args );
// Proceed only if published posts exist
if ( $featured->have_posts() ) :
/**
* We will need to count featured posts starting from zero
* to create the slider navigation.
*/
$counter_slider = 0;
// Compatibility with versions of WordPress prior to 3.4.
if ( function_exists( 'get_custom_header' ) )
$header_image_width = get_theme_support( 'custom-header', 'width' );
else
$header_image_width = HEADER_IMAGE_WIDTH;
?>
<div class="featured-posts">
<h1 class="showcase-heading"><?php _e( 'Featured Post', 'newtheme' ); ?></h1>
<?php
// Let's roll.
while ( $featured->have_posts() ) : $featured->the_post();
// Increase the counter.
$counter_slider++;
/**
* We're going to add a class to our featured post for featured images
* by default it'll have the feature-text class.
*/
$feature_class = 'feature-text';
if ( has_post_thumbnail() ) {
// ... but if it has a featured image let's add some class
$feature_class = 'feature-image small';
// Hang on. Let's check this here image out.
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) );
// Is it bigger than or equal to our header?
if ( $image[1] >= $header_image_width ) {
// If bigger, let's add a BIGGER class. It's EXTRA classy now.
$feature_class = 'feature-image large';
}
}
?>
<section class="featured-post <?php echo $feature_class; ?>" id="featured-post-<?php echo $counter_slider; ?>">
<?php
/**
* If the thumbnail is as big as the header image
* make it a large featured post, otherwise render it small
*/
if ( has_post_thumbnail() ) {
if ( $image[1] >= $header_image_width )
$thumbnail_size = 'large-feature';
else
$thumbnail_size = 'small-feature';
?>
<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>
<?php
}
?>
<?php get_template_part( 'content', 'featured' ); ?>
</section>
<?php endwhile; ?>
<?php
// Show slider only if we have more than one featured post.
if ( $featured->post_count > 1 ) :
?>
<nav class="feature-slider">
<ul>
<?php
// Reset the counter so that we end up with matching elements
$counter_slider = 0;
// Begin from zero
rewind_posts();
// Let's roll again.
while ( $featured->have_posts() ) : $featured->the_post();
$counter_slider++;
if ( 1 == $counter_slider )
$class = 'class="active"';
else
$class = '';
?>
<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>
<?php endwhile; ?>
</ul>
</nav>
<?php endif; // End check for more than one sticky post. ?>
</div><!-- .featured-posts -->
<?php endif; // End check for published posts. ?>
<?php endif; // End check for sticky posts. ?>
<section class="recent-posts">
<h1 class="showcase-heading"><?php _e( 'Recent Posts', 'newtheme' ); ?></h1>
<?php
// Display our recent posts, showing full content for the very latest, ignoring Aside posts.
$recent_args = array(
'order' => 'DESC',
'post__not_in' => get_option( 'sticky_posts' ),
'tax_query' => array(
array(
'taxonomy' => 'post_format',
'terms' => array( 'post-format-aside', 'post-format-link', 'post-format-quote', 'post-format-status' ),
'field' => 'slug',
'operator' => 'NOT IN',
),
),
'no_found_rows' => true,
);
// Our new query for the Recent Posts section.
$recent = new WP_Query( $recent_args );
// The first Recent post is displayed normally
if ( $recent->have_posts() ) : $recent->the_post();
// Set $more to 0 in order to only get the first part of the post.
global $more;
$more = 0;
get_template_part( 'content', get_post_format() );
echo '<ol class="other-recent-posts">';
endif;
// For all other recent posts, just display the title and comment status.
while ( $recent->have_posts() ) : $recent->the_post(); ?>
<li class="entry-title">
<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>
<span class="comments-link">
<?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'newtheme' ) . '</span>', __( '<b>1</b> Reply', 'newtheme' ), __( '<b>%</b> Replies', 'newtheme' ) ); ?>
</span>
</li>
<?php
endwhile;
// If we had some posts, close the <ol>
if ( $recent->post_count > 0 )
echo '</ol>';
?>
</section><!-- .recent-posts -->
<div class="widget-area" role="complementary">
<?php if ( ! dynamic_sidebar( 'sidebar-2' ) ) : ?>
<?php
the_widget( 'New_Theme_Ephemera_Widget', '', array( 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>' ) );
?>
<?php endif; // end sidebar widget area ?>
</div><!-- .widget-area -->
</div><!-- #content -->
</div><!-- #primary -->
<?php get_footer(); ?>
[/codesyntax]
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.
[codesyntax lang=»php»]
<?php while ( have_posts() ) : the_post(); ?> <?php /** * We are using a heading by rendering the_content * If we have content for this page, let's display it. */ if ( '' != get_the_content() ) get_template_part( 'content', 'intro' ); ?> <?php endwhile; ?>
[/codesyntax]
A continuación se carga el contenido de la página, normalmente una descripción, o una galería de imágenes.
[codesyntax lang=»php»]
<?php
/**
* Begin the featured posts section.
*
* See if we have any sticky posts and use them to create our featured posts.
* We limit the featured posts at ten.
*/
$sticky = get_option( 'sticky_posts' );
// Proceed only if sticky posts exist.
if ( ! empty( $sticky ) ) :
$featured_args = array(
'post__in' => $sticky,
'post_status' => 'publish',
'posts_per_page' => 10,
'no_found_rows' => true,
);
// The Featured Posts query.
$featured = new WP_Query( $featured_args );
// Proceed only if published posts exist
if ( $featured->have_posts() ) :
/**
* We will need to count featured posts starting from zero
* to create the slider navigation.
*/
$counter_slider = 0;
// Compatibility with versions of WordPress prior to 3.4.
if ( function_exists( 'get_custom_header' ) )
$header_image_width = get_theme_support( 'custom-header', 'width' );
else
$header_image_width = HEADER_IMAGE_WIDTH;
?>
<div class="featured-posts">
<h1 class="showcase-heading"><?php _e( 'Featured Post', 'newtheme' ); ?></h1>
<?php
// Let's roll.
while ( $featured->have_posts() ) : $featured->the_post();
// Increase the counter.
$counter_slider++;
/**
* We're going to add a class to our featured post for featured images
* by default it'll have the feature-text class.
*/
$feature_class = 'feature-text';
if ( has_post_thumbnail() ) {
// ... but if it has a featured image let's add some class
$feature_class = 'feature-image small';
// Hang on. Let's check this here image out.
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) );
// Is it bigger than or equal to our header?
if ( $image[1] >= $header_image_width ) {
// If bigger, let's add a BIGGER class. It's EXTRA classy now.
$feature_class = 'feature-image large';
}
}
?>
<section class="featured-post <?php echo $feature_class; ?>" id="featured-post-<?php echo $counter_slider; ?>">
<?php
/**
* If the thumbnail is as big as the header image
* make it a large featured post, otherwise render it small
*/
if ( has_post_thumbnail() ) {
if ( $image[1] >= $header_image_width )
$thumbnail_size = 'large-feature';
else
$thumbnail_size = 'small-feature';
?>
<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>
<?php
}
?>
<?php get_template_part( 'content', 'featured' ); ?>
</section>
<?php endwhile; ?>
<?php
// Show slider only if we have more than one featured post.
if ( $featured->post_count > 1 ) :
?>
<nav class="feature-slider">
<ul>
<?php
// Reset the counter so that we end up with matching elements
$counter_slider = 0;
// Begin from zero
rewind_posts();
// Let's roll again.
while ( $featured->have_posts() ) : $featured->the_post();
$counter_slider++;
if ( 1 == $counter_slider )
$class = 'class="active"';
else
$class = '';
?>
<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>
<?php endwhile; ?>
</ul>
</nav>
<?php endif; // End check for more than one sticky post. ?>
</div><!-- .featured-posts -->
<?php endif; // End check for published posts. ?>
<?php endif; // End check for sticky posts. ?>
[/codesyntax]
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.
[codesyntax lang=»php»]
<section class="recent-posts"> <h1 class="showcase-heading"><?php _e( 'Recent Posts', 'newtheme' ); ?></h1> <?php // Display our recent posts, showing full content for the very latest, ignoring Aside posts. $recent_args = array( 'order' => 'DESC', 'post__not_in' => get_option( 'sticky_posts' ), 'tax_query' => array( array( 'taxonomy' => 'post_format', 'terms' => array( 'post-format-aside', 'post-format-link', 'post-format-quote', 'post-format-status' ), 'field' => 'slug', 'operator' => 'NOT IN', ), ), 'no_found_rows' => true, ); // Our new query for the Recent Posts section. $recent = new WP_Query( $recent_args ); // The first Recent post is displayed normally if ( $recent->have_posts() ) : $recent->the_post(); // Set $more to 0 in order to only get the first part of the post. global $more; $more = 0; get_template_part( 'content', get_post_format() ); echo '<ol class="other-recent-posts">'; endif; // For all other recent posts, just display the title and comment status. while ( $recent->have_posts() ) : $recent->the_post(); ?> <li class="entry-title"> <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> <span class="comments-link"> <?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'newtheme' ) . '</span>', __( '<b>1</b> Reply', 'newtheme' ), __( '<b>%</b> Replies', 'newtheme' ) ); ?> </span> </li> <?php endwhile; // If we had some posts, close the <ol> if ( $recent->post_count > 0 ) echo '</ol>'; ?> </section><!-- .recent-posts -->
[/codesyntax]
Después tenemos los post más recientes, que se obtienen de la misma manera que los destacados.
[codesyntax lang=»php»]
<div class="widget-area" role="complementary"> <?php if ( ! dynamic_sidebar( 'sidebar-2' ) ) : ?> <?php the_widget( 'New_Theme_Ephemera_Widget', '', array( 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>' ) ); ?> <?php endif; // end sidebar widget area ?> </div><!-- .widget-area -->
[/codesyntax]
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:
[codesyntax lang=»php»]
<?php /** * The template for displaying page content in the showcase.php page template * * @package WordPress * @subpackage New_Theme */ ?> <article id="post-<?php the_ID(); ?>" <?php post_class( 'intro' ); ?>> <header class="entry-header"> <h2 class="entry-title"><?php the_title(); ?></h2> </header><!-- .entry-header --> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'newtheme' ) . '</span>', 'after' => '</div>' ) ); ?> <?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?> </div><!-- .entry-content --> </article><!-- #post-<?php the_ID(); ?> -->
[/codesyntax]
Código sencillo, simplemente da formato al contenido.
