Krypton Solid

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

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

Si le preguntara cuál es el tipo de página predeterminado menos utilizado en WordPress, lo más probable es que diga la plantilla de archivo. O, más probablemente, 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 tuviera que preguntarle cuál es el tipo de página predeterminado menos utilizado en WordPress, lo más probable es que diga la plantilla de archivo. O, más probablemente, 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á usarlo con cualquier tema moderno de WordPress instalado en su sitio web en este momento.

Otras lecturas en SmashingMag:

Pero primero, ¿qué queremos decir exactamente con «página de archivo»?

La historia de los archivos de WordPress

En WordPress, puede 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 desea permitir que los visitantes profundicen en el archivo de una manera clara, probablemente tenga 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 da la bienvenida al visitante, explica que está en el archivo y luego le indica el contenido exacto que le interesa o sugiere algún contenido popular.

Es por eso que 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 un 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;
  • agregue á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 empezar por usar algunos tema como base de nuestro trabajo aquí. Yo usaré Zerif Lite. Lo admito, puedo estar un poco sesgado aquí porque es uno de nuestros propios temas (en ThemeIsle). No obstante, 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 lo dejes pasar.

Y, oye, si no te gusta el tema, no hay resentimientos. Puede 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 page.php archivo de su 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 su tema.

Por lo tanto, comenzando con el page.php archivo del tema Zerif Lite, voy a hacer una copia y llamarlo tmpl_archives.php.

(Asegúrate de no llamar a tu página con algo como page-archives.php. Todos los nombres de archivo que comienzan con page- se tratarán como nuevas plantillas de página dentro del archivo principal jerarquía de 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' ); ?>

Cambiaremos eso 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 desea, puede eliminar otros elementos que parezcan no esenciales para su página de archivo (como comentarios), pero asegúrese 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, puede recuperar fácilmente el código anterior y depurar desde allí.

Además, no se olvide del comentario de declaración de plantilla personalizada estándar, que debe colocar al principio de su 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. Empezaremos con el content-page.php archivo haciendo una copia y renombrándolo a 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 este. 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 esta nueva archives-page-functions.php archivo agregando esta línea al final del tema actual functions.php expediente:


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

Finalmente, el nuevo bloque que usaremos en nuestro main content-tmpl_archives.php archivo 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 ocuparse del único archivo que falta, 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 se esté 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á de forma predeterminada las 15 últimas publicaciones.

A continuación se muestra el código que hace esto. Colóquelo justo debajo de la sección anterior en el content-tmpl_archives.php archivo, el 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="https://www.smashingmagazine.com/2015/04/building-custom-wordpress-archive-page/<?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 recuperar 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. Omita esta sección si es el único autor).

Esta funcionalidad se puede lograr con un bloque de código realmente simple ubicado justo en nuestra página principal. content-tmpl_archives.php archivo (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, tenga en cuenta que todo se hace a través de un wp_list_authors() Llamada de función.

Incluyo este elemento al final porque no es el más útil desde la perspectiva del lector. Aún así, tenerlo en su página de archivo es bueno solo para que no tenga que usar widgets para el archivo mensual en otro lugar.

Así es como se ve en el content-tmpl_archives.php expediente:


<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 (|).

(Smashing Magazine 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 content-tmpl_archives.php file, 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="https://www.smashingmagazine.com/2015/04/building-custom-wordpress-archive-page/<?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í esta la archives-page-style.css expediente:


.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 float alineaciones, 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:

Página de archivo en Zerif Lite
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 archives-page-style.css archivo y el archives-page-functions.php archivo que creamos aquí y los colocamos en el directorio principal de su tema.
  2. Edite el functions.php archivo de su tema y agregue esta línea al final: require get_template_directory() . '/archives-page-functions.php';.
  3. Toma el page.php archivo de su tema, haga una copia, cámbiele el nombre, cambie el get_template_part() llamada de función a get_template_part( 'content', 'tmpl_archives' );, y luego agregue el comentario de la declaración principal al principio: /* Template Name: Archive Page Custom */.
  4. Toma el content-page.php archivo de su tema, haga una copia, cámbiele el nombre a content-tmpl_archives.phpe incluir todos los bloques personalizados que creamos en esta guía justo debajo de la the_content(); Llamada de función.
  5. Prueba y disfruta.

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

Página de archivo en Twenty Fifteen
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é le gustaría ver como una adición interesante a esta plantilla? Sientete libre para compartir.

Deja un comentario