Agregue soporte de imagen destacada a su tema de WordPress

Este tutorial cubrirá todas las cosas que debemos hacer para agregar soporte de imágenes destacadas a nuestro tema de WordPress. Hablaremos un poco sobre qué es una imagen destacada en WordPress, cómo asigna una imagen destacada a una publicación de blog en WordPress y cómo podemos tener un control detallado sobre la salida de la imagen destacada junto con el control de la relación de aspecto. . Lo más importante es que veremos cómo agregar soporte de imágenes destacadas a su tema; de lo contrario, no podemos hacer uso de ellos. Así que comencemos y aprendamos cómo configurar el soporte de imágenes destacadas en un tema de WordPress.

¿Qué es una imagen destacada de WordPress?

Una imagen destacada es una imagen única que el autor elige para representar una sola publicación de blog en WordPress. Las imágenes destacadas son diferentes de una imagen normal que puede agregar a su publicación en el área de texto de una publicación. Como quizás ya esté familiarizado, puede insertar una imagen en cualquier lugar de la publicación que considere apropiada. Una imagen destacada se diferencia de esto en que WordPress establecerá la imagen destacada de forma programática en su publicación. No elige manualmente su ubicación. La imagen destacada puede ser dinámica porque en la página principal de la lista del blog principal, es posible que vea la imagen destacada con un tamaño de miniatura, mientras que en la vista de publicación única puede aparecer más como un banner. La conclusión es que una imagen destacada es un campo separado en su publicación de WordPress que permite que un tema tenga algunas opciones de visualización muy interesantes y dinámicas con esa imagen.

Adición de compatibilidad con imágenes destacadas a nuestro tema

Podemos comenzar a agregar soporte de imágenes destacadas a nuestro tema navegando a nuestro functions.php y agregando algo de código al final del archivo. Aquí está el fragmento para agregar al archivo:

1
2
3
4
5
6
/* Add Featured Image Support To Your WordPress Theme */
function add_featured_image_support_to_your_wordpress_theme() {
	add_theme_support( 'post-thumbnails' );
}
 
add_action( 'after_setup_theme', 'add_featured_image_support_to_your_wordpress_theme' );

Con este código en su lugar, ahora deberíamos ver una opción de pantalla en el editor de WordPress para configurar una imagen destacada. Navegar allí ahora nos muestra que sí, las imágenes destacadas ahora están habilitadas en nuestro tema.
opción de pantalla de imagen destacada

Asignar la imagen destacada

Con nuestro soporte de imágenes destacadas ahora en su lugar, sigamos adelante e intentemos agregar una imagen destacada a una publicación en nuestro sitio. Para configurar la imagen destacada, sigamos adelante y haga clic en 'Establecer imagen destacada', luego 'Seleccionar archivos' en la ventana emergente Cargar archivos, haga clic en el archivo que está eligiendo para la imagen destacada y una vez que termine de cargarse puede hacer clic en el Establecer botón de imagen destacada.

¡Oye, espera un minuto!

Si visita su sitio, parece que la imagen destacada de wordpress no se muestra en la página. ¡¿Que pasa con eso?! Bueno, eso se debe a que, de hecho, hemos activado el soporte para imágenes destacadas en nuestro tema, pero aún no hemos proporcionado el código en nuestros archivos de tema para manejar la salida y visualización de una imagen destacada. ¡Podemos hacerlo ahora!

Agregar código para generar una imagen destacada

Podemos empezar con lo básico. Todo lo que queremos hacer es mostrar la imagen destacada sobre el texto de la publicación del blog. ¿Cómo podríamos hacer eso? Podemos comenzar navegando a nuestro archivo index.php y haciendo uso de la función the_post_thumbnail () . Aquí está ese código actualizado con las partes relevantes resaltadas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?php
 
get_header();
 
if ( have_posts() ) :
	while ( have_posts() ) : the_post(); ?>
 
        <article class="post">
            <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
            <p class="post-meta"><?php the_time( 'F jS, Y' ); ?> | <a
                        href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a>
                | <?php
				$categories = get_the_category();
				$comma      = ', ';
				$output     = '';
				
				if ( $categories ) {
					foreach ( $categories as $category ) {
						$output .= '<a href="' . get_category_link( $category->term_id ) . '">' . $category->cat_name . '</a>' . $comma;
					}
					echo trim( $output, $comma );
				} ?>
            </p>
			<?php the_post_thumbnail(); ?>
            <p>
				<?php echo get_the_excerpt() ?>
                <a href="<?php the_permalink() ?>">Read more &raquo</a>
            </p>
        </article>
	
	<?php endwhile;
 
else :
	echo '<p>There are no posts!</p>';
 
endif;
 
get_footer();
 
?>

¿Funciona la imagen destacada? Bueno, ¡echemos un vistazo a nuestro sitio!
la imagen destacada está funcionando
Bueno, no es la cosa más atractiva del mundo, pero sí, ¡nuestra imagen destacada ahora está funcionando!

Cómo personalizar los tamaños de las imágenes destacadas con add_image_size ()

Vayamos un poco más allá y ahora agreguemos soporte para múltiples tamaños de la imagen destacada usando la función add_image_size () . Agregaremos esta función a nuestro archivo functions.php. De hecho lo agregaremos dos veces, porque queremos agregar un tamaño pequeño y un tamaño mayor de la imagen.

1
2
3
4
5
6
7
8
/* Add Featured Image Support To Your WordPress Theme */
function add_featured_image_support_to_your_wordpress_theme() {
	add_theme_support( 'post-thumbnails' );
	add_image_size( 'small-thumbnail', 100, 100, true );
	add_image_size( 'single-post-image', 250, 250, true );
}
 
add_action( 'after_setup_theme', 'add_featured_image_support_to_your_wordpress_theme' );

Notarás que en realidad pasamos cuatro argumentos a la función. Repasemos lo que hace cada uno. El primer argumento es el identificador de tamaño de la imagen. En otras palabras, dado que nombramos a la primera "miniatura pequeña", ahora podemos usar ese identificador en nuestro tema cuando queremos generar una imagen de este tamaño en la página. Los siguientes dos argumentos son, por supuesto, valores enteros y representan la anchura y la altura con las que desea que se muestre la imagen. El cuarto argumento es una opción booleana donde verdadero significa recortar imágenes al ancho y alto especificado y falso significa simplemente cambiar el tamaño de la imagen.

Configuración de la 'miniatura pequeña' para las páginas de publicaciones de blog

En nuestro archivo index.php , ahora podemos usar este fragmento para generar la imagen de menor tamaño:

1
<?php the_post_thumbnail('small-thumbnail'); ?>

Establecer el tamaño de 'imagen de una sola publicación' para publicaciones individuales

En nuestras publicaciones individuales, nos gustaría mostrar la imagen de mayor tamaño, por lo que podemos usar este fragmento en single.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?php
 
get_header();
 
if ( have_posts() ) :
	while ( have_posts() ) : the_post(); ?>
		
		<article class="post">
			<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
			<p class="post-meta"><?php the_time( 'F jS, Y' ); ?> | <a
					href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a>
				| <?php
				$categories = get_the_category();
				$comma      = ', ';
				$output     = '';
				
				if ( $categories ) {
					foreach ( $categories as $category ) {
						$output .= '<a href="' . get_category_link( $category->term_id ) . '">' . $category->cat_name . '</a>' . $comma;
					}
					echo trim( $output, $comma );
				} ?>
			</p>
			<?php the_post_thumbnail('single-post-image'); ?>
			<?php the_content() ?>
		</article>
	
	<?php endwhile;
 
else :
	echo '<p>There are no posts!</p>';
 
endif;
 
get_footer();
 
?>

Con este código en su lugar, podemos ver que ahora obtenemos un tamaño de imagen destacada diferente, ya sea que estemos en la página de inicio o en una sola página de publicación.
diferentes tamaños de imágenes destacadas

Usando CSS y HTML para posicionar imágenes destacadas

En este momento, la miniatura pequeña y la imagen de una sola publicación no encajan muy bien con nuestro contenido. Podemos actualizar los archivos index.php y single.php para admitir nuestra imagen destacada. Necesitaremos hacer uso de un elemento div envolvente con una clase a la que podamos apuntar en el archivo css. También tiene sentido generar solo la clase de envoltura si hay una miniatura asociada con la publicación. Haremos uso de la función has_post_thumbnail () para ayudarnos en este sentido. Mientras tanto, hemos agregado imágenes destacadas a nuestras otras dos publicaciones para que podamos probarlas una vez que estén completas. Aquí está el archivo index.php actualizado y el archivo single.php con el marcado relevante resaltado.

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<?php
 
get_header();
 
if ( have_posts() ) :
	while ( have_posts() ) : the_post(); ?>
 
        <article class="post">
			<?php if ( has_post_thumbnail() ) { ?>
                <div class="small-thumbnail">
					<?php the_post_thumbnail( 'small-thumbnail' ); ?>
                </div>
			<?php } ?>
            <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
            <p class="post-meta"><?php the_time( 'F jS, Y' ); ?> | <a
                        href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a>
                | <?php
				$categories = get_the_category();
				$comma      = ', ';
				$output     = '';
				
				if ( $categories ) {
					foreach ( $categories as $category ) {
						$output .= '<a href="' . get_category_link( $category->term_id ) . '">' . $category->cat_name . '</a>' . $comma;
					}
					echo trim( $output, $comma );
				} ?>
            </p>
            <p>
				<?php echo get_the_excerpt() ?>
                <a href="<?php the_permalink() ?>">Read more &raquo</a>
            </p>
        </article>
	
	<?php endwhile;
 
else :
	echo '<p>There are no posts!</p>';
 
endif;
 
get_footer();
 
?>

single.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?php
 
get_header();
 
if ( have_posts() ) :
	while ( have_posts() ) : the_post(); ?>
 
        <article class="post">
			<?php if ( has_post_thumbnail() ) { ?>
                <div class="single-post-image">
					<?php the_post_thumbnail( 'single-post-image' ); ?>
                </div>
			<?php } ?>
            <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
            <p class="post-meta"><?php the_time( 'F jS, Y' ); ?> | <a
                        href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a>
                | <?php
				$categories = get_the_category();
				$comma      = ', ';
				$output     = '';
				
				if ( $categories ) {
					foreach ( $categories as $category ) {
						$output .= '<a href="' . get_category_link( $category->term_id ) . '">' . $category->cat_name . '</a>' . $comma;
					}
					echo trim( $output, $comma );
				} ?>
            </p>
			<?php the_content() ?>
        </article>
	
	<?php endwhile;
 
else :
	echo '<p>There are no posts!</p>';
 
endif;
 
get_footer();
 
?>

Con este marcado en su lugar, también necesitamos actualizar nuestro archivo style.css así:

1
2
3
4
5
6
7
8
9
.small-thumbnail {
    float: left;
    margin: 0px 10px 10px 0px;
}
 
.single-post-image {
    float: left;
    margin: 0px 12px 12px 0px;
}

En los fragmentos de arriba, primero verificamos si la publicación que se muestra actualmente en el bucle tiene una miniatura. Si es así, generamos el marcado y si no es así, no lo hacemos. Esta es una buena práctica para acostumbrarse. Realmente no tiene sentido enviar etiquetas html vacías a la página cuando no hay contenido dentro de ella. Entonces, al usar la función has_post_thumbnail (), podemos lograr ese objetivo. Además, observe que usamos dos clases diferentes. Asignamos una clase de 'miniatura pequeña' a nuestra página index.php y una clase de 'imagen de publicación única' a nuestra página single.php. De esta forma, podemos asignar reglas CSS específicas a la imagen, dependiendo de la página que se esté viendo. Con respecto al CSS que hemos aplicado, primero simplemente aplicamos un flotador de left y un margin que especifica los valores superior, derecho, inferior e izquierdo.

Echemos ahora un vistazo a cómo van las cosas.

¡Muy genial! Lo bueno de las imágenes destacadas es que una vez que el trabajo preliminar está fuera del camino con respecto al registro de la imagen destacada y varios tamaños de imagen en functions.php, puede hacer que su tema muestre dinámicamente la imagen destacada en varios formatos automáticamente. Todo lo que tienes que hacer es configurar la imagen destacada y listo. En otras palabras, configúrelo y olvídelo.

Hacer clic en las imágenes destacadas

Tomemos un momento para habilitar la capacidad de hacer clic en nuestras imágenes destacadas para cargar la publicación de blog asociada. Es muy fácil de hacer. Todo lo que tenemos que hacer es envolver la función the_post_thumbnail () con una etiqueta ancla y especificar el valor href de esa etiqueta ancla usando la función the_permalink (). Aquí están los fragmentos de index.php y single.php con las líneas resaltadas.

index.php

1
2
3
4
5
<?php if ( has_post_thumbnail() ) { ?>
    <div class="small-thumbnail">
        <a href="<?php the_permalink() ?>"><?php the_post_thumbnail( 'small-thumbnail' ); ?></a>
    </div>
<?php } ?>

single.php

1
2
3
4
5
<?php if ( has_post_thumbnail() ) { ?>
    <div class="single-post-image">
        <a href="<?php the_permalink() ?>"><?php the_post_thumbnail( 'single-post-image' ); ?></a>
    </div>
<?php } ?>

Al visitar la página de inicio o las vistas de una sola página de una publicación en nuestro sitio, podemos ver que no se puede hacer clic en la imagen destacada. Tenga en cuenta que el cursor es el de una mano para indicar un enlace en el que se puede hacer clic en las capturas de pantalla aquí.

Los usuarios pueden hacer clic en la imagen destacada en la página de inicio

imagen destacada en la que se puede hacer clic

Los usuarios pueden hacer clic en la imagen destacada en una sola página

imagen destacada en la que se puede hacer clic en una sola página

Agregue soporte de imagen destacada a su resumen de tema de WordPress

En este tutorial, aprendimos todo sobre las imágenes destacadas en WordPress. Aprendimos que primero debe agregar soporte para una imagen destacada en su tema agregando código a su archivo functions.php. Específicamente, add_theme_support ('post-thumbnails'); la función debe llamarse en functions.php. Una vez que habilitamos las imágenes destacadas, vimos cómo mostrar una imagen destacada en nuestras publicaciones de WordPress. Una vez que tuvimos los conceptos básicos, tenía sentido establecer el tamaño de la imagen destacada para varios formatos. Elegimos un tamaño para la página de inicio y otro para las páginas de una sola publicación. Hacia el final del tutorial, usamos algo de CSS para posicionar nuestras imágenes destacadas de una manera agradable, además de hacer que se pueda hacer clic en nuestras imágenes destacadas.

Header Ads Widget