Entradas etiquetadas con tema

WordPress 3.x para desarrolladores: Temas y plantillas, category.php, author.php, archive.php y 404.php
0Estas son las últimas plantillas que crearemos para nuestro tema.
CATEGORY.PHP
Creamos el archivo category.php y añadimos el siguiente código:
- <?php
- /**
- * The template for displaying Category Archive pages.
- *
- * @package WordPress
- * @subpackage New_Theme
- */
-
- get_header(); ?>
-
- <section id="primary">
- <div id="content" role="main">
-
- <?php if ( have_posts() ) : ?>
-
- <header class="page-header">
- <h1 class="page-title"><?php
- printf( __( 'Category Archives: %s', 'newtheme' ), '<span>' . single_cat_title( '', false ) . '</span>' );
- ?></h1>
-
- <?php
- $category_description = category_description();
- echo apply_filters( 'category_archive_meta', '<div class="category-archive-meta">' . $category_description . '</div>' );
- ?>
- </header>
-
- <?php newtheme_content_nav( 'nav-above' ); ?>
-
- <?php /* Start the Loop */ ?>
- <?php while ( have_posts() ) : the_post(); ?>
-
- <?php
- /* Include the Post-Format-specific template for the content.
- * If you want to overload this in a child theme then include a file
- * called content-___.php (where ___ is the Post Format name) and that will be used instead.
- */
- get_template_part( 'content', get_post_format() );
- ?>
-
- <?php endwhile; ?>
-
- <?php newtheme_content_nav( 'nav-below' ); ?>
-
- <?php else : ?>
-
- <article id="post-0" class="post no-results not-found">
- <header class="entry-header">
- <h1 class="entry-title"><?php _e( 'Nothing Found', 'newtheme' ); ?></h1>
- </header><!-- .entry-header -->
-
- <div class="entry-content">
- <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'newtheme' ); ?></p>
- <?php get_search_form(); ?>
- </div><!-- .entry-content -->
- </article><!-- #post-0 -->
-
- <?php endif; ?>
-
- </div><!-- #content -->
- </section><!-- #primary -->
-
- <?php get_sidebar(); ?>
- <?php get_footer(); ?>
Esta plantilla está creada para mostrar los post que están en una misma categoría. La estructura de la página es idéntica al del resto que hemos visto del estilo.
AUTHOR.PHP
Creamos el archivo author-php y añadimos el siguiente código:
- <?php
- /**
- * The template for displaying Author Archive pages.
- *
- * @package WordPress
- * @subpackage New_Theme
- */
-
- get_header(); ?>
-
- <section id="primary">
- <div id="content" role="main">
-
- <?php if ( have_posts() ) : ?>
-
- <?php
- /* Queue the first post, that way we know
- * what author we're dealing with (if that is the case).
- *
- * We reset this later so we can run the loop
- * properly with a call to rewind_posts().
- */
- the_post();
- ?>
-
- <header class="page-header">
- <h1 class="page-title author"><?php printf( __( 'Author Archives: %s', 'newtheme' ), '<span class="vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( "ID" ) ) ) . '" title="' . esc_attr( get_the_author() ) . '" rel="me">' . get_the_author() . '</a></span>' ); ?></h1>
- </header>
-
- <?php
- /* Since we called the_post() above, we need to
- * rewind the loop back to the beginning that way
- * we can run the loop properly, in full.
- */
- rewind_posts();
- ?>
-
- <?php newtheme_content_nav( 'nav-above' ); ?>
-
- <?php
- // If a user has filled out their description, show a bio on their entries.
- if ( get_the_author_meta( 'description' ) ) : ?>
- <div id="author-info">
- <div id="author-avatar">
- <?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'newtheme_author_bio_avatar_size', 60 ) ); ?>
- </div><!-- #author-avatar -->
- <div id="author-description">
- <?php the_author_meta( 'description' ); ?>
- </div><!-- #author-description -->
- </div><!-- #author-info -->
- <?php endif; ?>
-
- <?php /* Start the Loop */ ?>
- <?php while ( have_posts() ) : the_post(); ?>
-
- <?php
- /* Include the Post-Format-specific template for the content.
- * If you want to overload this in a child theme then include a file
- * called content-___.php (where ___ is the Post Format name) and that will be used instead.
- */
- get_template_part( 'content', get_post_format() );
- ?>
-
- <?php endwhile; ?>
-
- <?php newtheme_content_nav( 'nav-below' ); ?>
-
- <?php else : ?>
-
- <article id="post-0" class="post no-results not-found">
- <header class="entry-header">
- <h1 class="entry-title"><?php _e( 'Nothing Found', 'newtheme' ); ?></h1>
- </header><!-- .entry-header -->
-
- <div class="entry-content">
- <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'newtheme' ); ?></p>
- <?php get_search_form(); ?>
- </div><!-- .entry-content -->
- </article><!-- #post-0 -->
-
- <?php endif; ?>
-
- </div><!-- #content -->
- </section><!-- #primary -->
-
- <?php get_sidebar(); ?>
- <?php get_footer(); ?>
Esta plantilla muestra los post que un autor haya escrito. Lo más relevante del código es que para obtener los datos del autor se recupera el primer post, se genera la cabecera del contenido y después se reinicia el dataset para mostrar los post desde el primero, utilizando para ello la función rewind_posts().
ARCHIVE.PHP
Creamos el archivo archive.php y añadimos el siguiete código:
- <?php
- /**
- * The template for displaying Archive pages.
- *
- * Used to display archive-type pages if nothing more specific matches a query.
- * For example, puts together date-based pages if no date.php file exists.
- *
- * Learn more: http://codex.wordpress.org/Template_Hierarchy
- *
- * @package WordPress
- * @subpackage Twenty_Eleven
- */
-
- get_header(); ?>
-
- <section id="primary">
- <div id="content" role="main">
-
- <?php if ( have_posts() ) : ?>
-
- <header class="page-header">
- <h1 class="page-title">
- <?php if ( is_day() ) : ?>
- <?php elseif ( is_month() ) : ?>
- <?php printf( __( 'Monthly Archives: %s', 'newtheme' ), '<span>' . get_the_date( _x( 'F Y', 'monthly archives date format', 'newtheme' ) ) . '</span>' ); ?>
- <?php elseif ( is_year() ) : ?>
- <?php printf( __( 'Yearly Archives: %s', 'newtheme' ), '<span>' . get_the_date( _x( 'Y', 'yearly archives date format', 'newtheme' ) ) . '</span>' ); ?>
- <?php else : ?>
- <?php _e( 'Blog Archives', 'newtheme' ); ?>
- <?php endif; ?>
- </h1>
- </header>
-
- <?php newtheme_content_nav( 'nav-above' ); ?>
-
- <?php /* Start the Loop */ ?>
- <?php while ( have_posts() ) : the_post(); ?>
-
- <?php
- /* Include the Post-Format-specific template for the content.
- * If you want to overload this in a child theme then include a file
- * called content-___.php (where ___ is the Post Format name) and that will be used instead.
- */
- get_template_part( 'content', get_post_format() );
- ?>
-
- <?php endwhile; ?>
-
- <?php newtheme_content_nav( 'nav-below' ); ?>
-
- <?php else : ?>
-
- <article id="post-0" class="post no-results not-found">
- <header class="entry-header">
- <h1 class="entry-title"><?php _e( 'Nothing Found', 'newtheme' ); ?></h1>
- </header><!-- .entry-header -->
-
- <div class="entry-content">
- <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'newtheme' ); ?></p>
- <?php get_search_form(); ?>
- </div><!-- .entry-content -->
- </article><!-- #post-0 -->
-
- <?php endif; ?>
-
- </div><!-- #content -->
- </section><!-- #primary -->
-
- <?php get_sidebar(); ?>
- <?php get_footer(); ?>
Esta plantilla muestra los post publicados en una fecha o entre fechas concretas.

