Cómo agregar imágenes a su lista de WordPress: tres formas

El editor de bloques Gutenberg de WordPress ofrece varias opciones para crear contenido visualmente utilizando diferentes tipos de bloques. Es un sistema de arrastrar y soltar muy fácil de usar que permite a los usuarios crear contenido enriquecido sin contaminar el código con su escritura a mano. Sin embargo, también puede ocurrir un problema con el bloque de lista de Gutenberg. Esto implica agregar una imagen a la lista.

Agregar imágenes a la lista de bloques en WordPress

Suponga que crea varios pasos usando una lista e inserta una imagen en cada paso. Agregar bloques de imágenes rompe directamente la numeración de la lista. La siguiente lista se resume secuencialmente. Este tipo de formato definitivamente no es bueno para el lector tampoco desde el punto de vista de SEO.

Básicamente, el problema es que no se permite insertar bloques de imagen en bloques de lista debido a algunos problemas de formato. Además, editar y ejecutar el HTML romperá el bloque. En este tutorial, proporcionamos tres métodos diferentes para ayudarlo a resolver este problema en el editor de bloques Gutenberg de WordPress. A continuación, veamos cómo funcionan estos métodos uno por uno.

1. Agregue una imagen en línea a su bloque de lista en WordPress

Este método utiliza la opción de imagen en línea disponible en los bloques de lista en WordPress. Esta es una de las formas más fáciles porque no tiene que copiar y pegar manualmente el código. La imagen en sí se adjunta dentro de la etiqueta list li. Pero la desventaja aquí es que debe agregar texto alternativo y cambiar el tamaño de la imagen manualmente. Este tutorial le muestra cómo usar este método.

  1. Inicie sesión en el panel de control de WordPress de su sitio y abra su publicación.
  2. para crear una lista. Lista bloquear y empujar MAYÚS+ENTRAR Atajo de teclado para crear una nueva fila para agregar una imagen. Esto agrega la etiqueta br a la lista y crea una nueva fila sin romper la numeración.
  3. haz clic ahora icono desplegable En las opciones en la parte superior del bloque Lista.
  4. Elegir imagen incrustada opción.
    Agregar bloque de lista de imágenes en línea a WordPress
  5. ahora usted puede Subir nueva imagen Alternativamente, seleccione los medios existentes de su biblioteca de medios de WordPress.
  6. Cuando la imagen se agregue a la lista, se verá así: ancho predeterminado Establecido en 150. Puede cambiar esto a cualquier tamaño o eliminar 150 para hacer que la imagen sea de tamaño completo.

No puede agregar texto alternativo directamente a una imagen usando este método. Porque esto solo es posible si la imagen se agrega como otro bloque. Es posible que ya sepa que agregar texto alternativo es muy importante desde el punto de vista de SEO. Entonces, nunca te pierdas una imagen sin texto alternativo. Hay una solución simple que puede usar, y son:

Puede cambiar la lista a la vista HTML y luego agregar manualmente el atributo alt a la etiqueta img. Para hacer esto, haga clic en el icono con tres puntos en la parte superior del bloque de lista, Editar en HTML Opciones del menú desplegable. Esto mostrará el código HTML para el bloque de lista. Luego busque dónde agregó la imagen y escriba alt = «explicar imagen aquí» en la etiqueta img. Cuando haya terminado, puede volver a la edición visual del bloque de lista.

2. Copie manualmente el código de imagen del bloque de lista

La segunda forma es cargar primero la imagen en un bloque nuevo, luego cambiar al editor de código y luego copiar manualmente la etiqueta img del bloque de lista. Aquí estamos agregando la imagen como un bloque, por lo que podemos agregar texto alternativo directamente usando el panel Configuración de bloque. Aquí hay algunos pasos simples para mostrarle cómo ejecutar correctamente estos métodos.

  1. Abra el editor de publicación en su sitio web de WordPress, Crear una nueva lista Utilice bloques de lista.
  2. Luego agregue uno nuevo. bloque de imagen Cargue una imagen desde su dispositivo o seleccione una imagen que ya haya cargado desde su biblioteca de medios de WordPress. Una vez que la imagen se agrega a su publicación, puede agregar texto alternativo en su configuración de bloqueo.
  3. haz clic ahora 3 puntos Seleccione en la esquina superior derecha del editor de publicaciones, editor de código del menú desplegable. Esto cambiará el editor a la vista con formato HTML.
  4. Encuentre la ubicación donde agregó el bloque de imagen y haga una copia completa. etiqueta de imagen de él. Está en el dibujo. No copie etiquetas de forma. Al copiar, el bloque se corrompe debido a problemas de formato. Después de copiar la etiqueta img, elimine todo el código y elimine el bloque de imagen.
    copiar codigo img
  5. Luego vaya al bloque ‘Lista’ y busque el texto donde desea colocar la imagen. sólo escribir hermano Después del texto (justo antes de cerrar /li) y luego insertar etiqueta img Copiado del bloque de imagen. Debe agregar br para hacer un salto de línea después del texto. El código final es:
    Inserte una etiqueta img en la lista.
  6. Cuando haya realizado todos estos cambios, regrese el editor de publicación a Visual View y verá que la imagen se ha agregado correctamente al cuadro de lista.

3. Después de agregar los bloques de imágenes, continúe con la lista

Este método difiere significativamente del método anterior. La idea básica es agregar un bloque de imagen después de la lista, luego crear un nuevo bloque de lista y continuar con el resto de los elementos que desea mencionar. Pero el problema aquí es que agregar un bloque de imagen rompe la numeración de la lista. Esto se puede modificar usando el parámetro de valor inicial. La siguiente lista comenzará en el mismo número que la lista anterior.

Establece el valor inicial del cuadro de lista.

Después de agregar los bloques de imágenes, cree una nueva lista. En el lado derecho del panel Configuración de bloque, verá una configuración llamada Valores predeterminados para la configuración de lista ordenada. Simplemente ingrese el número que desea numerar en la nueva lista. La ventaja de este método es que no tiene que cambiar manualmente el HTML. Para ayudarlo a comprender, aquí hay un ejemplo ficticio simple que muestra cómo aparecerá el código final en una página web.

 !--first list block--olliPoint 1/liliPoint 2/liliPoint 3/li/ol!--image block will be added here--figureimg//figure!--second list block--olli value="4"Point 4/liliPoint 5/liliPoint 6/li/ol

Como puede ver, en el segundo bloque de la lista, el atributo value=»4″ se agrega a la primera etiqueta li. Esto hará que la nueva lista continúe con cualquier número que pueda configurar con la opción inicial.

Conclusión – ¿Qué método es mejor?

Entonces, aquí hay algunas formas de ayudarlo a agregar imágenes al bloque de lista de sus publicaciones de WordPress: Personalmente, recomiendo usar uno de los dos primeros métodos. Esto se debe a que está optimizado para SEO y formato en comparación con el tercer método en el que debe crear una nueva lista cada vez que agrega una imagen. Esto es probablemente lo que necesitas saber sobre este tema. Si tiene alguna pregunta, no dude en compartirla en los comentarios a continuación.