Hace ya bastante años escribí sobre cómo cambiar el título del meta box de la imagen destacada en WordPress. De hecho fue uno de mis primeros posts, ya que siempre he considerado a este tipo de «detalles» como muy importantes dentro de la experiencia de un usuario contribuidor.
En sitios donde escriben varias personas, nunca está de más ofrecer información adicional y precisa. Y más tratándose de imágenes, debido al impacto negativo que puede tener en el rendimiento de la web si un usuario añade una imagen mayor de lo necesario.
En el post que menciono, simplemente eliminábamos el metabox y lo volvíamos a añadir con un título nuevo donde especificábamos las dimensiones. Una ñapa sí, pero cumplía con el objetivo de informar al usuario de las dimensiones adecuadas de la imagen.
Ahora con el editor de bloques, aka Gutenberg, esa cajita ya no es un metabox. Para conseguir el mismo objetivo, tendremos que encolar un archivo javascript que contenga un filtro que modifique ese componente. La primera parte es sencilla, añadimos nuestro archivo javascript:
<?php
function modify_featured_image_metabox(): void
{
wp_enqueue_script(
'modify-featured-image-metabox-js',
get_template_directory_uri() . '/assets/js/script.js',
['wp-element', 'wp-i18n', 'wp-hooks'],
'',
true
);
}
add_action('admin_enqueue_scripts', 'modify_featured_image_metabox');El contenido de nuestro archivo script.js será el siguiente:
var el = wp.element.createElement;
function addHelpTextToFeaturedImage(OriginalComponent) {
return function (props) {
return (
el(
wp.element.Fragment,
{},
el(
'p',
{
className: 'components-form-token-field__help',
},
'El tamaño recomendado es de 1024px de ancho x 768 px de alto.',
),
el(
OriginalComponent,
props
)
)
);
}
}
wp.hooks.addFilter(
'editor.PostFeaturedImage',
'my-namespace/add-featured-image-help',
addHelpTextToFeaturedImage
);
Simplemente añadimos una etiqueta de párrafo («p») con el texto que deseemos, y el resultado quedaría así:
De este modo, la persona que contribuya la imagen sabrá exactamente el tamaño que se requiere. El texto lo puse al principio, pero podrías ponerlo después del botón de «Asignar imagen destacada». Lo dejo a tu elección, simplemente cambia el orden en el fichero javascript.
Incluso podríamos llegar más lejos, si tienes varios Custom Post Types, y cada uno tiene diferentes tamaños, podrías cargar un mensaje diferente para cada uno de ellos, o añadir algún enlace a guías de estilo propias (para el estilo de las imágenes, etc…). Cualquier información que puedas añadir aquí será bienvenida por las personas que trabajan con la herramienta.
Puede que también te interese