WordPress 3.x para desarrolladores: temas y plantillas, tag.php, search.php, searchform.php e image.php
0Llegamos a las penúltimas plantillas por comentar.
TAG.PHP
Creamos el archivo tag.php y añadimos el siguiente código:
- <?php
- /**
- * The template used to display Tag Archive pages
- *
- * @package WordPress
- * @subpackage New_Theme
- */
-
- get_header(); ?>
-
- <section id="primary">
- <div id="content" role="main">
-
- <?php if ( have_posts() ) : ?>
-
- <header class="page-header">
- <h1 class="page-title"><?php
- printf( __( 'Tag Archives: %s', 'newtheme' ), '<span>' . single_tag_title( '', false ) . '</span>' );
- ?></h1>
-
- <?php
- $tag_description = tag_description();
- echo apply_filters( 'tag_archive_meta', '<div class="tag-archive-meta">' . $tag_description . '</div>' );
- ?>
- </header>
-
- <?php newtheme_content_nav( 'nav-above' ); ?>
-
- <?php /* Start the Loop */ ?>
- <?php while ( have_posts() ) : the_post(); ?>
-
- <?php
- /* Include the Post-Format-specific template for the content.
- * If you want to overload this in a child theme then include a file
- * called content-___.php (where ___ is the Post Format name) and that will be used instead.
- */
- get_template_part( 'content', get_post_format() );
- ?>
-
- <?php endwhile; ?>
-
- <?php newtheme_content_nav( 'nav-below' ); ?>
-
- <?php else : ?>
-
- <article id="post-0" class="post no-results not-found">
- <header class="entry-header">
- <h1 class="entry-title"><?php _e( 'Nothing Found', 'newtheme' ); ?></h1>
- </header><!-- .entry-header -->
-
- <div class="entry-content">
- <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'newtheme' ); ?></p>
- <?php get_search_form(); ?>
- </div><!-- .entry-content -->
- </article><!-- #post-0 -->
-
- <?php endif; ?>
-
- </div><!-- #content -->
- </section><!-- #primary -->
-
- <?php get_sidebar(); ?>
- <?php get_footer(); ?>
Prácticamente es idéntico al resto de plantillas del estilo que hemos visto. En este caso muestra un listado de post por la etiqueta elegida.
SEARCH.PHP
Creamos el archivo search.php y añadimos el siguiente código:
- <?php
- /**
- * The template for displaying Search Results pages.
- *
- * @package WordPress
- * @subpackage New_Theme
- */
-
- get_header(); ?>
-
- <section id="primary">
- <div id="content" role="main">
-
- <?php if ( have_posts() ) : ?>
-
- <header class="page-header">
- <h1 class="page-title"><?php printf( __( 'Search Results for: %s', 'newtheme' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
- </header>
-
- <?php newtheme_content_nav( 'nav-above' ); ?>
-
- <?php /* Start the Loop */ ?>
- <?php while ( have_posts() ) : the_post(); ?>
-
- <?php
- /* Include the Post-Format-specific template for the content.
- * If you want to overload this in a child theme then include a file
- * called content-___.php (where ___ is the Post Format name) and that will be used instead.
- */
- get_template_part( 'content', get_post_format() );
- ?>
-
- <?php endwhile; ?>
-
- <?php newtheme_content_nav( 'nav-below' ); ?>
-
- <?php else : ?>
-
- <article id="post-0" class="post no-results not-found">
- <header class="entry-header">
- <h1 class="entry-title"><?php _e( 'Nothing Found', 'newtheme' ); ?></h1>
- </header><!-- .entry-header -->
-
- <div class="entry-content">
- <p><?php _e( 'Sorry, but nothing matched your search criteria. Please try again with some different keywords.', 'newtheme' ); ?></p>
- <?php get_search_form(); ?>
- </div><!-- .entry-content -->
- </article><!-- #post-0 -->
-
- <?php endif; ?>
-
- </div><!-- #content -->
- </section><!-- #primary -->
-
- <?php get_sidebar(); ?>
- <?php get_footer(); ?>
Esta plantilla es la que muestra el listado de post que coinciden con la búsqueda que realiza el usuario.
SEARCHFORM.PHP
Creamos el archivo searchform.php y añadimos el siguiente código:
- <?php
- /**
- * The template for displaying search forms in Twenty Eleven
- *
- * @package WordPress
- * @subpackage New_Theme
- */
- ?>
- <form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
- <label for="s" class="assistive-text"><?php _e( 'Search', 'newtheme' ); ?></label>
- <input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e( 'Search', 'newtheme' ); ?>" />
- <input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'newtheme' ); ?>" />
- </form>
Esta plantilla es la que genera el formulario de búsqueda. Como ves no tiene mucho que explicar.
IMAGE.PHP
Creamos el archivo image.php y añadimos el siguiente código:
- <?php
- /**
- * The template for displaying image attachments.
- *
- * @package WordPress
- * @subpackage New_Theme
- */
-
- get_header(); ?>
-
- <div id="primary" class="image-attachment">
- <div id="content" role="main">
-
- <?php while ( have_posts() ) : the_post(); ?>
-
- <nav id="nav-single">
- <h3 class="assistive-text"><?php _e( 'Image navigation', 'newtheme' ); ?></h3>
- <span class="nav-previous"><?php previous_image_link( false, __( '← Previous' , 'newtheme' ) ); ?></span>
- <span class="nav-next"><?php next_image_link( false, __( 'Next →' , 'newtheme' ) ); ?></span>
- </nav><!-- #nav-single -->
-
- <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
- <header class="entry-header">
- <h1 class="entry-title"><?php the_title(); ?></h1>
-
- <div class="entry-meta">
- <?php
- $metadata = wp_get_attachment_metadata();
- printf( __( '<span class="meta-prep meta-prep-entry-date">Published </span> <span class="entry-date"><abbr class="published" title="%1$s">%2$s</abbr></span> at <a href="%3$s" title="Link to full-size image">%4$s × %5$s</a> in <a href="%6$s" title="Return to %7$s" rel="gallery">%8$s</a>', 'newtheme' ),
- esc_attr( get_the_time() ),
- get_the_date(),
- esc_url( wp_get_attachment_url() ),
- $metadata['width'],
- $metadata['height'],
- esc_url( get_permalink( $post->post_parent ) ),
- get_the_title( $post->post_parent )
- );
- ?>
- <?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?>
- </div><!-- .entry-meta -->
-
- </header><!-- .entry-header -->
-
- <div class="entry-content">
-
- <div class="entry-attachment">
- <div class="attachment">
- <?php
- /**
- * Grab the IDs of all the image attachments in a gallery so we can get the URL of the next adjacent image in a gallery,
- * or the first image (if we're looking at the last image in a gallery), or, in a gallery of one, just the link to that image file
- */
- $attachments = array_values( get_children( array( 'post_parent' => $post->post_parent, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID' ) ) );
- foreach ( $attachments as $k => $attachment ) {
- if ( $attachment->ID == $post->ID )
- break;
- }
- $k++;
- // If there is more than 1 attachment in a gallery
- // get the URL of the next image attachment
- $next_attachment_url = get_attachment_link( $attachments[ $k ]->ID );
- else
- // or get the URL of the first image attachment
- $next_attachment_url = get_attachment_link( $attachments[ 0 ]->ID );
- } else {
- // or, if there's only 1 image, get the URL of the image
- $next_attachment_url = wp_get_attachment_url();
- }
- ?>
- <a href="<?php echo esc_url( $next_attachment_url ); ?>" title="<?php the_title_attribute(); ?>" rel="attachment"><?php
- $attachment_size = apply_filters( 'newtheme_attachment_size', 848 );
- echo wp_get_attachment_image( $post->ID, array( $attachment_size, 1024 ) ); // filterable image width with 1024px limit for image height.
- ?></a>
-
- <div class="entry-caption">
- <?php the_excerpt(); ?>
- </div>
- <?php endif; ?>
- </div><!-- .attachment -->
-
- </div><!-- .entry-attachment -->
-
- <div class="entry-description">
- <?php the_content(); ?>
- <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'newtheme' ) . '</span>', 'after' => '</div>' ) ); ?>
- </div><!-- .entry-description -->
-
- </div><!-- .entry-content -->
-
- </article><!-- #post-<?php the_ID(); ?> -->
-
- <?php comments_template(); ?>
-
- <?php endwhile; // end of the loop. ?>
-
- </div><!-- #content -->
- </div><!-- #primary -->
-
- <?php get_footer(); ?>
Esta plantilla nos permite crear una galería de imágenes simplemente añadiendo las imágenes desde la administración.

WordPress 3.x para desarrolladores: Temas y plantillas, showcase.php y content-intro.php
0Estas 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:
- <?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.
-
- '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.
- $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.
- 'order' => 'DESC',
- 'post__not_in' => get_option( 'sticky_posts' ),
- '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(); ?>
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.
- <?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; ?>
A continuación se carga el contenido de la página, normalmente una descripción, o una galería de imágenes.
- <?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.
-
- '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.
- $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. ?>
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.
- <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.
- 'order' => 'DESC',
- 'post__not_in' => get_option( 'sticky_posts' ),
- '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 -->
Después tenemos los post más recientes, que se obtienen de la misma manera que los destacados.
- <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 -->
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:
- <?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(); ?> -->
Código sencillo, simplemente da formato al contenido.

