Fragmento CSS para estilizar imágenes en entradas de blog de WordPress

Cómo agregar código PHP

Una forma segura y recomendada de agregar código PHP en WordPress sin tocar el archivo functions.php es usando el plugin gratuito Code Snippets. Este plugin te permite añadir fragmentos directamente desde el panel de administración, organizarlos por nombre, desactivarlos cuando quieras y evitar errores críticos que podrían bloquear tu sitio si el código está mal escrito. Es ideal para aplicar funciones personalizadas sin depender de temas hijo o acceso FTP, y compatible con la mayoría de fragmentos que comparten desarrolladores y comunidades como Drunel.

Cómo agregar código JavaScript

La forma más sencilla de agregar código JavaScript en WordPress es utilizando el widget HTML que viene con el editor por bloques o con Elementor. Solo tienes que arrastrar el widget a la zona donde quieras que se ejecute el script y pegar el código dentro de etiquetas <script>...</script>. Este método es útil para insertar pequeños fragmentos como eventos, funciones o scripts de terceros sin editar archivos del tema.

Cómo agregar código CSS

Para estilos globales que se apliquen en todo el sitio, es mejor agregarlos desde el personalizador de WordPress en “Apariencia > Personalizar > CSS adicional” o en la configuración de estilo global de Elementor.
Si usas Elementor y el estilo es específico para un solo widget o sección, insértalo directamente en ese bloque.

Para agregar código CSS en el editor nativo de WordPress a una sección o bloque, puedes usar el widget HTML colocando el CSS dentro de una etiqueta <style>...</style>.

Descripción

Fragmento de código para estilizar las imágenes dentro de entradas de blog en WordPress. Este CSS personaliza el contenedor de imágenes en publicaciones del blog, aplicando un margen vertical, borde sutil y esquinas redondeadas. Mejora la presentación visual de las imágenes sin afectar su tamaño ni alineación.

CSS

.imagenes-blog {
margin: 20px 0; /* Ajusta el margen arriba y abajo a 20px y a los lados a 0 */
border: 1px solid #E3E1E1;
border-radius: 4px; /* Aumenta el radio de borde a 4px */
}

Notas y recomendaciones

Asegúrate de en los ajustes avanzados del bloque de imagen del editor de WordPress agregar la clase imagenes-blog
Puedes ajustar el valor de margin según el espaciado general de tu tema para mantener coherencia visual.
El color del borde (#E3E1E1) puede modificarse para adaptarse mejor a tu paleta de colores.
Este fragmento no afecta el tamaño de las imágenes, solo el marco visual. Si necesitas redimensionarlas, deberás añadir propiedades como width o max-width.