Sin usar plugins en este artículo aprenderás como añadir una imagen destacada en tu tema de
wordpress, solamente puro código (PHP, CSS)
¿Qué es una imagen destacada en wordpress?
Es una representación visual que se asigna a una entrada, página o tipo de contenido personalizado. Esta imagen sirve como representación visual principal del contenido y puede tener varios propósitos, según el diseño y la configuración de tu sitio web.
Imagen destacada como fondo en las publicaciones
Si deseas establecer una imagen destacada como fondo en WordPress, puedes lograrlo mediante código personalizado en el archivo de plantilla de tu tema. Aquí hay una guía general para hacer esto:
1.- Accede al Editor de Temas:
-
- Inicia sesión en tu panel de administración de WordPress.
- Ve a «Apariencia» -> «Editor de archivos».
2.- Encuentra el Archivo de Plantilla:
En el Editor de Temas, busca el archivo de plantilla donde deseas establecer la imagen como fondo. Esto podría ser
single.php,
header.php,
index.php, o algún otro archivo dependiendo de dónde quieras que aparezca el fondo.
3.- Añade el Código:
Dentro del archivo de plantilla, busca la etiqueta donde quieres añadir tu imagen destacada y añade el siguiente código dentro de ella:
<div class="header-image" style="background-image: url(<?php echo the_post_thumbnail_url(); ?>);">>
<div class="container">
<div class="row">
<div class="titu">
<?php the_title( '<h1 class="title-post entry-title">', '</h1>' ); ?>
</div>
</div>
</div>
</div>
Este código utiliza la imagen destacada de tu entrada o página actual como fondo del título principal. Ajusta el tamaño, posición y otras propiedades según tus preferencias usando
CSS.
4.- Guardar Cambios:
Guardar (Actualizar archivo) los cambios.
Es importante mencionarte que este método asume que la imagen destacada está configurada para cada entrada o página que quieras modificar. Además, ten en cuenta que modificar los archivos de plantilla directamente puede tener implicaciones si no se hace correctamente. Asegúrate de tener una copia de seguridad de tu sitio antes de realizar cambios y, si es posible, considera utilizar un tema hijo para personalizar tu sitio de manera más segura.
