[icon name="fa-wordpress"]

Instalar WordPress

Guía de Instalación

[icon name="fa-heartbeat"]

Optimizar WordPress

Optimización y Velocidad

[icon name="fa-lock"]

Seguridad de WordPress

Guía de Protección

Cómo Estilizar Imágenes con CSS en WordPress con Código

Cómo Estilizar Imágenes con CSS en WordPress

Las imágenes son un componente importante del contenido de los artículos y entradas en WordPress, y dan una atracción visual al visitante y también añaden un valor explicativo e ilustrativo a asunto. Por eso, el estilo y presentación de las imágenes es algo importante. Hoy te mostraremos cómo estilizar imágenes con CSS en WordPress.

Estilizar Imágenes en WordPress

WordPress de forma predeterminada incluye clases CSS para el estilo de imágenes. que se encargan de alinearlas a la izquierta, centro y derecha en relación con el párrafo,  según la posición asignada a cada imagen desde el editor de la entrada.

Alimear y estilizar imágenes con CSS en WordPress

Para aprovechar las ventajas de las clases CSS de alineación de imágenes, los temas de WordPress deben incluir el siguiente código en el archivo principal de estilo style.css en la carpeta del tema principal.

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

Lo que hace básicamente este código es estilizar la etiqueta img y también a para alinear correctamente las imágenes en tu sitio web, para darle una apariencia presentable y agradable para los visitantes.

Estilizar Todas las Imágenes en WordPress

En la sección anterior, hemos visto cómo alinear y posicionar bien las imágenes en relación con los párrafos de tus entradas o artículos en el sitio web. También existe un estilo general de todas las imágenes que existen en tu sitio web, que marca una apariencia uniforme entre todas las imágenes, independientemente de su alineación.

Para añadir  estilo CSS a todas las imágenes en tu sitio, para que tengan una apariencia única y ordenada, buscas en tu tema la etiqueta de imágen img o añade una nueva, y aplicar tu estilo personalizado en ella.

img {
	border: 1px solid #ddd;
	border-radius: 5px;
	background: #fff;
	margin: 20px;
	padding: 2px;
}

Un ejemplo práctico sería  un estilo CSS de imagen con borde redondeado de color gris que se verá en todas las imágenes en WordPress. También agregamos un margen de 10px y un relleno de 5px por los cuatro lados con un fondo blanco de las imágenes de tu sitio web.

Te podría interesar leer:  Qué es WordPress? Conoce el Gestor de Contenido Más Usado

Estilizar Una Imagen en WordPress

Esta es la forma más práctica para aplicar un estilo CSS general a todas las imágenes en WordPress. En caso de que quieras estilizar imágenes individuales debes especificarlo mediante el valor de la clase o id de etiqueta.

<img class="wpbody" src="#" alt="Imagen WPBody">

En este sencillo ejemplo tenemos una etiqueta img con una imagen que tiene la clase wpbody la cual utilizaremos para estilizar imágenes con esa clase, puede ser una sola imagen como pueden ser varias. Depende de si la clase se usa en una sola o en otras.

img.wpbody {
	background: #fff;
	border: 2px solid #ddd;
	margin: 20px;
	padding: 20px;
}

Agregas este código a tu archivo style.css en tu tema actual para efectuar cambios sobre la apariencia de la imagen en WordPress. Aplicamos en este código un fondo de color blanco, con borde gris y margen y relleno de 20px en cada uno.

Estas son las formas más prácticas de estilizar imágenes en WordPress con CSS y dar una presentación sólida y apariencia clara a los gráficos de tu sitio web.

Si te gusta este artículo, por favor compártelo, y síguenos por facebook y twitter. También tenemos nuestra página en google+ para compartir contenido sobre seguridad y optimizaci’on de WordPress.

Deja un comentario

Si continúas utilizando este sitio significa que aceptas el uso de cookies. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar