Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)



Por defecto, WordPress crea archivos que listan todas tus entradas en orden inverso. Si los usuarios están buscando entradas pertenecientes a una cierta categoría o con un término de taxonomía concreto, tendrán que visitar la página de archivo de dicha categoría o término.
Pero, ¿y si deseases hacer la página de archivo principal de un tipo de entrada personalizada más útil y fácil de usar para el usuario? En este tutorial te mostraré cómo crear una página de archivo para un tipo de entrada personalizada que muestre únicamente las entradas de ese tipo y categorizadas según una taxonomía, de manera que en lugar de listar un largo listado, los usuarios verán una lista para cada término de taxonomía.
Lo Que Necesitarás
Para seguir este tutorial necesitarás una instalación de WordPress para el desarrollo y un editor de código. Crearás un tema hijo para el tema twentyfourteen, así tendrás que tener instalado éste último (debería estarlo por defecto).
Te voy a enseñar como crear un tema hijo, pero si te bloqueas, echa un vistazo a la hoja de estilo que viene con el paquete de ejemplos de código para este tutorial.
1. Comienzo: Registrar el Tipo de Entrada y la Taxonomía
Según mi experiencia, esta técnica se necesita con mayor frecuencia para crear tipos de entradas personalizadas y taxonomías que para entradas, categorías o etiquetas estándar, así que empezaré registrando un tipo de entrada y una taxonomía.
Nota: Yo estoy usando el mismo tipo de entrada ‘animal’ que registré en un tutorial anterior sobre cómo crear un archivo basado en imágenes. Si quieres llevar las cosas un poco más allá, podrías combinar la técnica de ese tutorial con la que te estoy mostrando aquí y mostrar la lista de tu término de taxonomía acompañado de imágenes.
En el archivo functions.php de tu tema, añade el siguiente código para registrar el tipo de entrada:
1 |
// register a custom post type called 'animals'
|
2 |
function wptp_create_post_type() { |
3 |
$labels = array( |
4 |
'name' => __( 'Animals' ), |
5 |
'singular_name' => __( 'animal' ), |
6 |
'add_new' => __( 'New animal' ), |
7 |
'add_new_item' => __( 'Add New animal' ), |
8 |
'edit_item' => __( 'Edit animal' ), |
9 |
'new_item' => __( 'New animal' ), |
10 |
'view_item' => __( 'View animal' ), |
11 |
'search_items' => __( 'Search animals' ), |
12 |
'not_found' => __( 'No animals Found' ), |
13 |
'not_found_in_trash' => __( 'No animals found in Trash' ), |
14 |
);
|
15 |
$args = array( |
16 |
'labels' => $labels, |
17 |
'has_archive' => true, |
18 |
'public' => true, |
19 |
'hierarchical' => false, |
20 |
'supports' => array( |
21 |
'title', |
22 |
'editor', |
23 |
'excerpt', |
24 |
'custom-fields', |
25 |
'thumbnail', |
26 |
'page-attributes'
|
27 |
),
|
28 |
'taxonomies' => array( 'post_tag', 'category'), |
29 |
);
|
30 |
register_post_type( 'animal', $args ); |
31 |
}
|
32 |
add_action( 'init', 'wptp_create_post_type' ); |
Después, añade el código que registra la taxonomía:
1 |
// register a taxonomy called 'Animal Family'
|
2 |
function wptp_register_taxonomy() { |
3 |
register_taxonomy( 'animal_cat', 'animal', |
4 |
array( |
5 |
'labels' => array( |
6 |
'name' => 'Animal Families', |
7 |
'singular_name' => 'Animal Family', |
8 |
'search_items' => 'Search Animal Families', |
9 |
'all_items' => 'All Animal Families', |
10 |
'edit_item' => 'Edit Animal Families', |
11 |
'update_item' => 'Update Animal Family', |
12 |
'add_new_item' => 'Add New Animal Family', |
13 |
'new_item_name' => 'New Animal Family Name', |
14 |
'menu_name' => 'Animal Family', |
15 |
),
|
16 |
'hierarchical' => true, |
17 |
'sort' => true, |
18 |
'args' => array( 'orderby' => 'term_order' ), |
19 |
'rewrite' => array( 'slug' => 'animal-family' ), |
20 |
'show_admin_column' => true |
21 |
)
|
22 |
);
|
23 |
}
|
24 |
add_action( 'init', 'wptp_register_taxonomy' ); |
Una vez hayas hecho esto, añade algo de información. Aquí abajo puedes ver la información que yo he añadido junto con algunos términos de taxonomía aplicados. No pretendo ser muy exacto en mis terminología en lo que respecta a las familias de los animales de manera que, por favor, ¡no hagas ningún comentario si he cometido algún fallo!



2. Configurar la Plantilla para los Archivos
El siguiente paso consiste en crear una plantilla para el nuevo tipo de entrada. En tu tema, crea un nuevo archivo llamado archive-animal.php
.
Como este es un tema hijo de twentyfourteen, la plantilla del archivo necesitará el código copiado de dicho tema para contener el loop personalizado que vas a crear. Así que añade lo siguiente a la plantilla de tu archivo:
1 |
<?php
|
2 |
/*
|
3 |
WpTutsPlus tutorial for creating archive to display posts by taxonomy term
|
4 |
Archive template for animal custom post type
|
5 |
*/
|
6 |
?>
|
7 |
|
8 |
<?php get_header(); ?> |
9 |
|
10 |
<div id="main-content" class="main-content"> |
11 |
|
12 |
<div id="primary" class="content-area"> |
13 |
<div id="content" class="site-content" role="main"> |
14 |
|
15 |
<header class="archive-header"> |
16 |
<h1 class="archive-title"> |
17 |
<?php post_type_archive_title(); ?> |
18 |
</h1>
|
19 |
</header><!-- .archive-header --> |
20 |
|
21 |
|
22 |
</div><!-- #content --> |
23 |
</div><!-- #primary --> |
24 |
<?php get_sidebar( 'content' ); ?> |
25 |
</div><!-- #main-content --> |
26 |
|
27 |
<?php
|
28 |
get_sidebar(); |
29 |
get_footer(); |
Nota: Si estás trabajando con tu propio tema, copia el código que contendrá el loop del archivo o el index (archive.php o index.php) de tu propio tema.
3. Organizar la Plantilla de los Archivos: Extraer los Términos de Taxonomía
Para que tu archivo pueda mostrar los animales según términos de la taxonomía, el siguiente paso consiste en extraer esos términos.
En tu nuevo archivo de plantilla, debajo de la etiqueta de cierre </header>
(o bajo la parte que abre el código que envuelve el loop si estás usando tu propio tema), extrae los términos usando get_terms()
:
1 |
<?php //start by fetching the terms for the animal_cat taxonomy |
2 |
$terms = get_terms( 'animal_cat', array( |
3 |
'orderby' => 'count', |
4 |
'hide_empty' => 0 |
5 |
) ); |
6 |
?>
|
Observa que he usado aquí dos parámetros:
-
orderby
– esto te permite especificar el orden de los términos mostrados. Yo he usadocount
como valor de manera que el término con mayor cantidad de entradas se mostrará en primer lugar, pero podrías ordenarlos por nombre o por ID – si lo dejas vacío, WordPress los ordenará por nombre. Consulta la página del Codex enget_terms()
para conocer más detalles. -
hide_empty
- le indica a WordPress que no extraiga ningún término que no tenga ninguna entrada asignada. Te ahorra el tener que comprobar más adelante si tu consulta tiene entradas.
4. Rellenar la Plantilla de Archivo: Definir la Consulta
Una vez hecho esto, usas foreach()
para indicarle a WordPress que pase cada uno de estos términos y ejecute una consulta que debes definir. Bajo el código que acabas de añadir, inserta lo siguiente:
1 |
<?php
|
2 |
// now run a query for each animal family
|
3 |
foreach( $terms as $term ) { |
4 |
|
5 |
// Define the query
|
6 |
$args = array( |
7 |
'post_type' => 'animal', |
8 |
'animal_cat' => $term->slug |
9 |
);
|
10 |
$query = new WP_Query( $args ); |
11 |
|
12 |
}
|
Esto le indica a WordPress que aborde cada término, y después define la consulta que tiene que ejecutar cada vez. Los argumentos para la consulta incluyen el tipo de entrada y el término en la taxonomía ‘animal_cat’
, que es el valor de la variable $term
.
5. Rellenar la Plantilla de Archivo: Añadir el Loop
Habiendo definido tu consulta, tienes que añadir un loop. Primero, extrae el nombre del término de la consulta como titular. Debajo de la línea que empieza con $query
pero dentro de los corchetes de la declaración foreach
, añade esta línea:
1 |
echo'<h2>' . $term->name . '</h2>'; |
Después, añade el código que contendrá tu lista de entradas:
1 |
// output the post titles in a list
|
2 |
echo '<ul>'; |
3 |
|
4 |
echo '</ul>'; |
Ahora, dentro de la lista, añade tu loop:
1 |
// Start the Loop
|
2 |
while ( $query->have_posts() ) : $query->the_post(); ?> |
3 |
|
4 |
<li class="animal-listing" id="post-<?php the_ID(); ?>"> |
5 |
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> |
6 |
</li>
|
7 |
|
8 |
<?php endwhile; |
Como puedes ver, este es un loop bastante claro que mostrará el título de cada entrada dentro de un enlace que dirige a la entrada completa, y que además no muestra ningún contenido. Si quisieras podrías añadir un extracto o una imagen destacada.
Por último, resetea la consulta usando wp_reset_postdata()
bajo la línea que lee echo '</ul>'
;
El Loop Completo
Este es el aspecto que debería tener tu consulta y tu loop:
1 |
<?php
|
2 |
// now run a query for each animal family
|
3 |
foreach( $terms as $term ) { |
4 |
|
5 |
// Define the query
|
6 |
$args = array( |
7 |
'post_type' => 'animal', |
8 |
'animal_cat' => $term->slug |
9 |
);
|
10 |
$query = new WP_Query( $args ); |
11 |
|
12 |
// output the term name in a heading tag
|
13 |
echo'<h2>' . $term->name . '</h2>'; |
14 |
|
15 |
// output the post titles in a list
|
16 |
echo '<ul>'; |
17 |
|
18 |
// Start the Loop
|
19 |
while ( $query->have_posts() ) : $query->the_post(); ?> |
20 |
|
21 |
<li class="animal-listing" id="post-<?php the_ID(); ?>"> |
22 |
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> |
23 |
</li>
|
24 |
|
25 |
<?php endwhile; |
26 |
|
27 |
echo '</ul>'; |
28 |
|
29 |
// use reset postdata to restore orginal query
|
30 |
wp_reset_postdata(); |
31 |
|
32 |
} ?> |
Por último, guarda tu plantilla y visualiza la página de archivo de tu tipo de entrada. Verás que lista tus entradas por término de taxonomía en lugar de hacerlo mediante una única y larga lista.
Resumen
Esta técnica es útil cuando quieres que tus visitas sean capaces de ver rápidamente datos categorizados sin tener que buscar entre varias páginas de archivo – lo reúne todo en un mismo sitio pero mejor organizado para una mayor comodidad. Aquí tienes algunas ideas sobre cómo podrías adaptar este técnica y llevarla más allá:
- Invoca categorías o etiquetas en lugar de términos. Para hacer esto, podrías usar
get_categories()
oget_tags()
. - En lugar de crear un archivo personalizado para un tipo de entrada, usa esta técnica en tu archivo
index.php
para mostrar las entradas según categoría, etiqueta o término de taxonomía. - En lugar de ejecutar un loop para cada término, ejecuta dos: el primero podría mostrar las entradas más recientes pertenecientes a ese término al completo y el segundo podría mostrar una lista con todas las demás entradas. Usa
posts_per_page
yoffset
en los argumentos de tu consulta para conseguirlo – observa los detalles sobre cómo funciona esto en la página del Codex para WP_Query. - Usa
posts_per_page
para limitar el número de entradas mostradas de manera que cada lista tenga la misma longitud. Podrías combinar esto con la aplicación de estilos para mostrar las listas una junto a otra.
- Para cada término, añade un enlace hacia la página de archivo del término al final de la lista de entradas - esto es particularmente útil si no estás mostrando todas las entradas de tu lista. Usa
get_term_link()
para hacer esto.