Me gusta pensar en WordPress como la droga de entrada al desarrollo web. Muchas personas que comienzan a usar la plataforma inicialmente solo buscan una forma cómoda (y gratuita) de crear un sitio web simple, a menudo con la ayuda de un complemento de creación de páginas de WordPress. Algo así como «Voy a intentarlo una vez». Sin embargo, una buena parte de los usuarios no se detiene ahí. En cambio, se enganchan. Piensa en más ideas. Experimentar. Prueban nuevos complementos. Descubren Firebug. Auge. Pronto no habrá vuelta atrás. ¿Suena como tu historia? Como usuario de WordPress, es natural querer cada vez más control sobre su sitio web. Para anhelar el diseño personalizado, la funcionalidad personalizada, personalizar todo. Afortunadamente, WordPress está diseñado exactamente para eso. Su estructura flexible y arquitectura compartimentada permite que cualquiera pueda cambiar prácticamente cualquier cosa en su sitio. Entre las herramientas más importantes en la búsqueda del control completo del sitio web se encuentran las plantillas de página. Permiten a los usuarios modificar drásticamente el diseño y la funcionalidad de su sitio web. ¿Quieres un encabezado personalizado para tu página principal? Hecho. ¿Una barra lateral adicional solo para la página de tu blog? No hay problema. ¿Una página de error 404 única? Ser mi huésped. Si deseas saber cómo las plantillas de página de WordPress pueden ayudarte a lograrlo, sigue leyendo. Pero primero, algunos antecedentes.

Archivos de plantilla en WordPress  #

¿De qué estamos hablando cuando hablamos de plantillas en el contexto de WordPress? La versión corta es que las plantillas son archivos que le dicen a WordPress cómo mostrar diferentes tipos de contenido. La versión un poco más larga: cada vez que alguien envía una solicitud para ver parte de su sitio web, la plataforma de WordPress averiguará qué contenido quiere ver y cómo se debe representar esa parte específica de su sitio web. Para lo último, WordPress intentará utilizar el archivo de plantilla más apropiado que se encuentre dentro de tu tema. Cuál se decide sobre la base de un orden establecido, la jerarquía de plantillas de WordPress. Puedes ver cómo se ve en la captura de pantalla a continuación o en esta versión interactiva.

La jerarquía de plantillas es una lista de archivos de plantilla con los que WordPress está familiarizado y que se clasifican para determinar qué archivo tiene prioridad sobre otro. Puedes pensar en él como un árbol de decisiones. Cuando WordPress intenta decidir cómo mostrar una página determinada, desciende por la jerarquía de plantillas hasta que encuentra el primer archivo de plantilla que se ajusta a la página solicitada. Por ejemplo, si alguien intenta acceder a la dirección http://yoursite.com/category/news, WordPress buscará el archivo de plantilla correcto en este orden:

1. categoría- {slug}.php: en este caso categoría-noticias.php
2. categoría- {id}.php >: si el ID de categoría fuera 5, WordPress intentaría encontrar un archivo llamado categoría-5.php
3. category.php
4. archive.php
5. index.php

En la parte inferior de la jerarquía está index.php. Se utilizará para mostrar cualquier contenido que no tenga un archivo de plantilla más específico adjunto a su nombre. Si un archivo de plantilla ocupa un lugar más alto en la jerarquía, WordPress usará automáticamente ese archivo para mostrar el contenido en cuestión.

Plantillas de página y su uso  #

Para las páginas, la plantilla estándar suele ser page.php. A menos que haya un archivo de plantilla más específico disponible (como archive.php para una página de archivo), WordPress usará page.php para representar el contenido de todas las páginas de tu sitio web. Sin embargo, en muchos casos puede ser necesario cambiar el diseño, la apariencia o la funcionalidad de partes individuales de su sitio web. Aquí es donde entran en juego las plantillas de página. Las plantillas de página personalizadas te permiten individualizar cualquier parte de tu sitio de WordPress sin afectar el resto. Es posible que ya haya visto esto en funcionamiento. Por ejemplo, muchos temas de WordPress hoy vienen con una opción para cambiar tu página a ancho completo, agregar una segunda barra lateral o cambiar la ubicación de la barra lateral. Si este es tu caso, probablemente se hizo a través de archivos de plantilla. Hay varias formas de lograr esto y las repasaremos más adelante. Primero, sin embargo, una advertencia: dado que trabajar con plantillas implica editar y cambiar archivos en tu tema activo, siempre es una buena idea ir con un tema hijo al realizar este tipo de personalizaciones. De esa manera, no corres el peligro de que tus cambios se sobrescriban cuando se actualice tu tema principal.

