WordPress no hace mucho uso del HTML estático, que fue la forma más básica de código hecha famosa por los espantosos sitios web que teníamos a principios del año 2000. Aunque puedes convertir tu HTML estático en un tema totalmente funcional de WordPress.
Uno de los aspectos que tendrás que abordar son las imágenes destacadas. Se trata de algo que no sueles encontrar con el HTML estático, por lo que requiere trabajar con código.
Echemos un vistazo a cómo puedes empezar añadiendo imágenes destacadas a un tema de WordPress con HTML estático y a todas las entradas existentes de tu blog.
Paso 1 – Añadir soporte de imágenes destacadas
Necesitas soportar las imágenes antes de poder acceder al cuadro de imágenes destacadas en la pantalla de edición. Empieza abriendo el archivo functions.php. Asegúrate de que el siguiente código aparezca antes de la etiqueta de cierre:
function wptutsplus_theme_support() {
add_theme_support( ‘post-thumbnails’ );
}
add_action( ‘after_setup_theme’, ‘wptutsplus_theme_support’ );
Guarda el archivo e intenta abrir la pantalla de edición de una entrada. Deberías ver el cuadro de las imágenes destacadas. Si ya tienes un sitio web, es necesario que visites cada entrada de tu blog y que añadas una imagen destacada. No te preocupes por especificar el tamaño en este paso.
Paso 2 – Añadir imágenes destacadas a la plantilla de archivo
Es necesario que hagas esto dentro del bucle. Abre tu archivo archive.php y busca la siguiente línea:
<img class=”size-thumbnail” alt=”” src=”images/featured-image.jpg” />
Sustituye la línea con el siguiente fragmento de código:
<?php if ( has_post_thumbnail() ) { ?>
<a href=»<?php the_permalink(); ?>»>
<?php the_post_thumbnail( ‘medium’, array( ‘class’ => ‘left’,
‘alt’ => trim( strip_tags( $wp_postmeta->_wp_attachment_image_alt ) )
) ); ?>
</a>
<?php } ?>
Este código hace varias cosas, incluyendo:
- Comprobar la entrada de la imagen destacada. Si no puede hacerlo, la imagen no se mostrará.
- Incluir la imagen en un enlace permanente de la entrada para que la gente pueda hacerle clic.
- Mostrar la imagen destacada correctamente en el directorio del blog.
Paso 3 – Añadir estilo
Guarda el archivo archive.php y visita cualquier página de archivo en tu sitio web para verificar que todo esté correcto. Ve al archivo style.css e introduce lo siguiente:
.archive #content article,
.blog #content article {
margin-top: 10px;
overflow: auto;
}
Paso 4 – Añadir imágenes destacadas al archivo de índice
A estas alturas tienes una plantilla de archivo con soporte funcional para imágenes destacadas. Aunque éste no es el final del procedimiento. Ahora tienes que coger todo este código y añadirlo al archivo index.php.
Abre el archivo archive.php y encuentra el código que añadiste. Cógelo y sustituye el mismo código en el archivo del paso 3. Ve a la página principal del blog y verás que la imagen destacada se muestra en todas las entradas.
Conclusión
Las imágenes destacadas son una parte vital de tu blog, y no deberías evitarlas para no tener que pasar por la molestia de añadirlas. Son una gran ayuda visual que hará más atractivo a tu sitio web.
Como siempre, asegúrate de guardar una copia maestra de cada archivo antes de efectuar ningún ajuste. Sustituir el fragmento de código equivocado podría tener consecuencias lamentables.
