Personalizar los embebidos de WordPress es una excelente manera de mantener la coherencia visual y funcional de tu sitio web. Aunque WordPress ofrece una apariencia predeterminada para los embebidos, existen diversas formas de adaptarlos a tus necesidades específicas. A continuación, se presentan cinco métodos efectivos para personalizar los embebidos en WordPress:
1. Personalización del Estilo Visual
Para que los embebidos se integren perfectamente con el diseño de tu sitio, puedes aplicar estilos personalizados mediante CSS. Utiliza el hook enqueue_embed_scripts en el archivo functions.php de tu tema para cargar una hoja de estilos específica para los embebidos:
add_action( 'enqueue_embed_scripts', function () {
wp_enqueue_style(
'mi-tema-embed',
get_theme_file_uri( 'embed.css' ),
['wp-embed-template']
);
} );
En el archivo embed.css, puedes definir estilos que modifiquen la apariencia de los embebidos, como ajustar colores, tipografías o márgenes. Por ejemplo, para añadir un borde y cambiar el fondo:
.wp-embed {
background-color: #f9f9f9;
border: 1px solid #eee;
border-radius: 8px;
}
Esta técnica te permite alinear visualmente los embebidos con el resto de tu sitio.
2. Ajuste del Tamaño de la Imagen Destacada
Los embebidos muestran una imagen destacada en un tamaño predeterminado, pero puedes definir un tamaño personalizado que se adapte mejor a tu diseño. Por ejemplo, para crear una imagen cuadrada de 300×300 píxeles:
add_action( 'after_setup_theme', function () {
add_image_size( 'embed-cuadrado', 300, 300, true );
} );
Luego, indica a WordPress que utilice este nuevo tamaño en los embebidos:
add_filter( 'embed_thumbnail_image_size', function () {
return 'embed-cuadrado';
} );
Si ya tienes imágenes subidas antes de definir este tamaño, puedes regenerar las miniaturas utilizando un plugin como «Regenerate Thumbnails».
3. Modificación de la Longitud del Extracto
El extracto que aparece en los embebidos puede ser demasiado largo o corto según tus preferencias. Puedes ajustar su longitud específicamente para los embebidos con el siguiente código:
add_filter( 'excerpt_length', function ($length) {
return is_embed() ? 18 : $length;
} );
Este código verifica si el contenido se está mostrando en un embebido y, de ser así, limita el extracto a 18 palabras. Puedes modificar este número según tus necesidades.
4. Inclusión de Contenido Personalizado
Además del título, extracto e imagen destacada, puedes añadir información adicional a los embebidos, como la fecha de actualización o categorías. Para ello, crea una copia del archivo embed-content.php en la carpeta de tu tema y edítalo para incluir los elementos deseados. Por ejemplo, para mostrar la fecha de actualización:(OSTraining)
<p>Actualizado el: <?php the_modified_date(); ?></p>
Esta personalización permite ofrecer más contexto a los usuarios que visualizan el embebido.
5. Sobrescritura de Plantillas de Embebido
WordPress utiliza una plantilla predeterminada llamada embed.php para mostrar los embebidos. Puedes sobrescribir esta plantilla creando un archivo con el mismo nombre en la carpeta de tu tema. Además, si deseas personalizar los embebidos para un tipo de contenido específico, como productos, puedes crear un archivo llamado embed-product.php. Esto te permite mostrar detalles adicionales, como el precio o la disponibilidad, sin afectar otros embebidos.(Hongkiat)
Implementando estas técnicas, puedes lograr que los embebidos de WordPress se integren perfectamente con el diseño y funcionalidad de tu sitio, ofreciendo una experiencia más coherente y personalizada a tus visitantes.