Cómo personalizar cualquier página en WordPress  #

Hay tres formas básicas de usar plantillas de página personalizadas en WordPress: agregar declaraciones condicionales a una plantilla existente; crear plantillas de página específicas que se clasifiquen más alto en la jerarquía; y asignar plantillas directamente a páginas específicas. Echaremos un vistazo a cada uno de estos a su vez.

Uso de etiquetas condicionales en plantillas predeterminadas  #

Una forma fácil de realizar cambios específicos de una página es agregar las muchas etiquetas condicionales de WordPress a una plantilla que ya está en uso. Como sugiere el nombre, estas etiquetas se utilizan para crear funciones que solo se ejecutan si se cumple una determinada condición. En el contexto de las plantillas de página, esto sería algo así como «Realice la acción X solo en la página Y». Por lo general, agregaría etiquetas condicionales al archivo page.php de su tema (a menos que, por supuesto, desee personalizar una parte diferente de su sitio web). Te permite realizar cambios limitados a la página de inicio, la página principal, la página del blog o cualquier otra página de tu sitio. A continuación, se muestran algunas etiquetas condicionales de uso frecuente:

1. is_page(): para apuntar a una página específica. Se puede usar con el ID, el título o la URL / nombre de la página.
2. is_home(): se aplica a la página de inicio.
3. is_front_page(): apunta a la página principal de tu sitio según lo establecido en Configuración → Lectura
4. is _category(): condición para una página de categoría. Puedes usar ID, título o URL / nombre como is_page()etiqueta.
5. is_single(): para publicaciones individuales o archivos adjuntos
6. is_archive(): condiciones para las páginas de archivo
7. is_404(): se aplica solo a las páginas de error 404

Por ejemplo, cuando se agrega a tu page.php en lugar de la get_header();etiqueta estándar, el siguiente código cargará un archivo de encabezado personalizado llamado header-shop.php al mostrar la página http://yoursite.com/products.

if ( is_page('products') ) {
  get_header( 'shop' );
} else {
  get_header();
}

Un buen caso de uso para esto sería si tienes una tienda en tu sitio y necesitas mostrar una imagen de encabezado diferente o un menú personalizado en la página de la tienda. Luego, podrías agregar esta personalización en header-shop.php y aparecería en el lugar apropiado. Sin embargo, las etiquetas condicionales no se limitan a una página. Puedes hacer varias declaraciones seguidas así:

if ( is_page('products') ) {
  get_header( 'shop' );
} elseif ( is_page( 42 ) ) {
  get_header( 'about' );
} else {
  get_header();
}

En este segundo ejemplo, dos condiciones cambiarán el comportamiento de diferentes páginas de su sitio. Además de cargar el archivo de encabezado específico de la tienda antes mencionado, ahora también cargaría un header-about.php en una página con el ID 42. Para todas las demás páginas, se aplica el archivo de encabezado estándar. Para obtener más información sobre el uso de etiquetas condicionales, se recomiendan los siguientes recursos:

• Códice de WordPress: Etiquetas condicionales
• ThemeLab: la guía definitiva para las etiquetas condicionales de WordPress

Creación de archivos específicos de la página en la jerarquía de WordPress  #

Las etiquetas condicionales son una excelente manera de introducir cambios más pequeños en las plantillas de tu página. Por supuesto, también puedes crear personalizaciones más grandes utilizando muchas declaraciones condicionales una tras otra. Sin embargo, me parece una solución muy engorrosa y optaría por archivos de plantilla designados. Una forma de hacerlo es explotar la jerarquía de plantillas de WordPress. Como hemos visto, la jerarquía recorrerá una lista de posibles archivos de plantilla y elegirá el primero que encuentre que se ajuste. Para las páginas, la jerarquía se ve así:

