Tiempo de lectura aprox: 3 minutos, 34 segundos
WordPress y CSS.
Una relación simbiótica. Bueno, no tanto, aunque es cierto que WordPress depende en gran medida de CSS.
Oficialmente, lo expresan de forma más poética: «WordPress depende en gran medida de los estilos de presentación dentro de CSS. Con el uso de Temas, tiene una opción casi infinita de opciones de diseño. Los Temas de WordPress facilitan cambiar la apariencia de su sitio web y abren el campo para ayudarlo a crear su propio Tema y diseño de página.»
En otras palabras, a WordPress no le importa el buen o mal uso que se haga del CSS, pero los temas dependen en gran medida de ese código y, la experiencia que tendrán los visitantes de tu bitácora, dependerá en gran medida de si la parte visual es agradable o no. Y esto depende, y mucho, del CSS.
Si estas leyendo esto en un ordenador de sobremesa, probablemente has situado el cursor del ratón sobre la primera «CSS» que aparece en el artículo y has leído lo que significa: «hojas de estilo en cascada».
Estas hojas de estilo te permiten hacer cambios sobre la presentación de los elementos HTML de una pagina web. Con esto consigues que se visualicen en el color, tamaño y hasta posición que se quiera.
Es esta facilidad, lo que hace de estas hojas de estilo tan importantes para los diferentes «Temas» de WordPress.
Este artículo describe brevemente el uso de CSS en WordPress y enumera algunas referencias para obtener más información.
WordPress y CSS.
Los Temas de WordPress usan una combinación de archivos de plantilla, etiquetas de plantilla y archivos CSS para generar el aspecto de tu sitio de WordPress.
Vamos a ver cada uno de ellos:
Archivos de plantilla
Los archivos de plantilla son los bloques de construcción que se unen para crear un sitio. En la estructura del tema de WordPress, el encabezado, la barra lateral, el contenido y el pie de página están contenidos en archivos individuales.
Cuando unimos los archivos de plantilla, creamos una pagina que, a ojos del visitante, es un montón de etiquetas html y un montón de texto.
Dependiendo del tema, aparecerá uno u otro bloque de información, como barras laterales, lista de etiquetas, etcétera. También puede ser una colección de entradas que, al hacer clic sobre una de ellas, aparecerá el texto completo de la entrada y, por ejemplo, no hay barras laterales.
La disposición de los elementos y cuales aparecen en qué casos, se realiza con las plantillas y sus archivos de plantilla.
Etiquetas de plantilla
Las etiquetas de plantilla son elementos que el programador o diseñador del tema tiene a su alcance para insertar pequeñas piezas de información en la página, tales como la fecha y hora de publicación, el nombre del autor de la entrada, o a qué categoría pertenece, por citar algunos ejemplos.
En otro artículo hablaremos en detalle sobre las etiquetas de plantilla, de las cuales hay muchas; a modo de ejemplo, las etiquetas sobre el autor son:
- the_author()
- get_the_author()
- the_author_link()
- get_the_author_link()
- the_author_meta()
- the_author_posts()
- the_author_posts_link()
- wp_dropdown_users()
- wp_list_authors()
- get_author_posts_url()
CSS personalizado en WordPress
WordPress permite, a partir de la versión 4.7, agregar CSS personalizado a tu propio tema desde la pantalla «Personalizar» del menú «Apariencia», sin la necesidad de plugin adicionales ni editar directamente temas o temas hijo. ¡Simplemente elije la entrada CSS adicional al personalizar tu tema actual para comenzar!
Cualquier cambio de CSS que realices, aparecerá inmediatamente en la vista previa.
De esta forma, puedes hacer tantos cambios como sea necesario y sólo pulsar el botón «Publicar» cuando estés satisfecho con los cambios.
Ten en cuenta que los cambios de CSS están vinculados con tu tema. Esto significa que si cambias a un nuevo tema, tus estilos CSS personalizados ya no estarán activos (por supuesto, si cambias de nuevo a tu tema anterior, volverán a estar allí).
¿Por qué usar CSS personalizado?
Algunas razones para usar este método son:
- Si modificas un tema directamente y este se actualiza, entonces tus modificaciones pueden perderse. Al utilizar CSS personalizado, te asegurarás de que se conservan tus modificaciones.
- El uso de CSS personalizado puede acelerar el tiempo de desarrollo.
- El CSS personalizado se carga después del CSS original del tema y, por lo tanto, permite anular declaraciones CSS específicas, sin tener que escribir un conjunto CSS completo desde cero.
Clases de WordPress
A partir de la versión 2.5 (si, ya ha llovido) se introdujeron unas cuantas declaraciones que podemos aprovechar o cambiar.
La mayoría se refieren a elementos de bloque (div, p, tableCSS, etcétera) e imágenes.
Son las referidas a la alineación: alignleft, alignright, aligncenter.
Posteriormente, en la versión 2.6 se introdujo la clase alignnone . Se añadieron también estas clases a las imágenes que son parte de un título.
Al ser necesarias también las clases para los subtítulos, hay un conjunto de declaraciones internas en WordPress:
/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
.alignright {
float:right;
margin: 5px 0 20px 20px;
}
.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.alignright {
float: right;
margin: 5px 0 20px 20px;
}
a img.alignnone {
margin: 5px 20px 20px 0;
}
a img.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption {
background: #fff;
border: 1px solid #f0f0f0;
max-width: 96%; /* Image does not overflow the content area */
padding: 5px 3px 10px;
text-align: center;
}
.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
margin: 5px 0 20px 20px;
}
.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
}
/* Text meant only for screen readers. */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
.screen-reader-text:focus {
background-color: #eee;
clip: auto !important;
clip-path: none;
color: #444;
display: block;
font-size: 1em;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
/* Above WP toolbar. */
}
Cada tema debe tener estos estilos o estilos similares en su archivo style.css para poder mostrar imágenes y subtítulos correctamente. Los elementos HTML exactos y los valores de clase e ID dependerán de la estructura del tema que estés utilizando.
Recuerda aprender y divertirte.
¡Gracias por leernos!
¡Tus comentarios y preguntas nos ayudan a mejorar, por favor comenta!