Como intercalar imágenes en las listas de WordPress

En numerosas ocasiones me he encontrado con el problema de hacer listas en WordPress donde quería añadir imágenes entre los ítems. A la hora de hacer tutoriales siempre es enriquecedor para el contenido enumerar una serie de pasos en una lista ordenada y apoyar estos con una imagen descriptiva.

Pues bien, esto que parece algo tan básico, no hay forma de hacerlo de forma sencilla desde el editor de WordPress.

Después de encontrarme con esta tarea muchas veces explicare como lo realizo yo y que formas creo que son las mas sencillas.

Como intercalar las imágenes en los bloques lista de Gutenberg

En el editor de bloques tenemos las listas las cuales podemos usar como ordenadas o clásica.. Para poder añadirles imágenes yo primero añado dos bloque en el editor : las lista y una imagen. Esta segunda será la que use para todas las imágenes que incluya en mi lista , solo debo copiarla las veces que la necesite.

Vamos al lio !!!.

Paso 1: Añadimos los dos bloques y editamos la lista con el contenido que queramos , por ejemplo en esta ocasión pasos para realizar una tarta de chocolate.

Paso 2: Con nuestra lista editada usaremos el bloque de imagen, cada imagen que necesitemos la subiremos.

Paso 3: El siguiente paso necesitaremos intercalar la imagen en la lista. para eyo debemos pasar del editor visual al editor de código.

Paso 4: Una vez en el editor de código debemos buscar el Html de la imagen. Siendo este el que esta entre los tags wp:image, seria algo como esto;

<!-- wp:image {"id":718,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://localhost/lagramola/wp-content/uploads/2023/04/paso-1-1024x683.jpg" alt="" class="wp-image-718"/></figure>
<!-- /wp:image -->

Paso 5: Después debemos localizar en la lista el ítem que queremos que tenga la imagen a continuación, Las lista de Gutenberg su código es así:

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>Tamizar juntos la <strong>harina leudante</strong> y <strong>el cacao en polvo</strong> en un bol. Agregue el <strong>azúcar en polvo, la leche, los huevos, el extracto de vainilla</strong> y <strong>la mantequilla derretida. </strong>Batir con una batidora eléctrica durante 2-3 minutos hasta que quede esponjoso.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Extienda la mezcla en una bandeja para hornear preparada (molde para hornear cuadrado) y hornee a 170 grados centígrados durante 25-30 minutos. El bizcocho estará listo cuando al clavar un palillo en el centro del bizcocho salga limpio, con algunas migas.</li>
<!-- /wp:list-item -->

Paso 6: Como vemos las listas esta formadas entre los tags <!-- wp:list {"ordered":true} -->

y cada ítem de la lista entre los tags <!-- wp:list-item -->.

Paso 7: Pues bien en este caso queremos poner esta imagen después del segundo ítem de nuestra receta , copiamos el código de la imagen base y lo pegamos después del final del item <!-- /wp:list-item --> y quedaría algo así:

En el editor visual quedaría así y ya tendríamos nuestra imagen añadida a la lista:

Paso 8: Ahora cada imagen que queramos añadir a la lista ordenada ( o no ordenada) debemos repetir el proceso subiendo la imagen al bloque , copiando el código y añadiéndolo en la posición que queramos en la lista dentro del editor de código

Como añadir imágenes a las listas del editor clásico

Si usas el editor clásico , es que vives en otra época ;). pero bueno siempre hay alguien que se aferra al pasado.

Para hacerlo solo debes seguir los mismos pasos subiendo las imágenes desde el editor visual y moviéndolas desde el editor de código a la posición deseada.

Una lista con imágenes desde el editor de código seria así:

Conclusión

Te he explicado como hago yo esta tarea que me parece que es lago pendiente que tienen los bloques de lista de WordPress. Esperemos que en un futuro esto sea implementado de alguna manera.

¿Sabes alguna forma mas de como añadir imágenes en las listas de WP? dejalo en los comentarios

Si quieres conocer otros artículos parecidos a Como intercalar imágenes en las listas de WordPress puedes visitar la categoría Tecnología.