• Plantilla de página personalizada
• página- {slug}.php
• página- {id}.php
• page.php
• index.php

En primer lugar, están las plantillas de página personalizadas que se han asignado directamente a una página en particular. Si existe uno de esos, WordPress lo usará sin importar qué otros archivos de plantilla estén presentes. Hablaremos más sobre las plantillas de página personalizadas en un momento. Después de eso, WordPress buscará una plantilla de página que incluya el slug de la página en cuestión. Por ejemplo, si incluyes un archivo llamado page-about.php en tus archivos de tema, WordPress usará este archivo para mostrar tu página ‘Acerca de’ o cualquier página que se pueda encontrar en http://www.yoursite.com/about. Alternativamente, puedes lograr lo mismo al apuntar al ID de tu página. Entonces, si esa misma página tiene un ID de 5, WordPress usará el archivo de plantilla page-5.php antes de page.php si existe; es decir, solo si no hay disponible una plantilla de página de clasificación superior. (Por cierto, puedes encontrar el ID de cada página colocando el cursor sobre su título en ‘Todas las páginas’ en tu back-end de WordPress. El ID aparecerá en el enlace que muestra tu navegador).

Asignación de plantillas de página personalizadas  #

Además de proporcionar plantillas en un formulario que WordPress utilizará automáticamente, también es posible asignar manualmente plantillas personalizadas a páginas específicas. Como puedes ver en la jerarquía de plantillas, estos prevalecerán sobre cualquier otro archivo de plantilla presente en la carpeta del tema. Al igual que crear plantillas específicas de página para la jerarquía de WordPress, esto requiere que proporciones un archivo de plantilla y luego lo vincules a la página para la que quieras usarlo. Esto último se puede hacer de dos formas diferentes con las que quizás ya estés familiarizado. En caso de que no lo estés, aquí te explicamos cómo hacerlo.

1. Asignación de plantillas de página personalizadas desde el editor de WordPress  #

En el editor de WordPress, encontrarás un campo de opción llamado ‘Atributos de página’ con un menú desplegable en ‘Plantilla’.

Al hacer clic en él, obtendrás una lista de plantillas de página disponibles en tu sitio web de WordPress. Elige el que desees, guarda o actualiza tu página y ya está.

2. Configuración de una plantilla personalizada mediante el número de edición rápida 

Lo mismo también se puede lograr sin ingresar al editor de WordPress. Ve a ‘Todas las páginas’ y coloca el cursor sobre cualquier elemento de la lista. Aparecerá un menú que incluye el elemento «Edición rápida». Haz clic en él para editar la configuración de la página directamente desde la lista. Verás el mismo menú desplegable para elegir una plantilla de página diferente. Elige uno, actualiza la página y listo. Después de todo, no es tan difícil, ¿verdad? Pero, ¿qué sucede si aún no tienes una plantilla de página personalizada? ¿Cómo la creas para que tu sitio web se vea exactamente como deseas? No te preocupes, de eso se trata la siguiente parte.

Una guía paso a paso para crear plantillas de página personalizadas  #

Reunir archivos de plantilla personalizados para tus páginas no es tan difícil, pero aquí hay algunos detalles a los que debes prestar atención. Por lo tanto, repasemos el proceso poco a poco.

1. Busca la plantilla predeterminada  #

Una buena forma es comenzar copiando la plantilla que estás utilizando actualmente la página que deseas modificar. Es más fácil modificar el código existente que escribir una página completa desde cero. En la mayoría de los casos, este será el archivo page.php. (Si no sabes cómo averiguar qué archivo de plantilla se está utilizando en la página que deseas editar, el complemento What The File te resultará útil). Utilizaré el tema Twenty Twelve para la demostración. Así es como se ve tu plantilla de página estándar:

<?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
get_header(); ?>

  <div id="primary" class="site-content">
    <div id="content" role="main">

      <?php while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'content', 'page' ); ?>
        <?php comments_template( ’, true ); ?>
      <?php endwhile; // end of the loop. ?>

    </div><!-- #content -->
  </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Como puede sver, aquí no hay nada demasiado sofisticado: las llamadas habituales para el encabezado y el pie de página, y el bucle en el medio. La página en cuestión se ve así:

2. Copia y cambia el nombre del archivo de plantilla  #

Después de identificar el archivo de plantilla predeterminado, es hora de hacer una copia. Usaremos el archivo duplicado para realizar los cambios deseados en nuestra página. Para eso también tendremos que renombrarlo. No se pueden tener dos archivos con el mismo nombre, eso es confuso para todos. Puedes dar al archivo el nombre que desees siempre que no comience con ninguno de los nombres de archivo del tema reservado. Así que no lo nombres page-something.php o cualquier otra cosa que haga que WordPress piense que es un archivo de plantilla dedicado. Tiene sentido usar un nombre que identifique fácilmente para qué se usa este archivo de plantilla, como my-custom-template.php. En mi caso, iré con custom-full-width.php.

3. Personaliza el número de encabezado del archivo de plantilla 

A continuación, tenemos que decirle a WordPress que este nuevo archivo es una plantilla de página personalizada. Para eso, tendremos que ajustar el encabezado del archivo de la siguiente manera:

<?php
/*
 * Template Name: Custom Full Width
 * description: >-
  Page template without sidebar
 */

// Additional code goes here...

El nombre debajo de ‘Nombre de plantilla’ es lo que se mostrará en ‘Atributos de página’ en el editor de WordPress. Asegúrate de ajustarlo al nombre de tu plantilla.

4. Personaliza el número de código 

Ahora es el momento de llegar al meollo de la plantilla de la página: el código. En mi ejemplo, simplemente quiero eliminar la barra lateral de mi página de demostración. Esto es relativamente fácil, ya que todo lo que tengo que hacer es eliminar <?php get_sidebar();?> de la plantilla de mi página, ya que eso es lo que se llama la barra lateral. Como consecuencia, mi plantilla personalizada termina luciendo así:

<?php
/*
 * Template Name: Custom Full Width
 * description: >-
  Page template without sidebar
 */

get_header(); ?>

<div id="primary" class="site-content">
  <div id="content" role="main">

    <?php while ( have_posts() ) : the_post(); ?>
      <?php get_template_part( 'content', 'page' ); ?>
      <?php comments_template( ’, true ); ?>
    <?php endwhile; // end of the loop. ?>

  </div><!-- #content -->
</div><!-- #primary -->

<?php get_footer(); ?>

5. Carga la plantilla de página  #

Después de guardar mi archivo personalizado, es el momento de subirlo a mi sitio web. Las plantillas de página personalizadas se pueden guardar en varios lugares para que WordPress las reconozca:

• La carpeta de tu tema activo (hijo)
• La carpeta de tu tema principal principal
• Una subcarpeta dentro de cualquiera de estos

Personalmente, me gusta crear una carpeta llamada page_templates en mi tema hijo y colocar allí las plantillas personalizadas. Me resulta más fácil conservar una descripción general de mis archivos y personalizaciones.

6. Activa la plantilla  #

Como último paso, debes activar la plantilla de página. Como se mencionó anteriormente, esto se hace en Atributos de página → Plantillas en el editor de WordPress. ¡Guarda, mira la página y listo! Aquí está mi página personalizada sin barra lateral:

No es tan difícil, ¿verdad? No te preocupes, lo dominarás rápidamente. Para darte una mejor impresión de para qué usar estas plantillas de página, demostraré casos de uso adicionales (incluido el código) para el resto del artículo.

Cinco formas diferentes de utilizar plantillas de página  #

Como ya se mencionó, las plantillas de página se pueden emplear para muchos propósitos diferentes. Puedes personalizar prácticamente cualquier cosa en cualquier página con su ayuda. Solo tu imaginación (y habilidades de codificación) se interponen en tu camino.

1. Plantilla de página de ancho completo  #

El primer caso que veremos es una versión avanzada de la plantilla de demostración que creamos anteriormente. Allí arriba, ya eliminamos la barra lateral al eliminar <?php get_sidebar();?> del código. Sin embargo, como has visto en la captura de pantalla, esto en realidad no da como resultado un diseño de ancho completo, ya que la sección de contenido permanece a la izquierda. Para abordar esto, debemos ocuparnos del CSS, en particular esta parte:

