in

Cómo construir una página de archivo de WordPress personalizada

Si te preguntara cuál es el tipo de página predeterminado menos utilizado en WordPress, lo más probable es que digas la plantilla de archivo. O, más aún, probablemente ni siquiera pensarías en la plantilla de archivo, así de impopular es. La razón es simple. Por muy bueno que sea WordPress, la forma estándar en la que se acerca al archivo está lejos de ser fácil de usar.

Si te preguntara cuál es el tipo de página predeterminado menos utilizado en WordPress, lo más probable es que digas la plantilla de archivo. O, más aún, probablemente ni siquiera pensarías en la plantilla de archivo, así de impopular es. La razón es simple. Por muy bueno que sea WordPress, la forma estándar en la que se acerca al archivo está lejos de ser fácil de usar. ¡Arreglemos eso hoy! Construyamos una página de archivo para WordPress que sea realmente útil. La mejor parte es que podrás usarlo con cualquier tema moderno de WordPress instalado en su sitio web en este momento. Pero primero, ¿qué queremos decir exactamente con «página de archivo»?

La historia de los archivos de WordPress  #

En WordPress, puedes trabajar con una variedad de estructuras y plantillas de página diferentes en la configuración estándar. Mirando la lista de directorios del tema predeterminado en el momento de escribir este artículo, Twenty Fifteen, encontramos lo siguiente:

  • página de error 404,
  • página de archivo (nuestro héroe hoy),
  • página de archivos adjuntos de imágenes,
  • página de índice (la página principal),
  • plantilla de página predeterminada (para páginas),
  • página de resultados de búsqueda,
  • publicación única y páginas adjuntas.

A pesar de sus diferentes propósitos, todas estas páginas son realmente similares en estructura y, por lo general, solo difieren en un par de lugares y en varias líneas de código. De hecho, la única diferencia visible entre la página de índice y la página de archivo es el encabezado adicional en la parte superior, que cambia según la página en particular que se está viendo.

Página de archivo estándar en Twenty Fifteen. (Ver versión grande)

La idea detrás de una estructura de archivo de este tipo es proporcionar al administrador del blog una forma de mostrar el archivo en función de varios criterios, pero de forma simplificada. Al final del día, estas diversas páginas de archivo son solo versiones de la página de índice que filtran el contenido publicado durante un período de tiempo específico o por un autor en particular o con categorías o etiquetas particulares. Si bien esto suena como una buena idea desde la perspectiva de un programador, no tiene mucho sentido desde el punto de vista del usuario. O, más exactamente, falta una capa aquí: una capa que se interpondría entre la intención del usuario de encontrar contenido y los elementos individuales en el archivo. Esto es lo que quiero decir. En este momento, la única forma integrada de mostrar los enlaces de archivos en un sitio web de WordPress es con un widget. Por lo tanto, si deseas permitir que los visitantes profundicen en el archivo de una manera clara, probablemente tengas que dedicar una barra lateral completa solo al archivo (solo para poder capturar diferentes tipos de organización, como una basada en fechas archivo, un archivo de categorías, un archivo de etiquetas, un archivo de autor, etc.). Entonces, lo que realmente necesitamos aquí es un intermediario, una página que le da la bienvenida al visitante, explica que está en el archivo y luego indica el contenido exacto que interesa o sugiere algún contenido popular. Por eso vamos a crear una página de archivo personalizada.

Cómo construir una página de archivos personalizados en WordPress  #

Esto es lo que haremos en pocas palabras. Nuestra página de archivo personalizada se basará en una plantilla de página personalizada. Esta plantilla nos permitirá hacer lo siguiente:

  • incluir un mensaje de bienvenida personalizado (puede contener texto, imágenes, un formulario de suscripción, etc. – material estándar de WordPress);
  • enumerar las últimas 15 publicaciones (configurable);
  • mostrar enlaces al archivo del autor;
  • mostrar enlaces al archivo mensual;
  • agregar áreas de widgets adicionales (para mostrar cosas como el contenido, las categorías y las etiquetas más populares).

Por último, la página responderá y no dependerá del tema actual del sitio web en el que se esté utilizando. Dicho esto, tenemos que comenzar utilizando algún tema como base de nuestro trabajo aquí. Voy a usar Zerif Lite. Fue uno de los 10 temas más populares lanzados el año pasado en el directorio de temas de WordPress, así que espero que no lo dejes pasar. Y, oye, si no te gusta el tema, no hay resentimientos. Puedes utilizar el enfoque presentado aquí con cualquier otro tema.

Introducción al archivo principal  #

El mejor modelo sobre el que construir su página de archivo es el archivo page.php de tu tema actual, por un par de razones:

  • Su estructura ya está optimizada para mostrar contenido personalizado dentro del bloque de contenido principal.
  • Probablemente sea una de las plantillas de página más simples en la estructura de tu tema.

Por lo tanto, comenzando con el archivo page.php del tema Zerif Lite, voy a hacer una copia y llamarlo tmpl_archives.php. (Asegúrate de no llamar a tu página de forma similar page-archives.php. Todos los nombres de archivo que comiencen con page-se tratarán como nuevas plantillas de página dentro de la jerarquía de archivos principal de los temas de WordPress. Por eso usamos el prefijo tmpl_ aquí). A continuación, todo lo que voy a hacer es cambiar una sola línea en ese archivo:

<?php get_template_part( 'content', 'page' ); ?>

Lo cambiaremos a esto:

<?php get_template_part( 'content', 'tmpl_archives' ); ?> 

Todo lo que hace es buscar el archivo de contenido correcto para nuestra página de archivo. Si lo deseas, puedes eliminar otros elementos que parezcan no esenciales para tu página de archivo (como comentarios), pero asegúrate de dejar todos los elementos que componen la estructura HTML. Y, en general, no tengas miedo de experimentar. Después de todo, si algo deja de funcionar, puedes recuperar fácilmente el código anterior y depurar desde allí. Además, no te olvides del comentario de declaración de plantilla personalizada estándar, que debes colocar al principio de tu nuevo archivo (en este caso,  tmpl_archives.php):

<?php /* Template Name: Archive Page Custom */ ?>

Después de eso, lo que nos queda es la siguiente estructura de archivo (con algunos elementos eliminados para facilitar la lectura):


<?php
/* Template Name: Archive Page Custom */
get_header(); ?>

<div class="clear"></div>
</header> <!-- / END HOME SECTION -->

<div id="content" class="site-content">

<div class="container">

  <div class="content-left-wrap col-md-9">
    <div id="primary" class="content-area">
      <main id="main" class="site-main" role="main">

        <?php while ( have_posts() ) : the_post(); // standard WordPress loop. ?>

          <?php get_template_part( 'content', 'tmpl_archives' ); // loading our custom file. ?>

        <?php endwhile; // end of the loop. ?>

      </main><!-- #main -->
    </div><!-- #primary -->
  </div>
  <div class="sidebar-wrap col-md-3 content-left-wrap">
    <?php get_sidebar(); ?>
  </div>

</div><!-- .container -->

<?php get_footer(); ?>

A continuación, creemos la otra pieza del rompecabezas: un archivo de contenido personalizado. Comenzaremos con el archivo content-page.php haciendo una copia y renombrándolo content-tmpl_archives.php. En este archivo, vamos a eliminar todo lo que no sea esencial, manteniendo solo los elementos estructurales, además de las llamadas a funciones básicas de WordPress:


<?php
/**
* The template used to display archive content
*/
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

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

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

    <!-- THIS IS WHERE THE FUN PART GOES -->

  </div><!-- .entry-content -->

</article><!-- #post-## -->

El comentario de marcador de posición visible en el medio es donde vamos a comenzar a incluir nuestros elementos personalizados.

Agregar un mensaje de bienvenida personalizado  #

De hecho, WordPress ya se ha ocupado de éste. La siguiente línea hace la magia:

<?php the_content(); ?>

Agregar nuevas áreas de widgets  #

