() translation by (you can also view the original English article)
El uso de imágenes destacadas en archivos de entrada es una característica habitual de los temas, pero a veces es posible que desees utilizar imágenes destacadas de forma un poco diferente. Ocasionalmente he trabajado en sitios donde las imágenes que se mostrarán están relacionadas con la categoría en la que se encuentra una entrada y no con la entrada en sí. En lugar de añadir la misma imagen destacada a cada entrada en cada categoría, sería mucho más sencillo si pudiera asignar la categoría a cada una de mis imágenes, y luego mostrar la imagen destacada de la categoría en la entrada.
Estos serían algunos ejemplos de situaciones en las que posiblemente desees hacer esto:
- cuando cada entrada está asociada a una marca y deseas mostrar el logotipo correspondiente
- cuando cada entrada está asociada a uno de un número de ubicaciones y deseas mostrar una imagen (o mapa) de ese lugar
- cuando cada entrada está relacionada con un tema determinado (por ejemplo, en un sitio de aprendizaje) y desea mostrar un icono que represente esa temática
- cuando las entradas forman parte de una serie (como sucede a veces en este sitio) y deseas utilizar una imagen que identifique cada serie
En este tutorial voy a utilizar algunas de las técnicas que ya he demostrado en dos tutoriales anteriores:
- Aplicar categorías a archivos adjuntos: tendremos que hacer esto para que cada categoría tenga sus propios archivos adjuntos.
- Crear una 'imagen destacada' para una categoría: en este tutorial mostré cómo crear 'imágenes destacadas' para categorías y cómo mostrarlas posteriormente en el archivo de categorías. Este tutorial es ligeramente diferente, ya que mostraré las imágenes de categoría en la página principal del blog.
Este tutorial trabajará a través de estos pasos:
- registrar la taxonomía de categoría para los adjuntos
- configurar categorías y añadirles imágenes
- en el bucle, identificar en qué categoría se encuentra una entrada y, a continuación, ejecutar una consulta para generar los datos adjuntos de esa categoría
Nota: Para cada entrada solo se identificará una categoría, y para cada categoría solo será mostrada una imagen (la más reciente).
También veré cómo puedes adaptar esta técnica a otras páginas de archivo, como a los archivos de tipo de entradas personalizadas.
Lo que necesitarás
Para seguir este tutorial necesitarás lo siguiente:
- una instalación de desarrollo de WordPress
- un tema que puedas editar (crearé un tema hijo para Twenty Fourteen)
- Acceso FTP (o MAMP o similar si está trabajando localmente)
- un editor de código
Configuración de los archivos de tu tema
Para seguir este tutorial, deberás crear o editar un tema. Voy a crear un tema hijo del tema Twenty Fourteen.
Aquí está mi hoja de estilo:
1 |
/*
|
2 |
Theme Name: Automatic Featured Image Based On Category
|
3 |
Theme URI: https://code.tutsplus.com/tutorials/add-an-automatic-featured-image-to-blog-posts-based-on-category--cms-22664
|
4 |
Version: 1.0.0
|
5 |
Description: heme to accompany tutorial on adding category featured images to an archive page for tutsplus, at http://bit.ly/14cm0ya
|
6 |
Author: Rachel McCollin
|
7 |
Author URI: http://rachelmccollin.co.uk
|
8 |
License: GPL-3.0+
|
9 |
License URI: http://www.gnu.org/licenses/gpl-3.0.html
|
10 |
Domain Path: /lang
|
11 |
Text Domain: tutsplus
|
12 |
Template: twentyfourteen
|
13 |
*/
|
14 |
|
15 |
@import url('../twentyfourteen/style.css'); |
Esto configura el tema como un tema hijo de Twenty Fourteen. Si necesitas saber más acerca de la creación de temas hijos, echa un vistazo a la correspondiente página del Codex.
A medida que trabajes a través de este tutorial también crearás un archivo functions.php para tu tema (o editarás el existente si ya tienes uno en él), y también crearás un archivo index.php.
Registro de categorías para archivos adjuntos
Por defecto WordPress no te permite asignar categorías a archivos adjuntos, pero esto puede cambiarse fácilmente.
Si tu tema aún no tiene un archivo de funciones, crea un archivo llamado functions.php y añade lo siguiente en él:
1 |
<?php
|
2 |
|
3 |
/**
|
4 |
* Add featured image to category.
|
5 |
*/
|
6 |
function tutsplus_add_attachments_to_categories() { |
7 |
|
8 |
register_taxonomy_for_object_type( 'category', 'attachment' ); |
9 |
|
10 |
}
|
11 |
|
12 |
add_action( 'init' , 'tutsplus_add_attachments_to_categories' ); |
Guarda tu archivo y dirígete a la pantalla Medios de tu sitio. Verás se ha añadido un nuevo elemento categorías al submenú de medios:
Nota: Para obtener más información sobre esto, consulta este tutorial.
Añadir imágenes de categoría
Ahora necesito subir una serie de imágenes y asignar a cada una de ellas una categoría. Las imágenes que subas dependerán de las necesidades de tu sitio: para mis categorías yo he usado distintos colores, así que he encontrado algunas imágenes con cada uno de estos. He asignado las categorías relevantes, así que así es como se ve mi Biblioteca de medios:
Ahora añadiré algunas entradas y les asignaré categorías:
Crear el archivo index.php
Ahora que tenemos las entradas configuradas y las imágenes de categoría en su sitio, necesitamos editar el archivo index.php para mostrar las imágenes destacadas de la categoría.
Configurar el archivo
Tendrás que editar tu actual archivo index.php o añadir uno nuevo. Yo he creado uno basado en el archivo de plantilla index.php y el archivo content.php incluído en el tema Twenty Fourteen. Ahora mismo se tiene este aspecto:
1 |
<?php
|
2 |
/**
|
3 |
* The primary template file.
|
4 |
*
|
5 |
* Based on the `index.php` file from TwentyFourteen, with an edited version of the `content.php` include file from that theme also included here.
|
6 |
*/
|
7 |
?>
|
8 |
|
9 |
<?php get_header(); ?> |
10 |
|
11 |
<div id="main-content" class="main-content"> |
12 |
|
13 |
<?php
|
14 |
|
15 |
if ( is_front_page() && twentyfourteen_has_featured_posts() ) { |
16 |
|
17 |
// Include the featured content template.
|
18 |
get_template_part( 'featured-content' ); |
19 |
|
20 |
}
|
21 |
|
22 |
?>
|
23 |
|
24 |
<div id="primary" class="content-area"> |
25 |
<div id="content" class="site-content" role="main"> |
26 |
|
27 |
<?php
|
28 |
|
29 |
if ( have_posts() ) { |
30 |
|
31 |
while ( have_posts() ) { |
32 |
|
33 |
the_post(); |
34 |
|
35 |
?>
|
36 |
|
37 |
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> |
38 |
|
39 |
<?php twentyfourteen_post_thumbnail(); ?> |
40 |
|
41 |
<header class="entry-header"> |
42 |
<?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) { ?> |
43 |
<div class="entry-meta"> |
44 |
<span class="cat-links"><?php echo get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'twentyfourteen' ) ); ?></span> |
45 |
</div>
|
46 |
<?php } ?> |
47 |
<?php the_title( '<h1 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h1>' ); ?> |
48 |
</header>
|
49 |
|
50 |
<div class="entry-content"> |
51 |
<?php
|
52 |
|
53 |
the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentyfourteen' ) ); |
54 |
wp_link_pages( |
55 |
array( |
56 |
'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfourteen' ) . '</span>', |
57 |
'after' => '</div>', |
58 |
'link_before' => '<span>', |
59 |
'link_after' => '</span>', |
60 |
)
|
61 |
);
|
62 |
|
63 |
?>
|
64 |
</div>
|
65 |
|
66 |
<?php the_tags( '<footer class="entry-meta"><span class="tag-links">', '', '</span></footer>' ); ?> |
67 |
</article>
|
68 |
|
69 |
<?php
|
70 |
|
71 |
}
|
72 |
|
73 |
// Display previous / next post navigation.
|
74 |
twentyfourteen_paging_nav(); |
75 |
|
76 |
} else { |
77 |
|
78 |
// If there is no content, include the "No posts found" template.
|
79 |
get_template_part( 'content', 'none' ); |
80 |
|
81 |
}
|
82 |
|
83 |
?>
|
84 |
|
85 |
</div>
|
86 |
</div>
|
87 |
<?php get_sidebar( 'content' ); ?> |
88 |
</div>
|
89 |
|
90 |
<?php get_sidebar(); ?> |
91 |
<?php get_footer(); ?> |
Identificar la categoría de la entrada actual
Para mostrar la imagen de la categoría relevante, tendrás que identificar a qué categoría pertenece la entrada actual. Tendrás que hacer esto dentro del bucle.
En primer lugar, si estás trabajando con Twenty Fourteen, elimina la función que genera la imagen destacada de las entradas. Quita esta línea:
1 |
<?php twentyfourteen_post_thumbnail(); ?> |
Inmediatamente dentro de la etiqueta de apertura <article>, añade lo siguiente:
1 |
<?php
|
2 |
|
3 |
// Find the first category the post is in.
|
4 |
$categories = get_the_category(); |
5 |
$category = $categories[ 0 ]->term_id; |
Esto crea una variable llamada $category, cuyo valor es el ID de la primera categoría a la que pertenece la entrada, utilizando la función get_the_category().
Crear argumentos para la consulta
Ahora puedes usar esta variable en los argumentos de la consulta. Debajo de lo que acabas de añadir, agrega esto:
1 |
$args = array( |
2 |
'cat' => $category, |
3 |
'post_status' => 'inherit', |
4 |
'post_type' => 'attachment', |
5 |
'posts_per_page' => '1' |
6 |
);
|
Estos argumentos significan que la consulta generará solo un archivo adjunto para la categoría que ya ha identificado. Ten en cuenta que debes utilizar el argumento 'post_status' porque los datos adjuntos tienen el valor predeterminado 'post_status' => 'inherit', no 'public' como otros tipos de posts.
Ahora añade la consulta en sí:
1 |
$query = new WP_Query( $args ); |
2 |
|
3 |
if ( $query->have_posts() ) { |
4 |
|
5 |
while ( $query->have_posts() ) { |
6 |
|
7 |
$query->the_post(); |
8 |
|
9 |
?>
|
10 |
|
11 |
<div class="category-featured-image"> |
12 |
<?php echo wp_get_attachment_image( $post->ID, 'thumbnail' ); ?> |
13 |
</div>
|
14 |
|
15 |
<?php
|
16 |
|
17 |
}
|
18 |
}
|
19 |
|
20 |
// Reset postdata to restore ordinal query.
|
21 |
wp_reset_postdata(); |
22 |
|
23 |
?>
|
Esto coloca la imagen dentro de un div con la clase category-featured-image, que puedes utilizar para la aplicación de estilos. A continuación, utiliza la función wp_get_attachment_image() para mostrar la imagen.
Ahora, si actualizas la página de inicio de tu blog, verás las imágenes que se están mostrando:
En este momento existe demasiado espacio vacío, así que vamos a añadir un poco de estilo.
Aplicar estilo a las imágenes
Abre la hoja de estilo de tu tema y añade cualquier estilo que quieras aplicar a tus imágenes. He añadido lo siguiente:
1 |
.category-featured-image { |
2 |
float: left; |
3 |
margin: 10px 2%; |
4 |
}
|
5 |
|
6 |
.blog .entry-header .entry-title, |
7 |
.blog .entry-header .entry-meta { |
8 |
clear: none; |
9 |
}
|
Esto desplaza las imágenes a la izquierda de la entrada:
Adaptar esta técnica para otros tipos de contenido
Puedes usar esta técnica con otros tipos de contenido. Por ejemplo:
- Con un tipo de entrada personalizada, crearías un archivo de plantilla
archive-$posttype.phppara ese tipo de entrada con un bucle similar al anterior. - Si usas una taxonomía personalizada en lugar de categorías, añadirías el tipo de entrada
'attachment'a los tipos de entradas en los que está registrada la taxonomía cuando la registraste por primera vez. A continuación, reemplazarías la funciónget_the_category()porget_the_terms()y los argumentos de categoría de la consulta por argumentos de taxonomía. - Podrías combinar dos taxonomías mostrando las imágenes de una taxonomía con sus correspondientes entradas en la plantilla de archivo de otra taxonomía, tal vez con las imágenes enlazando a la página de archivo de su propio término de taxonomía.
- Podrías usar una técnica similar a la anterior en tu archivo
archive.php, si tu tema lo tiene, para que las entradas en las páginas de archivo muestren también una imagen destacada de categoría. - Si deseas combinar uno o más de los anteriores métodos, puedes crear un archivo de inclusión en el bucle (incluida la imagen destacada de la categoría) e invocarlo en los archivos de plantilla relevantes.
Resumen
Como he descrito al principio de este tutorial, puede haber escenarios en los que en lugar de mostrar una imagen destacada para cada entrada, desees mostrar una imagen relacionada con la categoría a la que pertenezca la entrada.
En este tutorial has aprendido a hacerlo, añadiendo categorías a los datos adjuntos, identificando la primera categoría para cada entrada del bucle y, a continuación, creando una consulta para generar la imagen para esa categoría.