.site-content {
  float: left;
  width: 65.1042%;
}

El atributo width limita el elemento que contiene nuestro contenido al 65,1042% del espacio disponible. Queremos aumentar esto. Sin embargo, si lo cambiamos al 100%, esto afectará a todas las demás páginas de nuestro sitio, lo que está lejos de ser lo que queremos. Por lo tanto, el primer orden aquí es cambiar la clase principal div en nuestra plantilla personalizada a otra, como class=“site-content-fullwidth”. El resultado:

<?php
/*
 * Template Name: Custom Full Width
 * description: >-
  Page template without sidebar
 */

get_header(); ?>

<div id="primary" class="site-content-fullwidth">
  <div id="content" role="main">

    <?php while ( have_posts() ) : the_post(); ?>
      <?php get_template_part( 'content', 'page' ); ?>
      <?php comments_template( ’, true ); ?>
    <?php endwhile; // end of the loop. ?>

  </div><!-- #content -->
</div><!-- #primary -->

<?php get_footer(); ?>

Ahora podemos ajustar el CSS para nuestra nueva clase personalizada:

.site-content-fullwidth {
  float: left;
  width: 100%;
}

Como resultado, el contenido ahora se extiende por toda la pantalla.

2. Página de error dinámico 404 con áreas de widgets  #

La página de error 404 es donde aterriza toda persona que intenta acceder a una página de su sitio web que no existe, ya sea a través de un error tipográfico, un enlace defectuoso o porque el enlace permanente de la página ha cambiado. A pesar de que a todo el mundo en Internet no le gusta obtener un 404, si está ejecutando un sitio web, la página de error 404 no tiene poca importancia. Su contenido puede ser el factor decisivo sobre si alguien abandona inmediatamente su sitio o se queda y revisa su otro contenido. Codificar una página de error personalizada desde cero es engorroso, especialmente si no confías en tus habilidades. Una mejor manera es crear áreas de widgets en su plantilla para que pueda cambiar de manera flexible lo que se muestra allí arrastrando y soltando. Para esto, tomaremos y editaremos el archivo 404.php que viene con Twenty Twelve (jerarquía de plantillas, ¿recuerdas?). Sin embargo, antes de cambiar algo allí, primero crearemos un nuevo widget insertando el siguiente código en nuestro archivo functions.php:

register_sidebar( array(
  'name' => '404 Page',
  'id' => '404',
  'description'  => __( 'Content for your 404 error page goes here.' ),
  'before_widget' => '<div id="error-box">',
  'after_widget' => '</div>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>'
) );

Esto debería mostrar el widget recién creado en su back-end de WordPress. Para asegurarte de que realmente aparezca en el sitio, debes agregar la siguiente línea de código a tu página 404 en el lugar apropiado:

<?php dynamic_sidebar( '404' ); ?>

En mi caso, quiero reemplazar el formulario de búsqueda (<?php get_search_form();?>) dentro de la plantilla con mi nuevo widget, creando el siguiente código:

Después de cargar la plantilla en mi sitio, es hora de completar mi nueva área de widgets:

Si ahora miro la página de error 404, mis widgets recién creados aparecen allí:

3. Plantilla de página para mostrar tipos de publicaciones personalizadas  #

Los tipos de publicaciones personalizadas son una excelente manera de presentar contenido que tiene su propio conjunto de puntos de datos, diseño y otras personalizaciones. Un caso de uso favorito para estos tipos de publicaciones son los elementos de revisión, como libros y películas. En nuestro caso, queremos crear una plantilla de página que muestre los elementos de la cartera. Primero necesitamos crear nuestro tipo de publicación personalizada (CPT). Esto se puede hacer manualmente o mediante un complemento. Una opción de complemento que puedo recomendar de todo corazón es Tipos. Te permite crear fácilmente tipos de publicaciones y campos personalizados. Instala y activa Tipos, agrega una publicación personalizada, asegúrate de que tu slug sea ‘cartera’, personaliza los campos que necesites (como agregar una imagen destacada), ajusta cualquier otra opción y guarda. Ahora que tenemos el tipo de publicación de nuestro portafolio, queremos que aparezca en nuestro sitio. Lo primero que haremos será crear la página en cuestión. Ten en cuenta que si eliges ‘portafolio’ como slug de su CPT, la página no puede tener el mismo slug. Fui con mi clients-portfolio y también agregué un texto de ejemplo.

Después de agregar algunos elementos en la sección de tipo de publicación ‘cartera’, queremos que aparezcan en nuestra página justo debajo del contenido de la página. Para lograr esto, usaremos nuevamente un derivado del archivo page.php. Cópialo, llámalo portfolio-template.php y cambia el encabezado a esto:

<?php
/*
 * Template Name: Portfolio Template
 * description: >-
  Page template to display portfolio custom post types 
 * underneath the page content
 */ 

Sin embargo, en este caso tendremos que realizar algunos cambios en la plantilla original. Cuando eches un vistazo al código de page.php, verás que llama a otro archivo de plantilla en el medio, llamado content-page.php (donde dice <?php get_template_part(‘content’, ‘page’);?>). En ese archivo encontramos el siguiente código:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <header class="entry-header">
    <?php if ( ! is_page_template( 'page-templates/front-page.php' ) ) : ?>
    <?php the_post_thumbnail(); ?>
    <?php endif; ?>
    <h1 class="entry-title"><?php the_title(); ?></h1>
  </header>

  <div class="entry-content">
    <?php the_content(); ?>
    <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
  </div><!-- .entry-content -->
  <footer class="entry-meta">
    <?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?>
  </footer><!-- .entry-meta -->
</article><!-- #post -->

Como puedes ver, es aquí donde se llaman el título y el contenido de la página. Dado que definitivamente los queremos en nuestro sitio de cartera, necesitaremos copiar las partes necesarias de esta plantilla en nuestro archivo page.php. El resultado se ve así:

get_header(); ?>

<div id="primary" class="site-content">
  <div id="content" role="main">

    <?php while ( have_posts() ) : the_post(); ?>
      <header class="entry-header">
        <?php the_post_thumbnail(); ?>
        <h1 class="entry-title"><?php the_title(); ?></h1>
      </header>

      <div class="entry-content">
        <?php the_content(); ?>
      </div><!-- .entry-content -->

      <?php comments_template( ’, true ); ?>
    <?php endwhile; // end of the loop. ?>

  </div><!-- #content -->
</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Para obtener los elementos de la cartera en nuestra página, agregaremos el siguiente código justo debajo de la función the_content().

<?php
  $args = array(
    'post_type' => 'portfolio', // enter custom post type
    'orderby' => 'date',
    'order' => 'DESC',
  );

  $loop = new WP_Query( $args );
  if( $loop->have_posts() ):
  while( $loop->have_posts() ): $loop->the_post(); global $post;
    echo '<div class="portfolio">';
    echo '<h3>' . get_the_title() . '</h3>';
    echo '<div class="portfolio-image">'. get_the_post_thumbnail( $id ).'</div>';
    echo '<div class="portfolio-work">'. get_the_content().'</div>';
    echo '</div>';
  endwhile;
  endif;
?>

Esto hará que el CPT aparezca en la página:

Estoy seguro de que todos estamos de acuerdo en que se ve menos que estelar, por lo que algo de estilo está en orden.

/* Portfolio posts */

.portfolio {
  -webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    0px 2px 2px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         0px 2px 2px 0px rgba(50, 50, 50, 0.75);
  margin: 0 0 20px;
  padding: 30px;
}
.portfolio-image {
  display: block;
  float: left;
  margin: 0 10px 0 0;
  max-width: 20%;
}
.portfolio-image img {
  border-radius: 0;
}
.portfolio-work {
  display: inline-block;
  max-width: 80%;
}
.portfolio h3{
  border-bottom: 1px solid #999;
  font-size: 1.57143rem;
  font-weight: normal;
  margin: 0 0 15px;
  padding-bottom: 15px;
}

Mucho mejor, ¿no crees?