WordPress 3.x para desarrolladores: Temas y plantillas, content-image.php, content-link.php, content-quote.php y content-status.php
0CONTENT-IMAGE.PHP
Creamos el archivo content-image.php y añadimos el siguiente código:
- <?php
- /**
- * The template for displaying posts in the Image Post Format on index and archive pages
- *
- * Learn more: http://codex.wordpress.org/Post_Formats
- *
- * @package WordPress
- * @subpackage New_Theme
- */
- ?>
- <article id="post-<?php the_ID(); ?>" <?php post_class( 'indexed' ); ?>>
- <header class="entry-header">
- <hgroup>
- <h2 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></h2>
- <h3 class="entry-format"><?php _e( 'Image', 'newtheme' ); ?></h3>
- </hgroup>
-
- <?php if ( comments_open() && ! post_password_required() ) : ?>
- <div class="comments-link">
- <?php comments_popup_link( '<span class="leave-reply">' . __( "Reply", 'newtheme' ) . '</span>', _x( '1', 'comments number', 'newtheme' ), _x( '%', 'comments number', 'newtheme' ) ); ?>
- </div>
- <?php endif; ?>
- </header><!-- .entry-header -->
-
- <div class="entry-content">
- <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'newtheme' ) ); ?>
- <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'newtheme' ) . '</span>', 'after' => '</div>' ) ); ?>
- </div><!-- .entry-content -->
-
- <footer class="entry-meta">
- <div class="entry-meta">
- <?php
- printf( __( '<a href="%1$s" rel="bookmark"><time class="entry-date" datetime="%2$s" pubdate>%3$s</time></a><span class="by-author"> <span class="sep"> by </span> <span class="author vcard"><a class="url fn n" href="%4$s" title="%5$s" rel="author">%6$s</a></span></span>', 'newtheme' ),
- esc_url( get_permalink() ),
- get_the_date( 'c' ),
- get_the_date(),
- esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
- get_the_author()
- );
- ?>
- </div><!-- .entry-meta -->
- <div class="entry-meta">
- <?php
- /* translators: used between list items, there is a space after the comma */
- $categories_list = get_the_category_list( __( ', ', 'newtheme' ) );
- if ( $categories_list ):
- ?>
- <span class="cat-links">
- <?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'newtheme' ), 'entry-utility-prep entry-utility-prep-cat-links', $categories_list ); ?>
- </span>
- <?php endif; // End if categories ?>
- <?php
- /* translators: used between list items, there is a space after the comma */
- $tags_list = get_the_tag_list( '', __( ', ', 'newtheme' ) );
- if ( $tags_list ): ?>
- <span class="tag-links">
- <?php printf( __( '<span class="%1$s">Tagged</span> %2$s', 'newtheme' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?>
- </span>
- <?php endif; // End if $tags_list ?>
-
- <?php if ( comments_open() ) : ?>
- <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>
- <?php endif; // End if comments_open() ?>
- </div><!-- .entry-meta -->
-
- <?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?>
- </footer><!-- #entry-meta -->
- </article><!-- #post-<?php the_ID(); ?> -->
Este tipo de contenido simplemente muestra una imagen y su respectivo título.
CONTENT-LINK.PHP
Creamos el archivo content-link.php y añadimos el siguiente código:
- <?php
- /**
- * The template for displaying posts in the Link Post Format on index and archive pages
- *
- * Learn more: http://codex.wordpress.org/Post_Formats
- *
- * @package WordPress
- * @subpackage New_Theme
- */
- ?>
-
- <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
- <header class="entry-header">
- <hgroup>
- <h2 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></h2>
- <h3 class="entry-format"><?php _e( 'Link', 'newtheme' ); ?></h3>
- </hgroup>
-
- <?php if ( comments_open() && ! post_password_required() ) : ?>
- <div class="comments-link">
- <?php comments_popup_link( '<span class="leave-reply">' . __( 'Reply', 'newtheme' ) . '</span>', _x( '1', 'comments number', 'newtheme' ), _x( '%', 'comments number', 'newtheme' ) ); ?>
- </div>
- <?php endif; ?>
- </header><!-- .entry-header -->
-
- <?php if ( is_search() ) : // Only display Excerpts for Search ?>
- <div class="entry-summary">
- <?php the_excerpt(); ?>
- </div><!-- .entry-summary -->
- <?php else : ?>
- <div class="entry-content">
- <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'newtheme' ) ); ?>
- <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'newtheme' ) . '</span>', 'after' => '</div>' ) ); ?>
- </div><!-- .entry-content -->
- <?php endif; ?>
-
- <footer class="entry-meta">
- <?php newtheme_posted_on(); ?>
- <?php if ( comments_open() ) : ?>
- <span class="sep"> | </span>
- <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>
- <?php endif; ?>
- <?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?>
- </footer><!-- #entry-meta -->
- </article><!-- #post-<?php the_ID(); ?> -->
Este contenido es más sencillo aún. Simplemente mostramos un link o un conjunto de estos.
CONTENT-QUOTE.PHP
Creamos el archivo content-quote.php y añadimos el siguiente código:
- <?php
-
- <?php
- /**
- * The default template for displaying content
- *
- * @package WordPress
- * @subpackage New_Theme
- */
- ?>
-
- <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
- <header class="entry-header">
- <hgroup>
- <h2 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></h2>
- <h3 class="entry-format"><?php _e( 'Quote', 'newtheme' ); ?></h3>
- </hgroup>
-
- <div class="entry-meta">
- <?php newtheme_posted_on(); ?>
- </div><!-- .entry-meta -->
-
- <?php if ( comments_open() && ! post_password_required() ) : ?>
- <div class="comments-link">
- <?php comments_popup_link( '<span class="leave-reply">' . __( 'Reply', 'newtheme' ) . '</span>', _x( '1', 'comments number', 'newtheme' ), _x( '%', 'comments number', 'newtheme' ) ); ?>
- </div>
- <?php endif; ?>
- </header><!-- .entry-header -->
-
- <?php if ( is_search() ) : // Only display Excerpts for Search ?>
- <div class="entry-summary">
- <?php the_excerpt(); ?>
- </div><!-- .entry-summary -->
- <?php else : ?>
- <div class="entry-content">
- <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'newtheme' ) ); ?>
- <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'newtheme' ) . '</span>', 'after' => '</div>' ) ); ?>
- </div><!-- .entry-content -->
- <?php endif; ?>
-
- <footer class="entry-meta">
- <?php $show_sep = false; ?>
- <?php
- /* translators: used between list items, there is a space after the comma */
- $categories_list = get_the_category_list( __( ', ', 'newtheme' ) );
- if ( $categories_list ):
- ?>
- <span class="cat-links">
- <?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'newtheme' ), 'entry-utility-prep entry-utility-prep-cat-links', $categories_list );
- $show_sep = true; ?>
- </span>
- <?php endif; // End if categories ?>
- <?php
- /* translators: used between list items, there is a space after the comma */
- $tags_list = get_the_tag_list( '', __( ', ', 'newtheme' ) );
- if ( $tags_list ):
- if ( $show_sep ) : ?>
- <span class="sep"> | </span>
- <?php endif; // End if $show_sep ?>
- <span class="tag-links">
- <?php printf( __( '<span class="%1$s">Tagged</span> %2$s', 'newtheme' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list );
- $show_sep = true; ?>
- </span>
- <?php endif; // End if $tags_list ?>
-
- <?php if ( comments_open() ) : ?>
- <?php if ( $show_sep ) : ?>
- <span class="sep"> | </span>
- <?php endif; // End if $show_sep ?>
- <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>
- <?php endif; // End if comments_open() ?>
-
- <?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?>
- </footer><!-- #entry-meta -->
- </article><!-- #post-<?php the_ID(); ?> -->
Más de lo mismo, lo único que cambia es que aparece un subtítulo indicando que es una cita.
CONTENT-STATUS.PHP
Creamos el archivo content-status.php y añadimos el siguiente código:
- <?php
- /**
- * The template for displaying posts in the Status Post Format on index and archive pages
- *
- * Learn more: http://codex.wordpress.org/Post_Formats
- *
- * @package WordPress
- * @subpackage New_Theme
- */
- ?>
-
- <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
- <header class="entry-header">
- <hgroup>
- <h2 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></h2>
- <h3 class="entry-format"><?php _e( 'Status', 'newtheme' ); ?></h3>
- </hgroup>
-
- <?php if ( comments_open() && ! post_password_required() ) : ?>
- <div class="comments-link">
- <?php comments_popup_link( '<span class="leave-reply">' . __( 'Reply', 'newtheme' ) . '</span>', _x( '1', 'comments number', 'newtheme' ), _x( '%', 'comments number', 'newtheme' ) ); ?>
- </div>
- <?php endif; ?>
- </header><!-- .entry-header -->
-
- <?php if ( is_search() ) : // Only display Excerpts for Search ?>
- <div class="entry-summary">
- <?php the_excerpt(); ?>
- </div><!-- .entry-summary -->
- <?php else : ?>
- <div class="entry-content">
- <div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' ), apply_filters( 'newtheme_status_avatar', '65' ) ); ?></div>
-
- <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'newtheme' ) ); ?>
- <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'newtheme' ) . '</span>', 'after' => '</div>' ) ); ?>
- </div><!-- .entry-content -->
- <?php endif; ?>
-
- <footer class="entry-meta">
- <?php newtheme_posted_on(); ?>
- <?php if ( comments_open() ) : ?>
- <span class="sep"> | </span>
- <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>
- <?php endif; ?>
- <?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?>
- </footer><!-- #entry-meta -->
- </article><!-- #post-<?php the_ID(); ?> -->
En este caso se añade la imagen del perfil del autor o avatar para acompañar al contenido.