Comencemos esta parte configurando nuevas áreas de widgets en WordPress usando el proceso estándar. Sin embargo, hagámoslo a través de un archivo de funciones adicionales, solo para mantener las cosas reutilizables de un tema a otro. Entonces, comenzamos creando un nuevo archivo, archives-page-functions.php colocándolo en el directorio principal del tema y registrando las dos nuevas áreas de widgets en él:


if(!function_exists('archives_page_widgets_init')) :
function archives_page_widgets_init() {
  /* First archive page widget, displayed to the LEFT. */
  register_sidebar(array(
    'name' => __('Archives page widget LEFT', 'zerif-lite'),
    'description' => __('This widget will be shown on the left side of your archive page.', 'zerif-lite'),
    'id' => 'archives-left',
    'before_widget' => '<div class="archives-widget-left">',
    'after_widget' => '</div>',
    'before_title' => '<h1 class="widget-title">',
    'after_title' => '</h1>',
  ));

  /* Second archive page widget, displayed to the RIGHT. */
  register_sidebar(array(
    'name' => __('Archives page widget RIGHT', 'zerif-lite'),
    'description' => __('This widget will be shown on the right side of your archive page.', 'zerif-lite'),
    'id' => 'archives-right',
    'before_widget' => '<div class="archives-widget-right">',
    'after_widget' => '</div>',
    'before_title' => '<h1 class="widget-title">',
    'after_title' => '</h1>',
  ));
}
endif;
add_action('widgets_init', 'archives_page_widgets_init');

A continuación, necesitaremos un estilo personalizado para la página de archivo, así que también «pondremos en cola» un nuevo archivo CSS:


if(!function_exists('archives_page_styles')) :
function archives_page_styles() {
  if(is_page_template('tmpl_archives.php')) {
    wp_enqueue_style('archives-page-style', get_template_directory_uri() . '/archives-page-style.css'); // standard way of adding style sheets in WP.
  }
}
endif;
add_action('wp_enqueue_scripts', 'archives_page_styles');

Esta es una operación de puesta en cola condicional. Solo se ejecutará si el visitante está navegando por la página de archivo. Además, no olvidemos habilitar este nuevo archivo archives-page-functions.php agregando esta línea al final del archivo functions.php del tema actual:


require get_template_directory() . '/archives-page-functions.php';

Finalmente, el nuevo bloque que usaremos en nuestro archivo content-tmpl_archives.php principal  es bastante simple. Simplemente coloque lo siguiente justo debajo de la llamada a  the_content();:


<?php /* Enabling the widget areas for the archive page. */ ?>
<?php if(is_active_sidebar('archives-left')) dynamic_sidebar('archives-left'); ?>
<?php if(is_active_sidebar('archives-right')) dynamic_sidebar('archives-right'); ?>
<div style="clear: both; margin-bottom: 30px;"></div><!-- clears the floating -->

Todo lo que queda ahora es cuidar del archivo archives-page-style.css. Pero dejémoslo para más adelante porque lo usaremos como un lugar para almacenar todos los estilos de nuestra página de archivo personalizada, no solo los de los widgets.

Listado de las 15 últimas publicaciones  #

Para esto, haremos algo de codificación PHP manual. Aunque mostrar esto podría lograrse a través de varios widgets, mantengamos las cosas diversas y ensuciemos un poco nuestras manos solo para mostrar más posibilidades. Probablemente te estés preguntando por qué el número arbitrario de 15 publicaciones. Bueno, no tengo una buena razón, así que hagamos esto configurable a través de campos personalizados. Así es como lo haremos:

  • La configuración del número de publicaciones será posible a través del campo personalizado  archived-posts-no.
  • Si el número proporcionado no es correcto, la plantilla mostrará por defecto las 15 últimas publicaciones.

A continuación se muestra el código que hace esto. Colóquelo justo debajo de la sección anterior del archivo content-tmpl_archives.php, la que maneja las nuevas áreas de widgets.


<?php
$how_many_last_posts = intval(get_post_meta($post->ID, 'archived-posts-no', true));

/* Here, we're making sure that the number fetched is reasonable. In case it's higher than 200 or lower than 2, we're just resetting it to the default value of 15. */
if($how_many_last_posts > 200 || $how_many_last_posts < 2) $how_many_last_posts = 15;