Y aquí está el código completo para la plantilla de página de cartera:

<?php
/*
 * Template Name: Portfolio Template
 * description: >-
  Page template to display portfolio custom post types 
 * underneath the page content
 */

get_header(); ?>

<div id="primary" class="site-content">
  <div id="content" role="main">

    <?php while ( have_posts() ) : the_post(); ?>

      <header class="entry-header">
        <?php the_post_thumbnail(); ?>
        <h1 class="entry-title"><?php the_title(); ?></h1>
      </header>

      <div class="entry-content">
        <?php the_content(); ?>
        <?php
          $args = array(
            'post_type' => 'portfolio', // enter custom post type
            'orderby' => 'date',
            'order' => 'DESC',
          );

          $loop = new WP_Query( $args );
          if( $loop->have_posts() ):
          while( $loop->have_posts() ): $loop->the_post(); global $post;
            echo '<div class="portfolio">';
            echo '<h3>' . get_the_title() . '</h3>';
            echo '<div class="portfolio-image">'. get_the_post_thumbnail( $id ).'</div>';
            echo '<div class="portfolio-work">'. get_the_content().'</div>';
            echo '</div>';
          endwhile;
          endif;
        ?>
      </div><!-- #entry-content -->
      <?php comments_template( ’, true ); ?>               
    <?php endwhile; // end of the loop. ?>                
  </div><!-- #content -->
</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

4. Página de colaborador con imágenes de avatar  #

El siguiente paso en los casos de uso de nuestra plantilla de página es una página de colaborador. Queremos crear una lista de autores en nuestro sitio web, incluidas sus imágenes y la cantidad de publicaciones que han publicado con su nombre. El resultado final se verá así:

Nuevamente comenzaremos con nuestro archivo híbrido de antes y le agregaremos el código para la lista de contribuyentes. Pero, ¿y si no sabes cómo crear algo así? No te preocupes, puedes arreglártelas con un robo inteligente. Verás, el tema predeterminado Twenty Fourteen viene con una página de colaborador de forma predeterminada. Puedes encontrar su plantilla en la carpeta page-templates con el nombre contributors.php. Al mirar en el archivo, sin embargo, sólo te encontrarás la siguiente llamada allí: twentyfourteen_list_authors();. Afortunadamente, como un ávido usuario de WordPress, ahora concluyes que esto probablemente se refiere a una función en el archivo function.php de Twenty Fourteen y estarías en lo cierto. Por lo que encontramos ahí dentro, la parte que nos interesa es ésta:

<?php
// Output the authors list.
$contributor_ids = get_users( array(
  'fields'  => 'ID',
  'orderby' => 'post_count',
  'order'   => 'DESC',
  'who'     => 'authors',
));

foreach ( $contributor_ids as $contributor_id ) :
$post_count = count_user_posts( $contributor_id );
  // Move on if user has not published a post (yet).
  if ( ! $post_count ) {
    continue;
  }
?>

<div class="contributor">
  <div class="contributor-info">
    <div class="contributor-avatar"><?php echo get_avatar( $contributor_id, 132 ); ?></div>
    <div class="contributor-summary">
      <h2 class="contributor-name"><?php echo get_the_author_meta( 'display_name', $contributor_id ); ?></h2>
      <p class="contributor-bio">
        <?php echo get_the_author_meta( 'description', $contributor_id ); ?>
      </p>
      <a class="button contributor-posts-link" href="<?php echo esc_url( get_author_posts_url( $contributor_id ) ); ?>">
        <?php printf( _n( '%d Article', '%d Articles', $post_count, 'twentyfourteen' ), $post_count ); ?>
      </a>
    </div><!-- .contributor-summary -->
  </div><!-- .contributor-info -->
</div><!-- .contributor -->

<?php
endforeach;
?>

Lo agregaremos nuevamente debajo de la convocatoria the_content() con el siguiente resultado:

Ahora, para un poco de estilo:

/* Contributor page */