WordPress 3.x para desarrolladores: Temas y plantillas, content-aside.php, content-featured.php y content-gallery.php
0Durante los próximos post, incluido este, explicaré las últimas plantillas que quedan por crear de nuestro tema, después continuaré el tutorial con los plugins.
CONTENT-ASIDE.PHP
WordPress dispone de varios formatos de post que pueden ser personalizados (ver: http://codex.wordpress.org/Post_Formats), entre ellos se encuentra aside, que es parecido a una actualización de Facebook, es decir, no tiene título.
Creamos el archivo content-aside.php y añadimos el siguiente código:
- <?php
- /**
- * The template for displaying posts in the Aside Post Format on index and archive pages
- *
- * Learn more: http://codex.wordpress.org/Post_Formats
- *
- * @package WordPress
- * @subpackage New_Theme
- */
- ?>
-
- <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
- <header class="entry-header">
- <hgroup>
- <h2 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></h2>
- <h3 class="entry-format"><?php _e( 'Aside', 'newtheme' ); ?></h3>
- </hgroup>
-
- <?php if ( comments_open() && ! post_password_required() ) : ?>
- <div class="comments-link">
- <?php comments_popup_link( '<span class="leave-reply">' . __( 'Reply', 'newtheme' ) . '</span>', _x( '1', 'comments number', 'newtheme' ), _x( '%', 'comments number', 'newtheme' ) ); ?>
- </div>
- <?php endif; ?>
- </header><!-- .entry-header -->
-
- <?php if ( is_search() ) : // Only display Excerpts for Search ?>
- <div class="entry-summary">
- <?php the_excerpt(); ?>
- </div><!-- .entry-summary -->
- <?php else : ?>
- <div class="entry-content">
- <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'newtheme' ) ); ?>
- <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'newtheme' ) . '</span>', 'after' => '</div>' ) ); ?>
- </div><!-- .entry-content -->
- <?php endif; ?>
-
- <footer class="entry-meta">
- <?php newtheme_posted_on(); ?>
- <?php if ( comments_open() ) : ?>
- <span class="sep"> | </span>
- <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>
- <?php endif; ?>
- <?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?>
- </footer><!-- #entry-meta -->
- </article><!-- #post-<?php the_ID(); ?> -->
Como veis, lo primero que se crea es la cabecera del post, pero en este caso, en vez de mostrar el título del post se mostrará el texto «Aside«. El resto del código es prácticamente igual al de un post normal: se muestra el contenido del post y se crea el pie de este con los metadatos y los correspondientes links, entre ellos el de editar.
CONTENT-FEATURED.PHP
Los post featured son los post destacados de los que ya hemos hablado con anterioridad. Aunque este tipo de post no aparece en la lista de formatos de post, si es una características de los post normales que se puede personalizar con su propia plantilla.
Por tanto crearemos el archivo content-featured.php y añadiremos el siguiente código:
- <?php
- /**
- * The template for displaying content featured in the showcase.php page template
- *
- * @package WordPress
- * @subpackage New_Theme
- */
-
- global $feature_class;
- ?>
- <article id="post-<?php the_ID(); ?>" <?php post_class( $feature_class ); ?>>
- <header class="entry-header">
- <h2 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></h2>
-
- <div class="entry-meta">
- <?php newtheme_posted_on(); ?>
- </div><!-- .entry-meta -->
- </header><!-- .entry-header -->
-
- <div class="entry-summary">
- <?php the_excerpt(); ?>
- <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'newtheme' ) . '</span>', 'after' => '</div>' ) ); ?>
- </div><!-- .entry-content -->
-
- <footer class="entry-meta">
- <?php
- /* translators: used between list items, there is a space after the comma */
- $tag_list = get_the_tag_list( '', __( ', ', 'newtheme' ) );
- if ( '' != $tag_list ) {
- $utility_text = __( 'This entry was posted in %1$s and tagged %2$s. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'newtheme' );
- } else {
- $utility_text = __( 'This entry was posted in %1$s. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'newtheme' );
- }
- $utility_text,
- /* translators: used between list items, there is a space after the comma */
- get_the_category_list( __( ', ', 'newtheme' ) ),
- $tag_list,
- esc_url( get_permalink() ),
- the_title_attribute( 'echo=0' )
- );
- ?>
-
- <?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?>
- </footer><!-- .entry-meta -->
- </article><!-- #post-<?php the_ID(); ?> -->
Lo mismo de antes, se muestra el título, se muestra el contenido y se muestra el pie del post, la única diferencia sería que, en este caso también mostramos el texto «FEATURED» o «DESTACADO» en la página principal.
CONTENT-GALLERY.PHP
Este tipo de contenido nos permite mostrar galerías de imágenes, adjuntando las imágenes al post.
Creamos el archivo content-gallery.php y añadimos el siguiente código:
- <?php
- /**
- * The template for displaying posts in the Gallery Post Format on index and archive pages
- *
- * Learn more: http://codex.wordpress.org/Post_Formats
- *
- * @package WordPress
- * @subpackage New_Theme
- */
- ?>
-
- <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
- <header class="entry-header">
- <hgroup>
- <h2 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></h2>
- <h3 class="entry-format"><?php _e( 'Gallery', 'newtheme' ); ?></h3>
- </hgroup>
-
- <div class="entry-meta">
- <?php newtheme_posted_on(); ?>
- </div><!-- .entry-meta -->
- </header><!-- .entry-header -->
-
- <?php if ( is_search() ) : // Only display Excerpts for search pages ?>
- <div class="entry-summary">
- <?php the_excerpt(); ?>
- </div><!-- .entry-summary -->
- <?php else : ?>
- <div class="entry-content">
- <?php if ( post_password_required() ) : ?>
- <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'newtheme' ) ); ?>
-
- <?php else : ?>
- <?php
- $images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) );
- if ( $images ) :
- $image_img_tag = wp_get_attachment_image( $image->ID, 'thumbnail' );
- ?>
-
- <figure class="gallery-thumb">
- <a href="<?php the_permalink(); ?>"><?php echo $image_img_tag; ?></a>
- </figure><!-- .gallery-thumb -->
-
- <p><em><?php printf( _n( 'This gallery contains <a %1$s>%2$s photo</a>.', 'This gallery contains <a %1$s>%2$s photos</a>.', $total_images, 'newtheme' ),
- 'href="' . esc_url( get_permalink() ) . '" title="' . sprintf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ) . '" rel="bookmark"',
- number_format_i18n( $total_images )
- ); ?></em></p>
- <?php endif; ?>
- <?php the_excerpt(); ?>
- <?php endif; ?>
- <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'newtheme' ) . '</span>', 'after' => '</div>' ) ); ?>
- </div><!-- .entry-content -->
- <?php endif; ?>
-
- <footer class="entry-meta">
- <?php $show_sep = false; ?>
- <?php
- /* translators: used between list items, there is a space after the comma */
- $categories_list = get_the_category_list( __( ', ', 'newtheme' ) );
- if ( $categories_list ):
- ?>
- <span class="cat-links">
- <?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'newtheme' ), 'entry-utility-prep entry-utility-prep-cat-links', $categories_list );
- $show_sep = true; ?>
- </span>
- <?php endif; // End if categories ?>
- <?php
- /* translators: used between list items, there is a space after the comma */
- $tags_list = get_the_tag_list( '', __( ', ', 'newtheme' ) );
- if ( $tags_list ):
- if ( $show_sep ) : ?>
- <span class="sep"> | </span>
- <?php endif; // End if $show_sep ?>
- <span class="tag-links">
- <?php printf( __( '<span class="%1$s">Tagged</span> %2$s', 'newtheme' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list );
- $show_sep = true; ?>
- </span>
- <?php endif; // End if $tags_list ?>
-
- <?php if ( comments_open() ) : ?>
- <?php if ( $show_sep ) : ?>
- <span class="sep"> | </span>
- <?php endif; // End if $show_sep ?>
- <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>
- <?php endif; // End if comments_open() ?>
-
- <?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?>
- </footer><!-- #entry-meta -->
- </article><!-- #post-<?php the_ID(); ?> -->
La parte más importante de este código es el siguiente extracto:
- <?php if ( post_password_required() ) : ?>
- <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'newtheme' ) ); ?>
-
- <?php else : ?>
- <?php
- $images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) );
- if ( $images ) :
- $image_img_tag = wp_get_attachment_image( $image->ID, 'thumbnail' );
- ?>
-
- <figure class="gallery-thumb">
- <a href="<?php the_permalink(); ?>"><?php echo $image_img_tag; ?></a>
- </figure><!-- .gallery-thumb -->
-
- <p><em><?php printf( _n( 'This gallery contains <a %1$s>%2$s photo</a>.', 'This gallery contains <a %1$s>%2$s photos</a>.', $total_images, 'newtheme' ),
- 'href="' . esc_url( get_permalink() ) . '" title="' . sprintf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ) . '" rel="bookmark"',
- number_format_i18n( $total_images )
- ); ?></em></p>
- <?php endif; ?>
Esta parte es la que calcula el número de imágenes en el post y las convierte en una galería.