$my_query = new WP_Query('post_type=post&nopaging=1');
if($my_query->have_posts()) {
  echo '<h1 class="widget-title">Last '.$how_many_last_posts.' Posts <i class="fa fa-bullhorn" style="vertical-align: baseline;"></i></h1>&nbsp;';
  echo '<div class="archives-latest-section"><ol>';
  $counter = 1;
  while($my_query->have_posts() && $counter <= $how_many_last_posts) {
    $my_query->the_post(); 
    ?>
    <li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
    <?php
    $counter++;
  }
  echo '</ol></div>';
  wp_reset_postdata();
}
?>

Básicamente, todo lo que hace es mirar el valor del campo personalizado, establecer el número de publicaciones para mostrar y luego buscar esas publicaciones de la base de datos usando  WP_Query();. También estoy usando algunos íconos de Font Awesome para agregar algo de brillo a este bloque.

(Esta sección solo es útil si se trata de un blog de varios autores. Omite esta sección si eres el único autor). Esta funcionalidad se puede lograr con un bloque de código realmente simple ubicado justo en nuestro archivo content-tmpl_archives.php principal  (debajo del bloque anterior):


<h1 class="widget-title">Our Authors <i class="fa fa-user" style="vertical-align: baseline;"></i></h1>&nbsp;
<div class="archives-authors-section">
  <ul>
    <?php wp_list_authors('exclude_admin=0&optioncount=1'); ?>
  </ul>
</div>

Discutiremos los estilos en solo un minuto. En este momento, ten en cuenta que todo se hace a través de una  llamada de función.wp_list_authors()

Incluyo este elemento al final porque no es el más útil desde la perspectiva del lector. Aún así, tenerlo en tu página de archivo es bueno solo para que no tengas que usar widgets para el archivo mensual en otro lugar. Así es como se ve en el archivo content-tmpl_archives.php:


<h1 class="widget-title">By Month <i class="fa fa-calendar" style="vertical-align: baseline;"></i></h1>&nbsp;
<div class="archives-by-month-section">
  <p><?php wp_get_archives('type=monthly&format=custom&after= |'); ?></p>
</div>

Esta vez, lo mostramos como un solo párrafo, con entradas separadas por una barra vertical (|). (SnippetsBoard ya tiene un tutorial realmente bueno sobre cómo personalizar páginas de archivo individuales  para categorías, etiquetas y otras taxonomías en WordPress).

La plantilla de página de archivo completa  #

De acuerdo, solo para mayor claridad, veamos nuestro archivo content-tmpl_archives.php completo , que es el archivo principal que se encarga de mostrar nuestro archivo personalizado:


<?php
/**
* The template used to display archive content
*/
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

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

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

  <?php if(is_active_sidebar('archives-left')) dynamic_sidebar('archives-left'); ?>
  <?php if(is_active_sidebar('archives-right')) dynamic_sidebar('archives-right'); ?>
  <div style="clear: both; margin-bottom: 30px;"></div><!-- clears the floating -->

  <?php
  $how_many_last_posts = intval(get_post_meta($post->ID, 'archived-posts-no', true));
  if($how_many_last_posts > 200 || $how_many_last_posts < 2) $how_many_last_posts = 15;

  $my_query = new WP_Query('post_type=post&nopaging=1');
  if($my_query->have_posts()) {
    echo '<h1 class="widget-title">Last '.$how_many_last_posts.' Posts <i class="fa fa-bullhorn" style="vertical-align: baseline;"></i></h1>&nbsp;';
    echo '<div class="archives-latest-section"><ol>';
    $counter = 1;
    while($my_query->have_posts() && $counter <= $how_many_last_posts) {
      $my_query->the_post();
      ?>
      <li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
      <?php
      $counter++;
    }
    echo '</ol></div>';
    wp_reset_postdata();
  }
  ?>

  <h1 class="widget-title">Our Authors <i class="fa fa-user" style="vertical-align: baseline;"></i></h1>&nbsp;
  <div class="archives-authors-section">
    <ul>
      <?php wp_list_authors('exclude_admin=0&optioncount=1'); ?>
    </ul>
  </div>

  <h1 class="widget-title">By Month <i class="fa fa-calendar" style="vertical-align: baseline;"></i></h1>&nbsp;
  <div class="archives-by-month-section">
    <p><?php wp_get_archives('type=monthly&format=custom&after= |'); ?></p>
  </div>

