WordPress : Activar el modulo de las imágenes destacadas

Fecha Publicación:       22 de Septiembre de 2022
Fecha Modificación:       30 de Mayo de 2024

Como activar el modulo de las imágenes destacadas 

Si tu tema no está preparado o estas desarrollando uno a medida, lo primero que tienes que hacer es activar el modulo de las imágenes destacadas. Para ello, bastará con usar la función add_theme_support() y pasarle el parámetro “post-thumbnails”. Añade en tu archivo functions.php estas líneas

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );


Explicación del codigo: 

  • add_theme_support  → Añadimos soporte a este tema
  • post-thumbnails  → A las imagenes destacadas

Una vez hecho esto, nos aparecerá en el lateral de edición de páginas y entradas un meta box para añadir la imagen destacada.

Referencia: Crear una plantilla en WordPress: menús #3 - Diseño y programación Web (Rafael Sanzo)

Si deseas que aparezca también en los custom post type, no olvides declararlo en el parámetro support que se pasa como argumento en el registro del custom post type.

<?php

function my_custom_post_type() {
  $args = array(
    …
    'supports' => array( 'title', 'editor', 'thumbnail' ),
    …
  );
  register_post_type( 'my_custom_post_type', $args );
}
add_action( 'init', ' my_custom_post_type ' );
?>

Referencia :

https://desarrollowp.com/blog/tutoriales/todo-lo-que-hay-que-saber-sobre-las-imagenes-destacadas-o-post-thumbnails-en-wordpress/

Definir tamaño de imagenes personalizados

Por defecto WordPress sube la imagen a tamaño original y genera además 3 miniaturas:

  • Thumbnail, de 150px x 150px (máximo)
  • Medium, de 300px x 300px (máximo)
  • Large, de 1024px x 1024px (máximo)
  • Full, imagen a tamaño original (tal y como se sube)

Puedes generar tu miniatura personalizada con la función add_image_size() , añadiendo el codigo en nuestro archivo functions.php

add_image_size( 'imagen-featured-image', 2000, 1200, true );

add_image_size( 'imagen-thumbnail-avatar', 100, 100, true );

 

https://www.youtube.com/watch?v=CnYJ7_WzDD0&list=PLaNBgK4b74m5rKUfdFNPLc43ZuxZeQlC5&index=7

en el minuto 3:40 se habla del tamaño personalizazdo de las imagenes

Cómo trabajar con las imágenes destacadas en nuestra web

has_post_thumbnail() y the_post_thumbnail()

Lo primero que debemos hacer es preguntar si nuestra entrada, página o custom post type dispone de una imagen destacada. Para ello usaremos la función has_post_thumbnail(). La podemos utilizar dentro de nuestro loop o pasarle como parámetro el  $post_id.  Devolverá true en caso de que nuestro post tenga asignada una imagen destacada.

Una vez que sabemos que disponemos de imagen destacada, la primera función de la que vamos a hablar es: the_post_thumbnail(). Ésta función debe ser usada dentro del loop, y pinta la etiqueta img completa 

<?php
  if ( has_post_thumbnail() ) {
    the_post_thumbnail( $size, $attr );
  }
?>

→ Mas información WordPress : Función the_post_thumbnail muestra imagen destacada    

get_the_post_thumbnail

He estado trabajando en el desarrollo de un tema de wordpress y noté que muchas de las funciones de Wordpress tienen dos versiones: la normal, como the_post_thumbnail y la misma con get_the_post_thumbnail.

<?php the_post_thumbnail(); ?>
<?php get_the_post_thumbnail(); ?>

Con la funcion get_the_post_thumbnail se recupera las imagenes destacadas en cualquier lugar que uno desee en la web. 

Uso básico: 

<?php echo get_the_post_thumbnail( $post_id, $tamaño, $atributo); ?>

Uso básico: 

<?php echo get_the_post_thumbnail( $loop->ID, 'imagen-featured-image' ); ?>

Mas Información WordPress : Función get_the_post_thumbnail 

Diferencia entre the_post_thumbnail y get_the_post_thumbnail en wordpress

the_post_thumbnail( $size, $attr )

  1. Se usa solo cuando estás en el post loop actual (ciclo de publicación actual).
  2. Imprime la salida directamente. No se puede asignar a una variable.
  3. Tiene 2 parámetros como se especifica arriba.

 

get_the_post_thumbnail( $post, $size, $attr )

  1. También se puede utilizar fuera del bucle. Puede pasar la identificación de publicación o el objeto de publicación en el primer parámetro.
  2. Devuelve los datos. La salida se puede asignar a una variable.
  3. Tiene 3 parámetros como se especifica arriba.
Articulo : 917 - Veces Leidas
Compartir Articulo:
×

¡Apóyame suscribiéndote a mi canal!

Tutoriales sobre Diseño Web