WordPress 3.x para desarrolladores: Temas y plantillas, theme-options.php
0Nuestro tema va tomando poco a poco forma. Hoy vamos a crear el archivo theme-options.php que contendrá toda la lógica de las opciones de administración.
THEME-OPTIONS.PHP
Creamos el archivo theme-options.php y añadimos el siguiente código:
- <?php
-
- /**
- * Properly enqueue styles and scripts for our theme options page.
- *
- * This function is attached to the admin_enqueue_scripts action hook.
- */
- function newtheme_admin_enqueue_scripts( $hook_suffix ) {
- wp_enqueue_style( 'newtheme-theme-options', get_template_directory_uri() . '/inc/theme-options.css', false, '2011-04-28' );
- wp_enqueue_script( 'newtheme-theme-options', get_template_directory_uri() . '/inc/theme-options.js', array( 'farbtastic' ), '2011-06-10' );
- wp_enqueue_style( 'farbtastic' );
- }
- add_action( 'admin_print_styles-appearance_page_theme_options', 'newtheme_admin_enqueue_scripts' );
Esta función añade un archivo css y un archivo javascript a la cabecera al apartado apariencia de la administración de WordPress.
- <?php
-
- /**
- * Register the form setting for our newtheme_options array.
- *
- * This function is attached to the admin_init action hook.
- *
- * This call to register_setting() registers a validation callback, newtheme_theme_options_validate(),
- * which is used when the option is saved, to ensure that our option values are complete, properly
- * formatted, and safe.
- */
- function newtheme_theme_options_init() {
-
- register_setting(
- 'newtheme_options', // Options group, see settings_fields() call in newtheme_theme_options_render_page()
- 'newtheme_theme_options', // Database option, see newtheme_get_theme_options()
- 'newtheme_theme_options_validate' // The sanitization callback, see newtheme_theme_options_validate()
- );
-
- // Register our settings field group
- add_settings_section(
- 'general', // Unique identifier for the settings section
- '', // Section title (we don't want one)
- '__return_false', // Section callback (we don't want anything)
- 'theme_options' // Menu slug, used to uniquely identify the page; see newtheme_theme_options_add_page()
- );
-
- // Register our individual settings fields
- add_settings_field(
- 'color_scheme', // Unique identifier for the field for this section
- __( 'Color Scheme', 'newtheme' ), // Setting field label
- 'newtheme_settings_field_color_scheme', // Function that renders the settings field
- 'theme_options', // Menu slug, used to uniquely identify the page; see newtheme_theme_options_add_page()
- 'general' // Settings section. Same as the first argument in the add_settings_section() above
- );
-
- add_settings_field( 'link_color', __( 'Link Color', 'newtheme' ), 'newtheme_settings_field_link_color', 'theme_options', 'general' );
- add_settings_field( 'layout', __( 'Default Layout', 'newtheme' ), 'newtheme_settings_field_layout', 'theme_options', 'general' );
- }
- add_action( 'admin_init', 'newtheme_theme_options_init' );
Esta función registra la configuración por defecto del tema y añade varios apartados para la administración.
- <?php
-
- /**
- * Change the capability required to save the 'newtheme_options' options group.
- *
- * @see newtheme_theme_options_init() First parameter to register_setting() is the name of the options group.
- * @see newtheme_theme_options_add_page() The edit_theme_options capability is used for viewing the page.
- *
- * By default, the options groups for all registered settings require the manage_options capability.
- * This filter is required to change our theme options page to edit_theme_options instead.
- * By default, only administrators have either of these capabilities, but the desire here is
- * to allow for finer-grained control for roles and users.
- *
- * @param string $capability The capability used for the page, which is manage_options by default.
- * @return string The capability to actually use.
- */
- function newtheme_option_page_capability( $capability ) {
- return 'edit_theme_options';
- }
- add_filter( 'option_page_capability_newtheme_options', 'newtheme_option_page_capability' );
Esta función permite cambiar las opciones del tema. Es obligatorio para controlar los diversos usuarios y roles que tengan acceso.
- <?php
-
- /**
- * Add our theme options page to the admin menu, including some help documentation.
- *
- * This function is attached to the admin_menu action hook.
- */
- function newtheme_theme_options_add_page() {
- $theme_page = add_theme_page(
- __( 'Theme Options', 'newtheme' ), // Name of page
- __( 'Theme Options', 'newtheme' ), // Label in menu
- 'edit_theme_options', // Capability required
- 'theme_options', // Menu slug, used to uniquely identify the page
- 'newtheme_theme_options_render_page' // Function that renders the options page
- );
-
- if ( ! $theme_page )
- return;
-
- add_action( "load-$theme_page", 'newtheme_theme_options_help' );
- }
- add_action( 'admin_menu', 'newtheme_theme_options_add_page' );
Añade la página de opciones de nuestro tema al menú de administración, incluyendo algo de documentación a la ayuda.
- <?php
-
- function newtheme_theme_options_help() {
-
- $help = '<p>' . __( 'Some themes provide customization options that are grouped together on a Theme Options screen. If you change themes, options may change or disappear, as they are theme-specific. Your current theme, Twenty Eleven, provides the following Theme Options:', 'newtheme' ) . '</p>' .
- '<ol>' .
- '<li>' . __( '<strong>Color Scheme</strong>: You can choose a color palette of "Light" (light background with dark text) or "Dark" (dark background with light text) for your site.', 'newtheme' ) . '</li>' .
- '<li>' . __( '<strong>Link Color</strong>: You can choose the color used for text links on your site. You can enter the HTML color or hex code, or you can choose visually by clicking the "Select a Color" button to pick from a color wheel.', 'newtheme' ) . '</li>' .
- '<li>' . __( '<strong>Default Layout</strong>: You can choose if you want your site’s default layout to have a sidebar on the left, the right, or not at all.', 'newtheme' ) . '</li>' .
- '</ol>' .
- '<p>' . __( 'Remember to click "Save Changes" to save any changes you have made to the theme options.', 'newtheme' ) . '</p>';
-
- $sidebar = '<p><strong>' . __( 'For more information:', 'newtheme' ) . '</strong></p>' .
- '<p>' . __( '<a href="http://codex.wordpress.org/Appearance_Theme_Options_Screen" target="_blank">Documentation on Theme Options</a>', 'newtheme' ) . '</p>' .
- '<p>' . __( '<a href="http://wordpress.org/support/" target="_blank">Support Forums</a>', 'newtheme' ) . '</p>';
-
- $screen = get_current_screen();
-
- // WordPress 3.3
- 'title' => __( 'Overview', 'newtheme' ),
- 'id' => 'theme-options-help',
- 'content' => $help,
- )
- );
-
- $screen->set_help_sidebar( $sidebar );
- } else {
- // WordPress 3.2
- add_contextual_help( $screen, $help . $sidebar );
- }
- }
Esta es la función que añade la ayuda que comentaba en la función anterior. Aquí además podemos ver como se añade un condicional para añadir retrocompatibilidad con versiones anteriores a la 3.3 y la 3.2.
- <?php
-
- /**
- * Returns an array of color schemes registered for New Theme.
- */
- function newtheme_color_schemes() {
- 'value' => 'light',
- 'label' => __( 'Light', 'newtheme' ),
- 'thumbnail' => get_template_directory_uri() . '/inc/images/light.png',
- 'default_link_color' => '#1b8be0',
- ),
- 'value' => 'dark',
- 'label' => __( 'Dark', 'newtheme' ),
- 'thumbnail' => get_template_directory_uri() . '/inc/images/dark.png',
- 'default_link_color' => '#e4741f',
- ),
- );
-
- return apply_filters( 'newtheme_color_schemes', $color_scheme_options );
- }
Esta función devuelve un array con los esquemas de color para cada versión del tema.
- <?php
-
- /**
- * Returns an array of layout options registered for New Theme.
- */
- function newtheme_layouts() {
- 'value' => 'content-sidebar',
- 'label' => __( 'Content on left', 'newtheme' ),
- 'thumbnail' => get_template_directory_uri() . '/inc/images/content-sidebar.png',
- ),
- 'value' => 'sidebar-content',
- 'label' => __( 'Content on right', 'newtheme' ),
- 'thumbnail' => get_template_directory_uri() . '/inc/images/sidebar-content.png',
- ),
- 'value' => 'content',
- 'label' => __( 'One-column, no sidebar', 'newtheme' ),
- 'thumbnail' => get_template_directory_uri() . '/inc/images/content.png',
- ),
- );
-
- return apply_filters( 'newtheme_layouts', $layout_options );
- }
Devuelve un array con las opciones para cada tipo de estructura del diseño.
- <?php
-
- /**
- * Returns the default options for New Theme.
- */
- function newtheme_get_default_theme_options() {
- 'color_scheme' => 'light',
- 'link_color' => newtheme_get_default_link_color( 'light' ),
- 'theme_layout' => 'content-sidebar',
- );
-
- if ( is_rtl() )
- $default_theme_options['theme_layout'] = 'sidebar-content';
-
- return apply_filters( 'newtheme_default_theme_options', $default_theme_options );
- }
Devuelve las opciones por defecto del tema.
- <?php
-
- /**
- * Returns the default link color for New Theme, based on color scheme.
- *
- *
- * @param $string $color_scheme Color scheme. Defaults to the active color scheme.
- * @return $string Color.
- */
- function newtheme_get_default_link_color( $color_scheme = null ) {
- if ( null === $color_scheme ) {
- $options = newtheme_get_theme_options();
- $color_scheme = $options['color_scheme'];
- }
-
- $color_schemes = newtheme_color_schemes();
- return false;
-
- return $color_schemes[ $color_scheme ]['default_link_color'];
- }
Devuelve el color por defecto para los vínculos.
- <?php
-
- /**
- * Returns the options array for New Theme.
- */
- function newtheme_get_theme_options() {
- return get_option( 'newtheme_theme_options', newtheme_get_default_theme_options() );
- }
Devuelve un array con todas las opciones del tema.
- <?php
-
- /**
- * Renders the Color Scheme setting field.
- */
- function newtheme_settings_field_color_scheme() {
- $options = newtheme_get_theme_options();
-
- foreach ( newtheme_color_schemes() as $scheme ) {
- ?>
- <div class="layout image-radio-option color-scheme">
- <label class="description">
- <input type="radio" name="newtheme_theme_options[color_scheme]" value="<?php echo esc_attr( $scheme['value'] ); ?>" <?php checked( $options['color_scheme'], $scheme['value'] ); ?> />
- <input type="hidden" id="default-color-<?php echo esc_attr( $scheme['value'] ); ?>" value="<?php echo esc_attr( $scheme['default_link_color'] ); ?>" />
- <span>
- <img src="<?php echo esc_url( $scheme['thumbnail'] ); ?>" width="136" height="122" alt="" />
- <?php echo $scheme['label']; ?>
- </span>
- </label>
- </div>
- <?php
- }
- }
Esta función genera el grupo de radio buttons que permitirá elegir entre un esquema de color u otro.
- <?php
-
- /**
- * Renders the Link Color setting field.
- */
- function newtheme_settings_field_link_color() {
- $options = newtheme_get_theme_options();
- ?>
- <input type="text" name="newtheme_theme_options[link_color]" id="link-color" value="<?php echo esc_attr( $options['link_color'] ); ?>" />
- <a href="#" class="pickcolor hide-if-no-js" id="link-color-example"></a>
- <input type="button" class="pickcolor button hide-if-no-js" value="<?php esc_attr_e( 'Select a Color', 'newtheme' ); ?>" />
- <div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
- <br />
- <span><?php printf( __( 'Default color: %s', 'newtheme' ), '<span id="default-color">' . newtheme_get_default_link_color( $options['color_scheme'] ) . '</span>' ); ?></span>
- <?php
- }
Esta función genera el formulario para poder elegir el color de los vínculos.
- <?php
-
- /**
- * Renders the Layout setting field.
- */
- function newtheme_settings_field_layout() {
- $options = newtheme_get_theme_options();
- foreach ( newtheme_layouts() as $layout ) {
- ?>
- <div class="layout image-radio-option theme-layout">
- <label class="description">
- <input type="radio" name="newtheme_theme_options[theme_layout]" value="<?php echo esc_attr( $layout['value'] ); ?>" <?php checked( $options['theme_layout'], $layout['value'] ); ?> />
- <span>
- <img src="<?php echo esc_url( $layout['thumbnail'] ); ?>" width="136" height="122" alt="" />
- <?php echo $layout['label']; ?>
- </span>
- </label>
- </div>
- <?php
- }
- }
Esta función genera el campo para elegir la estructura del blog.
- <?php
-
- /**
- * Returns the options array for New Theme.
- */
- function newtheme_theme_options_render_page() {
- ?>
- <div class="wrap">
- <?php screen_icon(); ?>
- <?php settings_errors(); ?>
-
- <form method="post" action="options.php">
- <?php
- settings_fields( 'newtheme_options' );
- do_settings_sections( 'theme_options' );
- submit_button();
- ?>
- </form>
- </div>
- <?php
- }
Función que genera todo el formulario de opciones.
- <?php
-
- /**
- * Sanitize and validate form input. Accepts an array, return a sanitized array.
- *
- * @see newtheme_theme_options_init()
- * @todo set up Reset Options action
- */
- function newtheme_theme_options_validate( $input ) {
- $output = $defaults = newtheme_get_default_theme_options();
-
- // Color scheme must be in our array of color scheme options
- if ( isset( $input['color_scheme'] ) && array_key_exists( $input['color_scheme'], newtheme_color_schemes() ) )
- $output['color_scheme'] = $input['color_scheme'];
-
- // Our defaults for the link color may have changed, based on the color scheme.
- $output['link_color'] = $defaults['link_color'] = newtheme_get_default_link_color( $output['color_scheme'] );
-
- // Link color must be 3 or 6 hexadecimal characters
- if ( isset( $input['link_color'] ) && preg_match( '/^#?([a-f0-9]{3}){1,2}$/i', $input['link_color'] ) )
-
- // Theme layout must be in our array of theme layout options
- if ( isset( $input['theme_layout'] ) && array_key_exists( $input['theme_layout'], newtheme_layouts() ) )
- $output['theme_layout'] = $input['theme_layout'];
-
- return apply_filters( 'newtheme_theme_options_validate', $output, $input, $defaults );
- }
Esta función valida que los datos del formulario son correctos.
- <?php
-
- /**
- * Enqueue the styles for the current color scheme.
- */
- function newtheme_enqueue_color_scheme() {
- $options = newtheme_get_theme_options();
- $color_scheme = $options['color_scheme'];
-
- if ( 'dark' == $color_scheme )
-
- do_action( 'newtheme_enqueue_color_scheme', $color_scheme );
- }
- add_action( 'wp_enqueue_scripts', 'newtheme_enqueue_color_scheme' );
Función que cambiará el estilo actual de la página dependiendo del color de esquema elegido.
- <?php
-
- /**
- * Add a style block to the theme for the current link color.
- *
- * This function is attached to the wp_head action hook.
- */
- function newtheme_print_link_color_style() {
- $options = newtheme_get_theme_options();
- $link_color = $options['link_color'];
-
- $default_options = newtheme_get_default_theme_options();
-
- // Don't do anything if the current link color is the default.
- if ( $default_options['link_color'] == $link_color )
- return;
- ?>
- <style>
- /* Link color */
- a,
- #site-title a:focus,
- #site-title a:hover,
- #site-title a:active,
- .entry-title a:hover,
- .entry-title a:focus,
- .entry-title a:active,
- .widget_newtheme_ephemera .comments-link a:hover,
- section.recent-posts .other-recent-posts a[rel="bookmark"]:hover,
- section.recent-posts .other-recent-posts .comments-link a:hover,
- .format-image footer.entry-meta a:hover,
- #site-generator a:hover {
- color: <?php echo $link_color; ?>;
- }
- section.recent-posts .other-recent-posts .comments-link a:hover {
- border-color: <?php echo $link_color; ?>;
- }
- article.feature-image.small .entry-summary p a:hover,
- .entry-header .comments-link a:hover,
- .entry-header .comments-link a:focus,
- .entry-header .comments-link a:active,
- .feature-slider a.active {
- background-color: <?php echo $link_color; ?>;
- }
- </style>
- <?php
- }
- add_action( 'wp_head', 'newtheme_print_link_color_style' );
Función que añadirá el color a los vínculos a través de los estilos si este no es el mismo que el de defecto.
- <?php
-
- /**
- * Adds New Theme layout classes to the array of body classes.
- */
- function newtheme_layout_classes( $existing_classes ) {
- $options = newtheme_get_theme_options();
- $current_layout = $options['theme_layout'];
-
- else
-
- if ( 'content-sidebar' == $current_layout )
- $classes[] = 'right-sidebar';
- elseif ( 'sidebar-content' == $current_layout )
- $classes[] = 'left-sidebar';
- else
- $classes[] = $current_layout;
-
- $classes = apply_filters( 'newtheme_layout_classes', $classes, $current_layout );
-
- }
- add_filter( 'body_class', 'newtheme_layout_classes' );
Esta función añade las clases correspondientes a la etiqueta body dependiendo de la estructura de blog elegida.
- <?php
-
- /**
- * Implements New Theme theme options into Theme Customizer
- *
- * @param $wp_customize Theme Customizer object
- * @return void
- */
- function newtheme_customize_register( $wp_customize ) {
- $wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
- $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
-
- $options = newtheme_get_theme_options();
- $defaults = newtheme_get_default_theme_options();
-
- 'default' => $defaults['color_scheme'],
- 'type' => 'option',
- 'capability' => 'edit_theme_options',
- ) );
-
- $schemes = newtheme_color_schemes();
- foreach ( $schemes as $scheme ) {
- $choices[ $scheme['value'] ] = $scheme['label'];
- }
-
- 'label' => __( 'Color Scheme', 'newtheme' ),
- 'section' => 'colors',
- 'settings' => 'newtheme_theme_options[color_scheme]',
- 'type' => 'radio',
- 'choices' => $choices,
- 'priority' => 5,
- ) );
-
- // Link Color (added to Color Scheme section in Theme Customizer)
- 'default' => newtheme_get_default_link_color( $options['color_scheme'] ),
- 'type' => 'option',
- 'sanitize_callback' => 'sanitize_hex_color',
- 'capability' => 'edit_theme_options',
- ) );
-
- 'label' => __( 'Link Color', 'newtheme' ),
- 'section' => 'colors',
- 'settings' => 'newtheme_theme_options[link_color]',
- ) ) );
-
- // Default Layout
- 'title' => __( 'Layout', 'newtheme' ),
- 'priority' => 50,
- ) );
-
- 'type' => 'option',
- 'default' => $defaults['theme_layout'],
- 'sanitize_callback' => 'sanitize_key',
- ) );
-
- $layouts = newtheme_layouts();
- foreach ( $layouts as $layout ) {
- $choices[$layout['value']] = $layout['label'];
- }
-
- 'section' => 'newtheme_layout',
- 'type' => 'radio',
- 'choices' => $choices,
- ) );
- }
- add_action( 'customize_register', 'newtheme_customize_register' );
Esta función añade todas las opciones al personalizador de temas.
- <?php
-
- /**
- * Bind JS handlers to make Theme Customizer preview reload changes asynchronously.
- * Used with blogname and blogdescription.
- */
- function newtheme_customize_preview_js() {
- wp_enqueue_script( 'newtheme-customizer', get_template_directory_uri() . '/inc/theme-customizer.js', array( 'customize-preview' ), '20120523', true );
- }
- add_action( 'customize_preview_init', 'newtheme_customize_preview_js' );
Esta función indica a WordPress que añada un archivo javascript para la previsualización de la página para poder ver los cambios del tema.