.contributor {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing:      border-box;
  display: inline-block;
  padding: 48px 10px;
}
.contributor p {
  margin-bottom: 1rem;
}
.contributor-info {
  margin: 0 auto 0 168px;
}
.contributor-avatar {
  border: 1px solid rgba(0, 0, 0, 0.1);
  float: left;
  line-height: 0;
  margin: 0 30px 0 -168px;
  padding: 2px;
}
.contributor-avatar img{
  border-radius: 0;
}
.contributor-summary {
  float: left;
}
.contributor-name{
  font-weight: normal;
  margin: 0 !important;
}
.contributor-posts-link {
  background-color: #24890d;
  border: 0 none;
  border-radius: 0;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  padding: 10px 30px 11px;
  text-transform: uppercase;
  vertical-align: bottom;
}
.contributor-posts-link:hover {
  color: #000;
  text-decoration: none;
}

Y eso debería ser todo. ¡Gracias Twenty Fourteen!

5. Número de página de archivo personalizado 

Twenty Twelve viene con su propia plantilla para páginas de archivo. Entrará en acción, por ejemplo, cuando intentes ver todas las publicaciones anteriores de una determinada categoría. Sin embargo, quiero algo un poco más parecido a lo que ha hecho Problogger: una página que permita a las personas descubrir contenido adicional en mi sitio de varias formas diferentes. Eso, nuevamente, se hace con una plantilla de página. Siguiendo con nuestra plantilla mixta de antes, agregaremos lo siguiente debajo de la llamada the_content():

<div class="archive-search-form"><?php get_search_form(); ?></div>

<h2>Archives by Year:</h2>
<ul><?php wp_get_archives('type=yearly'); ?></ul>

<h2>Archives by Month:</h2>
<ul><?php wp_get_archives('type=monthly'); ?></ul>

<h2>Archives by Subject:</h2>
<ul> <?php wp_list_categories('title_li='); ?></ul>

Además, un poco de estilo para la barra de búsqueda:

.archive-search-form {
  padding: 10px 0;
  text-align: center;
}

Y el resultado debería verse tal que así:

Para completar, aquí está el archivo completo:

<?php
/**
 * Template Name: Custom archive template
 *
 */

get_header(); ?>

<div id="primary" class="site-content">
  <div id="content" role="main">

    <?php while ( have_posts() ) : the_post(); ?>

      <header class="entry-header">
        <?php the_post_thumbnail(); ?>
        <h1 class="entry-title"><?php the_title(); ?></h1>
      </header>

      <div class="entry-content">
        <?php the_content(); ?>

        <div class="archive-search-form"><?php get_search_form(); ?></div>

        <h2>Archives by Year:</h2>
        <ul><?php wp_get_archives('type=yearly'); ?></ul>

        <h2>Archives by Month:</h2>
        <ul><?php wp_get_archives('type=monthly'); ?></ul>

        <h2>Archives by Subject:</h2>
        <ul><?php wp_list_categories('title_li='); ?></ul>
      </div><!-- #entry-content -->

      <?php comments_template( ’, true ); ?>               
    <?php endwhile; // end of the loop. ?>             
  </div><!-- #content -->
</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

¡No olvides asignarlo a una página!

Plantillas de página de WordPress en pocas palabras  #

En tu camino hacia el dominio de WordPress, aprender a usar plantillas de página es un paso importante. Pueden hacer que la personalización de tu sitio web sea muy, muy fácil y te permiten asignar una funcionalidad y un diseño únicos a tantas o pocas páginas como desees. Desde agregar áreas de widgets hasta mostrar tipos de publicaciones personalizadas y mostrar una lista de los contribuyentes de tu sitio web, las posibilidades son prácticamente infinitas. Ya sea que uses etiquetas condicionales, explotes la jerarquía de plantillas de WordPress o crees archivos de plantilla específicos de la página, depende completamente de ti y de lo que estás tratando de lograr. Empieza poco a poco y ve avanzando hacia cosas más complicadas. No pasarás mucho tiempo antes de que cada parte de tu sitio web de WordPress responda a todas tus llamadas. ¿Tienes experiencia en el uso de plantillas de página en WordPress? ¿Qué otros casos de uso puedes agregar a la lista? ¿Algún detalle importante para agregar? Cuéntanoslo en los comentarios. Crédito de la imagen: Kevin Phillips