</div><!-- .entry-content -->

</article><!-- #post-## -->

La hoja de estilo  #

Por último, veamos la hoja de estilo y, lo más importante, el efecto que nos da. Aquí está el  archivo archives-page-style.css:


.archives-widget-left {
  float: left;
  width: 50%;
}

.archives-widget-right {
  float: left;
  padding-left: 4%;
  width: 46%;
}

.archives-latest-section { }
.archives-latest-section ol {
  font-style: italic;
  font-size: 20px;
  padding: 10px 0;
}
.archives-latest-section ol li {
  padding-left: 8px;
}

.archives-authors-section { }
.archives-authors-section ul {
  list-style: none;
  text-align: center;
  border-top: 1px dotted #888;
  border-bottom: 1px dotted #888;
  padding: 10px 0;
  font-size: 20px;
  margin: 0 0 20px 0;
}
.archives-authors-section ul li {
  display: inline;
  padding: 0 10px;
}
.archives-authors-section ul li a {
  text-decoration:none;
}

.archives-by-month-section {
   ext-align: center;
  word-spacing: 5px;
}
.archives-by-month-section p {
  border-top: 1px dotted #888;
  border-bottom: 1px dotted #888;
  padding: 15px 0;
}
.archives-by-month-section p a {
  text-decoration:none;
}

@media only screen and (max-width: 600px) {
  .archives-widget-left {
    width: 100%;
  }

  .archives-widget-right {
    width: 100%;
  }
}

Esto es principalmente tipografía y no muchos elementos estructurales, excepto por un par de alineaciones float, más el bloque de diseño receptivo al final. OK, ¡veamos el resultado! Así es como se ve en un sitio web que ya tiene bastante contenido en el archivo:

Nuestra página de archivo personalizada en el tema Zerif Lite. (Ver versión grande)

Cómo integrar esta plantilla con cualquier tema  #

La página de archivo personalizada que estamos creando aquí es para el tema Zerif Lite, en el directorio oficial de WordPress. Sin embargo, como dije, se puede usar con cualquier tema. He aquí cómo hacerlo:

  1. Toma el archivo archives-page-style.css y el archivo archives-page-functions.php que construimos aquí y colócalos en el directorio principal de tu tema.
  2. Edita el archivo functions.php de tu tema y añadir esta línea al final:  require get_template_directory(). '/archives-page-functions.php';.
  3. Toma el archivo page.php de tu tema, haz una copia, cambia el nombre, cambia la llamada a la función get_template_part() por get_template_part('content', 'tmpl_archives');, y luego añade el comentario principal declaración en el mismo principio:  /* Template Name: Archive Page Custom */.
  4. Toma el archivo content-page.php de tu tema, haz una copia, cámbiale el nombre  content-tmpl_archives.php e incluye todos los bloques personalizados que hemos creado en esta guía justo debajo de la función the_content();.
  5. Prueba y disfruta.

Así es como se ve en el tema Twenty Fifteen predeterminado:

Nuestra página de archivo personalizada en el tema Twenty Fifteen. (Ver versión grande)

¿Que sigue? #

Hemos cubierto mucho terreno en esta guía, pero aún se puede hacer mucho con nuestra página de archivo. Podríamos widgetizar todo y borrar todos los elementos del código personalizado. Podríamos agregar más bloques visuales para cosas como el contenido más reciente, etc. Las posibilidades son realmente infinitas. Entonces, ¿qué te gustaría ver como una adición interesante a esta plantilla? Siéntete libre para compartir.

¿Qué opinas?

Escrito por Wombat

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

17 de las mejores fuentes de Google para 2022 (y cómo usarlas en WordPress)

Cómo traducir WordPress usando Weglot – Guía paso a paso