WordPress 3.x para desarrolladores: Temas y plantillas, functions.php
0Como ya llevamos varias plantillas creadas con algunas llamadas a funciones del archivo functions.php, vamos a crearlo y añadir esas funciones, después continuaremos añadiendo más plantillas.
FUNCTIONS.PHP
Creamos el archivo functions.php y añadimos el siguiente código:
- <?php
-
- /**
- * Set the content width based on the theme's design and stylesheet.
- */
- $content_width = 584;
Este código creara una variable que nos indicará el ancho que tendrá el contenido.
- <?php
-
- /**
- * Tell WordPress to run newtheme_setup() when the 'after_setup_theme' hook is run.
- */
- add_action( 'after_setup_theme', 'newtheme_setup' );
-
-
- function newtheme_setup() {
-
- }
-
- endif;
Le decimos a WordPress que ejecute newtheme_setup cuando el hook after_setup_theme esté funcionando. Creamos un condicional para comprobar que la función newtheme_setup no ha sido aun creada, y creamos la función.
Dentro de newtheme_setup añadiremos las siguientes lineas de código:
- <?php
-
- load_theme_textdomain( 'newtheme', get_template_directory() . '/languages' );
Esta línea cargará el archivo de idioma correspondiente.
- <?php
-
- add_editor_style();
Le indicamos a WordPress que cargue el editor de estilos. Para ello WordPress buscará el archivo editor-style.css dentro de la carpeta del tema, por tanto copiaremos los archivos editor-style.css y editor-style-rtl.css del tema Twenty Eleven a nuestro tema.
- <?php
-
- require( get_template_directory() . '/inc/theme-options.php' );
- require( get_template_directory() . '/inc/widgets.php' );
Estas dos lineas cargan los archivos de las opciones del tema que se mostrarán en la administración y los widgets de los que disponga el tema.
- <?php
-
- add_theme_support( 'automatic-feed-links' );
Le indicamos a WordPress que los links de este tema se añadirán a un archivo rss que se creará automáticamente. Más sobre otros argumentos de esta función: http://codex.wordpress.org/Function_Reference/add_theme_support
- <?php
-
- register_nav_menu( 'primary', __( 'Primary Menu', 'newtheme' ) );
Registramos la barra de menú de la cabecera.
- <?php
- add_theme_support( 'post-formats', array( 'aside', 'link', 'gallery', 'status', 'quote', 'image' ) );
Añadimos soporte para varios tipos de formato de posts.
- <?php
-
- $theme_options = newtheme_get_theme_options();
- if ( 'dark' == $theme_options['color_scheme'] )
- $default_background_color = '1d1d1d';
- else
- $default_background_color = 'f1f1f1';
-
- // Add support for custom backgrounds.
- // Let WordPress know what our default background color is.
- // This is dependent on our current color scheme.
- 'default-color' => $default_background_color,
- ) );
Primero recuperamos las opciones del tema a través de la función newtheme_get_theme_options(), que se encuentra en el archivo inc/theme_options.php, el cual crearemos más delante.
Comprobamos que tipo de esquema de estilos se ha elegido y guardamos en la variable $default_background_color el valor correspondiente.
Le indicamos a WordPress el color de nuestro fondo de página.
- <?php
-
- add_theme_support( 'post-thumbnails' );
Le indicamos a WordPress que este tema utilizará imágenes destacadas o thumbnails.
- <?php
-
- // The default header text color.
- 'default-text-color' => '000',
- // The height and width of our custom header.
- 'width' => apply_filters( 'newtheme_header_image_width', 1000 ),
- 'height' => apply_filters( 'newtheme_header_image_height', 288 ),
- // Support flexible heights.
- 'flex-height' => true,
- // Random image rotation by default.
- 'random-default' => true,
- // Callback for styling the header.
- 'wp-head-callback' => 'newtheme_header_style',
- // Callback for styling the header preview in the admin.
- 'admin-head-callback' => 'newtheme_admin_header_style',
- // Callback used to display the header preview in the admin.
- 'admin-preview-callback' => 'newtheme_admin_header_image',
- );
-
- add_theme_support( 'custom-header', $custom_header_support );
Creamos un array con los encabezados personalizados y se lo indicamos a WordPress.
- <?php
-
- // This is all for compatibility with versions of WordPress prior to 3.4.
- add_custom_image_header( $custom_header_support['wp-head-callback'], $custom_header_support['admin-head-callback'], $custom_header_support['admin-preview-callback'] );
- add_custom_background();
- }
En el caso de que se utilizase este tema con una versión de WordPress inferior a la 3.4 creamos varias constantes, y añadimos las cabeceras personalizadas y el fondo a WordPress.
- <?php
-
- set_post_thumbnail_size( $custom_header_support['width'], $custom_header_support['height'], true );
Configuramos la imagen destacada definiendo un ancho y alto.
- <?php
-
- add_image_size( 'large-feature', $custom_header_support['width'], $custom_header_support['height'], true );
- // Used for featured posts if a large-feature doesn't exist.
- add_image_size( 'small-feature', 500, 300 );
Añadimos la imagen a la cabecera definiendo su ancho y alto, además añadimos una imagen más pequeña para los post en el caso de que no existe imagen para la cabecera.
- <?php
-
- 'url' => '%s/images/headers/wheel.jpg',
- 'thumbnail_url' => '%s/images/headers/wheel-thumbnail.jpg',
- /* translators: header image description */
- 'description' => __( 'Wheel', 'newtheme' )
- ),
- 'url' => '%s/images/headers/shore.jpg',
- 'thumbnail_url' => '%s/images/headers/shore-thumbnail.jpg',
- /* translators: header image description */
- 'description' => __( 'Shore', 'newtheme' )
- ),
- 'url' => '%s/images/headers/trolley.jpg',
- 'thumbnail_url' => '%s/images/headers/trolley-thumbnail.jpg',
- /* translators: header image description */
- 'description' => __( 'Trolley', 'newtheme' )
- ),
- 'url' => '%s/images/headers/pine-cone.jpg',
- 'thumbnail_url' => '%s/images/headers/pine-cone-thumbnail.jpg',
- /* translators: header image description */
- 'description' => __( 'Pine Cone', 'newtheme' )
- ),
- 'url' => '%s/images/headers/chessboard.jpg',
- 'thumbnail_url' => '%s/images/headers/chessboard-thumbnail.jpg',
- /* translators: header image description */
- 'description' => __( 'Chessboard', 'newtheme' )
- ),
- 'url' => '%s/images/headers/lanterns.jpg',
- 'thumbnail_url' => '%s/images/headers/lanterns-thumbnail.jpg',
- /* translators: header image description */
- 'description' => __( 'Lanterns', 'newtheme' )
- ),
- 'url' => '%s/images/headers/willow.jpg',
- 'thumbnail_url' => '%s/images/headers/willow-thumbnail.jpg',
- /* translators: header image description */
- 'description' => __( 'Willow', 'newtheme' )
- ),
- 'url' => '%s/images/headers/hanoi.jpg',
- 'thumbnail_url' => '%s/images/headers/hanoi-thumbnail.jpg',
- /* translators: header image description */
- 'description' => __( 'Hanoi Plant', 'newtheme' )
- )
- ) );
Este es el paquete de imágenes que el tema Twenty Eleven trae por defecto, nosotros haremos lo mismo. Si no lo habéis hecho ya, copiad la carpeta images del tema Twenty Eleven a nuestro tema.
El marcador %s indica que se debe sustituir por la uri del tema.
Como esta función tiene llamadas a otras funciones dentro del mismo archivo functions.php, vamos a crearlas.
En primer lugar crearemos la función newtheme_header_style():
- <?php
-
- /**
- * Styles the header image and text displayed on the blog
- */
- function newtheme_header_style() {
- $text_color = get_header_textcolor();
-
- // If no custom options for text are set, let's bail.
- if ( $text_color == HEADER_TEXTCOLOR )
- return;
-
- // If we get this far, we have custom styles. Let's do this.
- ?>
- <style type="text/css">
- <?php
- // Has the text been hidden?
- if ( 'blank' == $text_color ) :
- ?>
- #site-title,
- #site-description {
- position: absolute !important;
- clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
- clip: rect(1px, 1px, 1px, 1px);
- }
- <?php
- // If the user has set a custom color for the text use that
- else :
- ?>
- #site-title a,
- #site-description {
- color: #<?php echo $text_color; ?> !important;
- }
- <?php endif; ?>
- </style>
- <?php
- }
- endif; // newtheme_header_style
Simplemente en esta función se generan los estilos para el título y la descripción que se ubican en la cabecera de la página.
Creamos el método newtheme_admin_header_style():
- <?php
-
- /**
- * Styles the header image displayed on the Appearance > Header admin panel.
- *
- * Referenced via add_theme_support('custom-header') in newtheme_setup().
- */
- function newtheme_admin_header_style() {
- ?>
- <style type="text/css">
- .appearance_page_custom-header #headimg {
- border: none;
- }
- #headimg h1,
- #desc {
- font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
- }
- #headimg h1 {
- margin: 0;
- }
- #headimg h1 a {
- font-size: 32px;
- line-height: 36px;
- text-decoration: none;
- }
- #desc {
- font-size: 14px;
- line-height: 23px;
- padding: 0 0 3em;
- }
- <?php
- // If the user has set a custom color for the text use that
- if ( get_header_textcolor() != HEADER_TEXTCOLOR ) :
- ?>
- #site-title a,
- #site-description {
- color: #<?php echo get_header_textcolor(); ?>;
- }
- <?php endif; ?>
- #headimg img {
- max-width: 1000px;
- height: auto;
- width: 100%;
- }
- </style>
- <?php
- }
- endif; // newhtme_admin_header_style
Esta función permite dar estilos a la imagen de la cabecera dentro de su apartado de opciones en la administración de WordPress, donde se podrá configurar cómo se ve la imagen.
Creamos la función newtheme_admin_header_image():
- <?php
-
- /**
- * Custom header image markup displayed on the Appearance > Header admin panel.
- *
- * Referenced via add_theme_support('custom-header') in newtheme_setup().
- */
- function newtheme_admin_header_image() { ?>
- <div id="headimg">
- <?php
- $color = get_header_textcolor();
- $image = get_header_image();
- if ( $color && $color != 'blank' )
- $style = ' style="color:#' . $color . '"';
- else
- $style = ' style="display:none"';
- ?>
- <h1><a id="name"<?php echo $style; ?> onclick="return false;" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
- <div id="desc"<?php echo $style; ?>><?php bloginfo( 'description' ); ?></div>
- <?php if ( $image ) : ?>
- <img src="<?php echo esc_url( $image ); ?>" alt="" />
- <?php endif; ?>
- </div>
- <?php }
- endif; // newtheme_admin_header_image
Esta función crea el código html que mostrará la imagen, el título y la descripción en su respectiva zona de opciones de la administración de WordPress, para que el usuario pueda ver como quedaría.
- <?php
-
- /**
- * Sets the post excerpt length to 40 words.
- *
- * To override this length in a child theme, remove the filter and add your own
- * function tied to the excerpt_length filter hook.
- */
- function newtheme_excerpt_length( $length ) {
- return 40;
- }
- add_filter( 'excerpt_length', 'newtheme_excerpt_length' );
Esta función establece la longitud del extracto de un post a 40 palabras.
- <?php
-
- /**
- * Returns a "Continue Reading" link for excerpts
- */
- function newtheme_continue_reading_link() {
- return ' <a href="'. esc_url( get_permalink() ) . '">' . __( 'Continue reading <span class="meta-nav">→</span>', 'newtheme' ) . '</a>';
- }
Esta función devuelve el link con el texto «Seguir leyendo…» en los extractos de los posts.
- <?php
-
- /**
- * Replaces "[...]" (appended to automatically generated excerpts) with an ellipsis and newtheme_continue_reading_link().
- *
- * To override this in a child theme, remove the filter and add your own
- * function tied to the excerpt_more filter hook.
- */
- function newtheme_auto_excerpt_more( $more ) {
- return ' …' . newtheme_continue_reading_link();
- }
- add_filter( 'excerpt_more', 'newtheme_auto_excerpt_more' );
Esta función remplaza el texto «[…]» por «…» utilizando «…» para ello, y el link de newtheme_continue_reading_link()–
- <?php
-
- /**
- * Adds a pretty "Continue Reading" link to custom post excerpts.
- *
- * To override this link in a child theme, remove the filter and add your own
- * function tied to the get_the_excerpt filter hook.
- */
- function newtheme_custom_excerpt_more( $output ) {
- if ( has_excerpt() && ! is_attachment() ) {
- $output .= newtheme_continue_reading_link();
- }
- return $output;
- }
- add_filter( 'get_the_excerpt', 'newtheme_custom_excerpt_more' );
Añade la salida de newtheme_continue_reading_link() a los extractos personalizados de los posts.
- <?php
-
- /**
- * Get our wp_nav_menu() fallback, wp_page_menu(), to show a home link.
- */
- function newtheme_page_menu_args( $args ) {
- $args['show_home'] = true;
- return $args;
- }
- add_filter( 'wp_page_menu_args', 'newtheme_page_menu_args' );
Esta función hace que en nuestro menú de navegación aparezca un link hacía la página principal.
- <?php
-
- /**
- * Register our sidebars and widgetized areas. Also register the default Epherma widget.
- */
- function newtheme_widgets_init() {
-
- register_widget( 'New_Theme_Ephemera_Widget' );
-
- 'name' => __( 'Main Sidebar', 'newtheme' ),
- 'id' => 'sidebar-1',
- 'before_widget' => '<aside id="%1$s" class="widget %2$s">',
- 'after_widget' => "</aside>",
- 'before_title' => '<h3 class="widget-title">',
- 'after_title' => '</h3>',
- ) );
-
- 'name' => __( 'Showcase Sidebar', 'newtheme' ),
- 'id' => 'sidebar-2',
- 'description' => __( 'The sidebar for the optional Showcase Template', 'newtheme' ),
- 'before_widget' => '<aside id="%1$s" class="widget %2$s">',
- 'after_widget' => "</aside>",
- 'before_title' => '<h3 class="widget-title">',
- 'after_title' => '</h3>',
- ) );
-
- 'name' => __( 'Footer Area One', 'newtheme' ),
- 'id' => 'sidebar-3',
- 'description' => __( 'An optional widget area for your site footer', 'newtheme' ),
- 'before_widget' => '<aside id="%1$s" class="widget %2$s">',
- 'after_widget' => "</aside>",
- 'before_title' => '<h3 class="widget-title">',
- 'after_title' => '</h3>',
- ) );
-
- 'name' => __( 'Footer Area Two', 'newtheme' ),
- 'id' => 'sidebar-4',
- 'description' => __( 'An optional widget area for your site footer', 'newtheme' ),
- 'before_widget' => '<aside id="%1$s" class="widget %2$s">',
- 'after_widget' => "</aside>",
- 'before_title' => '<h3 class="widget-title">',
- 'after_title' => '</h3>',
- ) );
-
- 'name' => __( 'Footer Area Three', 'newtheme' ),
- 'id' => 'sidebar-5',
- 'description' => __( 'An optional widget area for your site footer', 'newtheme' ),
- 'before_widget' => '<aside id="%1$s" class="widget %2$s">',
- 'after_widget' => "</aside>",
- 'before_title' => '<h3 class="widget-title">',
- 'after_title' => '</h3>',
- ) );
- }
- add_action( 'widgets_init', 'newtheme_widgets_init' );
Esta función registra nuestro widget que crearemos en el archivo inc/widgets.php, y las cinco sidebars que añade el tema a diferentes partes de la página.
- <?php
-
- /**
- * Display navigation to next/previous pages when applicable
- */
- function newtheme_content_nav( $nav_id ) {
- global $wp_query;
-
- if ( $wp_query->max_num_pages > 1 ) : ?>
- <nav id="<?php echo $nav_id; ?>">
- <h3 class="assistive-text"><?php _e( 'Post navigation', 'newtheme' ); ?></h3>
- <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'newtheme' ) ); ?></div>
- <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'newtheme' ) ); ?></div>
- </nav><!-- #nav-above -->
- <?php endif;
- }
- endif; // newtheme_content_nav
Muestra los links para mostrar la siguiente o anterior página de posts cuando sea aplicable.
- <?php
-
- /**
- * Return the URL for the first link found in the post content.
- *
- * @return string|bool URL or false when no link is present.
- */
- function newtheme_url_grabber() {
- return false;
-
- return esc_url_raw( $matches[1] );
- }
Devuelve la url del primer link encontrado en el contenido del post.
- <?php
-
- /**
- * Count the number of footer sidebars to enable dynamic classes for the footer
- */
- function newtheme_footer_sidebar_class() {
- $count = 0;
-
- if ( is_active_sidebar( 'sidebar-3' ) )
- $count++;
-
- if ( is_active_sidebar( 'sidebar-4' ) )
- $count++;
-
- if ( is_active_sidebar( 'sidebar-5' ) )
- $count++;
-
- $class = '';
-
- switch ( $count ) {
- case '1':
- $class = 'one';
- break;
- case '2':
- $class = 'two';
- break;
- case '3':
- $class = 'three';
- break;
- }
-
- if ( $class )
- echo 'class="' . $class . '"';
- }
Cuenta el número de sidebars habilitados para el pie de página y devuelve la clase que corresponda.
- <?php
-
- /**
- * Template for comments and pingbacks.
- *
- * To override this walker in a child theme without modifying the comments template
- * simply create your own newtheme_comment(), and that function will be used instead.
- *
- * Used as a callback by wp_list_comments() for displaying the comments.
- *
- */
- function newtheme_comment( $comment, $args, $depth ) {
- $GLOBALS['comment'] = $comment;
- switch ( $comment->comment_type ) :
- case 'pingback' :
- case 'trackback' :
- ?>
- <li class="post pingback">
- <p><?php _e( 'Pingback:', 'newtheme' ); ?> <?php comment_author_link(); ?><?php edit_comment_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?></p>
- <?php
- break;
- default :
- ?>
- <li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
- <article id="comment-<?php comment_ID(); ?>" class="comment">
- <footer class="comment-meta">
- <div class="comment-author vcard">
- <?php
- $avatar_size = 68;
- if ( '0' != $comment->comment_parent )
- $avatar_size = 39;
-
- echo get_avatar( $comment, $avatar_size );
-
- /* translators: 1: comment author, 2: date and time */
- esc_url( get_comment_link( $comment->comment_ID ) ),
- get_comment_time( 'c' ),
- /* translators: 1: date, 2: time */
- )
- );
- ?>
-
- <?php edit_comment_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?>
- </div><!-- .comment-author .vcard -->
-
- <?php if ( $comment->comment_approved == '0' ) : ?>
- <em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'newtheme' ); ?></em>
- <br />
- <?php endif; ?>
-
- </footer>
-
- <div class="comment-content"><?php comment_text(); ?></div>
-
- <div class="reply">
- <?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( 'Reply <span>↓</span>', 'newtheme' ), 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
- </div><!-- .reply -->
- </article><!-- #comment-## -->
-
- <?php
- break;
- endswitch;
- }
- endif; // ends check for newtheme_comment()
Esta función genera el código html necesario para mostrar cada comentario de un post.
- <?php
-
- /**
- * Prints HTML with meta information for the current post-date/time and author.
- * Create your own newtheme_posted_on to override in a child theme
- */
- function newtheme_posted_on() {
- printf( __( '<span class="sep">Posted on </span><a href="%1$s" title="%2$s" rel="bookmark"><time class="entry-date" datetime="%3$s" pubdate>%4$s</time></a><span class="by-author"> <span class="sep"> by </span> <span class="author vcard"><a class="url fn n" href="%5$s" title="%6$s" rel="author">%7$s</a></span></span>', 'newtheme' ),
- esc_url( get_permalink() ),
- esc_attr( get_the_time() ),
- esc_attr( get_the_date( 'c' ) ),
- esc_html( get_the_date() ),
- esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
- get_the_author()
- );
- }
- endif;
Esta función devuelve los metadatos de un post.
- <?php
-
- /**
- * Adds two classes to the array of body classes.
- * The first is if the site has only had one author with published posts.
- * The second is if a singular post being displayed
- */
- function newtheme_body_classes( $classes ) {
-
- $classes[] = 'single-author';
-
- if ( is_singular() && ! is_home() && ! is_page_template( 'showcase.php' ) && ! is_page_template( 'sidebar-page.php' ) )
- $classes[] = 'singular';
-
- return $classes;
- }
- add_filter( 'body_class', 'newtheme_body_classes' );
Esta función devuelve las clases de estilos que corresponden para la etiqueta body dependiendo del tipo de página que se muestre al usuario.