- Escrito y revisado por José Peña
- Fecha de publicación:
- Fecha de revisión:12/11/2020
A lo mejor estás pensando que editar código CSS no es necesario si utilizas WordPress y un constructor visual, y en parte es cierto, yo te recomiendo que si tienes la posibilidad aprendas a usarlo.
Editar código CSS en WordPress es un añadido y un plus a la hora de diseñar una web ya que siempre habrá partes donde la plantilla o el maquetador no lleguen y te veas en la necesidad de acudir a este lenguaje de hojas de estilos.
Actualmente el panorama ha cambiado bastante y prácticamente no necesitas usar nada de CSS si no quieres con las herramientas que existen.
Incluso a la hora de contratar un diseñador web, este puede no necesitar usar CSS para nada ya que las herramientas que utiliza tienen muchas funcionalidades y no necesitan este lenguaje de programación.
Esto es una ventaja para el cliente ya que una vez entregada la web, el mísmo podrá hacer cambios de textos, imágenes o incluso editar elementos de forma sencilla.
Aunque como te digo al principio, el html y el CSS son dos lenguajes complejos pero ni mucho menos difíciles de entender en la actualidad y si sabes un poquito te pueden ayudar a conseguir ese pequeño cambio visual que tanto te gusta.
Te interesará leer:
Plantillas WordPress Profesionales
Si quieres vivir de internet ¡Suscríbete!
Recibe Trucos / Consejos sobre SEO y Monetización
Información básica sobre protección de datos:
- Responsable: José Manuel Peña Fernández
- Finalidad: recoger y tratar los datos personales que te solicito para gestionar la solicitud que realizas en este formulario de contacto.
- Legitimación: tu consentimiento de que quieres comunicarte conmigo.
- Destinatarios: tus datos serán guardados en Webempresa, (proveedor de hosting de Tu Web de Cero) dentro de la UE.
- Derechos: tienes derecho, entre otros, a acceder, rectificar, limitar y suprimir tus datos.
- Información adicional: Puedes consultar la información adicional y detallada sobre protección de Datos en mi Política de Privacidad.
Lo cierto es que la gran mayoría de los usuarios de nuestro querido WordPress, hacen uso del él sin tocar ni una línea de código. Pero que la mayor parte no lo haga no quiere decir que sea lo mejor, dado que conocer de HTML y CSS te abre un abanico de posibilidades inmenso a la hora de personalizar tu web/blog.
Dado que quiero que tú seas uno de esos que meten mano en los códigos, te dejaré esta guía sobre cómo editar los estilos CSS en WordPress.
Introducción al CSS
Mi objetivo es que cualquier novato entienda este post, por lo tanto comenzaré por darte una breve introducción en la temática. Bueno tan breve como pueda. jeje
〉〉¿Qué son los estilos CSS?
En un sitio web, incluyendo aquellos montados en WordPress, son códigos HTML los encargados de dar la estructura.
Sin ir más lejos, bajo estas líneas que estás leyendo, hay códigos HTML que le dan forma a todo. Diferenciando titulares de texto común, colocando enlaces, dejando espacios entre párrafos, ubicando las imágenes, etc.
Las hojas CSS son las encargadas de darle a esa estructura HTML, estilos visualmente más agradables.
Haciendo una analogía, supongamos que tomas una fotografía con tu smartphone y antes de subirla a Instagram le aplicas un filtro. Si entendemos a la foto como el HTML, el CSS es el filtro. Básicamente la foto/HTML se mantiene inalterada, pero su apariencia cambiará en función de cada filtro/CSS que apliques.
Siendo más exacto, CSS es un lenguaje de hojas de estilo que te permite aplicar estilos de manera selectiva a elementos en documentos HTML. Pudiendo darle color y tamaño al texto de un párrafo, definir la alineación de una imagen, cambiar el grosor de una línea, etc.
〉〉 Estructura de las hojas de estilo CSS
Para que cuando comencemos a escribir nuestras primeras líneas en CSS no te pierdas, quiero que entiendas su estructura. La cual, verás que es muy simple.
- Selector: con este comienza la regla, y es quien define a qué elemento HTML se le dará estilo. Luego veremos que el mismo puede ser una etiqueta, un ID, una clase, un atributo o hasta una pseudo-clase.
- Propiedades: aquí es donde se define qué es lo que quieres cambiar (tamaño, color, alineación, etc)
- Valor de la propiedad: para terminar se da el valor a dicha propiedad. Por ejemplo, en caso que la propiedad sea color, el valor podría ser verde.
Un ejemplo sencillo es el siguiente, en el cual se da estilo a un título h1.
h1 { color: red; }En este caso se define que todos los titulares h1, serán de color rojo. Ahora si quisieras que los h2 y h3 también tengan dicho color podrás hacer lo siguiente.
h1,h2,h3 { color: red; }Así de sencillo, solo haces una regla con múltiples selectores. 😉
〉〉 Tipos de selectores
Como te adelante, los selectores pueden ser de diversos tipos. Pero cada uno se llama desde el CSS de diferente manera:
- Selector de etiqueta: selecciona los elementos que se encuentran dentro de una etiqueta. Ejemplo:
Dicho código selecciona la etiqueta <p>.
- Selector de identificación (ID): selecciona todos los elementos que están bajo el ID en cuestión. Ejemplo:
El usar el CSS anterior se da estilo a las etiquetas identificadas con el ID id-one (<h1 id=”#id-one”)
- Selector de Clase: selecciona los elementos bajo la clase especificada. Ejemplo:
.class-one { font-size: 25px; }
Este CSS modifica todos los elementos clasificados con la clase .clase-one (<p class=”class-one”>)
- Selector de atributo: selecciona todo elemento que contenga el atributo especificado.
Usando este CSS , selecciona <img src=»unaimagen.png»> pero no <img>.
- Selector de Pseudo-clase: Los elementos especificados, pero solo cuando esté en el estado especificado. Ejemplo:
Al pasar el cursor sobre un elemento <a> el mismo tomará el color negro (#000). Muy útil para dar dinámica y resaltar un elemento.
- Combinación de selectores: los selectores pueden combinarse permitiendo así ser más específicos con la selección. Ejemplo:
Si al código anterior, queremos darle un estilo para que se vea como sigue (sisi ya se que no se ve nada bien, pero es solo a modo de ejemplo. jeje)
No se lo podrá hacer llamado solo una etiqueta desde el CSS, sino que tendremos que combinar más de una.
p, h2 { text-align: center; } .class-one h2 { color: #4BBB3E; text-align: center; font-size: 45px; font-weight: bold; font-family: arial; }Primero definimos una propiedad generalizada (alineación) a las etiquetas h2 y p. Para luego llamar a la clase .class-one, y dentro de ella la etiqueta h2 para darle los estilos a esta última.
5 formas de editar el estilo CSS en WordPress
Uno de los pilares en los que se basa la gran popularidad del gestor de contenidos WordPress, es que no se necesita conocer de programación para usarlo. Tus conocimientos en HTML y CSS pueden ser nulos, pero de igual forma es posible que gestiones una web con este CMS.
Si tu eres uno de esos super novatos, que no tocan ni una línea de código en tu WordPress, te tengo una buena noticia. Editar el CSS en WordPress no es nada difícil, y en este apartado te lo explicaré. 😉
Son varias las maneras de meter mano en el CSS de WordPress. Veremos las siguientes:
- Desde el editor dinámico de Wordpress.
- Haciendo uso de plugins.
- Creando un child theme.
〉〉 Desde el editor de WordPress
La edición del CSS desde el propio panel era algo que se le reclamaba a WordPress desde hace tiempo, y fue en su versión 4.7 cuando lo integró. Ahora con solo clickear Apariencia → Personalizar → CSS adicional, tienes acceso a un panel de edición CSS bastante completo.
En sus primeras versiones el editor era muy básico, casi como escribir en un txt. Pero ahora cuenta con funciones que permiten una escritura más fácil y rápida, algunas de ellas son:
- Resaltado de código identificando clases y valores.
- Autocompletador de texto.
- Detector de errores de escritura.
Este es sin dudas el método más sencillo de editar las hojas de estilo en WordPress.
〉〉 Mediante plugins
Antes de la versión 4.7 de WordPress, el usar plugins para tocar el CSS en WordPress era el primer método al que acudía un novato.
De igual forma el uso de plugins aún está vigente, y algunos de los más populares son:
Personalmente, siempre que puedo prescindir de un plugin para añadir una función lo hago. Pero bueno WordPress no sería WordPress sin los plugins, por lo que no podría obviar este método.
Te interesa leer:
Listado de plugins para tu web en WordPress
〉〉 Creando un tema hijo
De no existir los plugins ni el editor del mismo WordPress, si quisiéramos cambiar o añadir estilos CSS, deberíamos dirigirnos al archivo style.css de nuestro tema. Si bien esta parece la forma más lógica, la verdad no es para nada recomendable.
El principal motivo por el cual no te recomiendo este método es por que cada vez que tu theme reciba una actualización, el CSS añadido se perderá. Es decir que debieras estar atento a cada actualización, y añadir nuevamente tus modificaciones CSS cuando ellas sucedan.
Para solucionar problemas como este, es que existen los temas hijos o child themes. En caso que no lo sepas, un tema hijo es un tema que hereda las funcionalidades de otro, el cual llamamos “tema padre”. Permitiendo así modificar y/o añadir funcionalidades al tema padre, sin tocar directamente los archivos del mismo. A fin de cuentas, una forma segura de editar una plantilla en WordPress.
Por lo tanto, y volviendo a la edición del CSS, el usar un tema hijo hará que los cambios en tu tema de WordPress, no se pierdan con las actualizaciones del tema padre.
Debes entender que la creación de un child theme permite editar todos los archivos del tema padre. Entre ellos el function.php. En el próximo apartado, verás que es de mucha utilidad poder meter mano en dicho archivo. 😉
¿Quieres aprender a manejar CSS de forma sencilla? Guía para novatos
Cómo individualizar CSS para cada post o entrada
Hasta ahora hemos visto cómo dar estilo a tu sitio web de forma general. Es decir que todos los rincones de la web tomará las mismas ediciones. Pero supongamos que necesitas dar estilos individualizados para cada página o post de tu web. ¿Cómo harías eso?.
Bueno como todo en la vida existe una solución, en realidad varias soluciones. Pero aquí te daré dos.
〉〉 Edición mediante plugin
Si si para todo problema en WordPress existe un plugin jeje. El plugin en cuestión ya te lo recomendé un par de líneas antes y es el siguiente.
Lo instalas, lo activas, y tendrás disponible un editor de texto CSS en cada una de tus páginas y entradas.
〉〉 Edición mediante código .php
La anterior es una buena opción, pero la que te daré ahora es mejor por que no necesitarás ningún plugin. Ya te lo comenté, siempre que puedo evito los plugins (que diga esto no me convierte en un un anti-plugin, los 26 plugins activos en mi blog son prueba de ello. jejeje)
Para esquivarle al plugin añadiremos unos códigos en el function.php. Si vas a llevar esto a cabo lo mejor será que tengas un tema hijo ya creado. Tocar un archivo de funciones del padre es riesgoso, y cuenta con la misma desventaja de editar el style.css. Las modificaciones se pierden con una actualización.
Bueno supongo que me has hecho caso y ya tienes tu child theme. Si es así puedes añadir este trozo de código en el function.php.
//Custom CSS Widget add_action(‘admin_menu’, ‘custom_css_hooks’); add_action(‘save_post’, ‘save_custom_css’); add_action(‘wp_head’,’insert_custom_css’); function custom_css_hooks() { add_meta_box(‘custom_css’, ‘Custom CSS’, ‘custom_css_input’, ‘post’, ‘normal’, ‘high’); add_meta_box(‘custom_css’, ‘Custom CSS’, ‘custom_css_input’, ‘page’, ‘normal’, ‘high’); } function custom_css_input() { global $post; echo ‘<input type=»hidden» name=»custom_css_noncename» id=»custom_css_noncename» value=»‘.wp_create_nonce(‘custom-css’).'» />’; echo ‘<textarea name=»custom_css» id=»custom_css» rows=»5″ cols=»30″ style=»width:100%;»>’.get_post_meta($post->ID,’_custom_css’,true).'</textarea>’; } function save_custom_css($post_id) { if (!wp_verify_nonce($_POST[‘custom_css_noncename’], ‘custom-css’)) return $post_id; if (defined(‘DOING_AUTOSAVE’) && DOING_AUTOSAVE) return $post_id; $custom_css = $_POST[‘custom_css’]; update_post_meta($post_id, ‘_custom_css’, $custom_css); } function insert_custom_css() { if (is_page() || is_single()) { if (have_posts()) : while (have_posts()) : the_post(); echo ‘<style type=»text/css»>’.get_post_meta(get_the_ID(), ‘_custom_css’, true).'</style>’; endwhile; endif; rewind_posts(); } }Esto te dará el mismo resultado del plugin, una caja de edición CSS para cada post y entrada de tu web. 🙂
Nota: no creerás que yo escribí ese pedazo de código php no? jejeje. No no, lamentablemente mis conocimientos en php no llegan a eso. 🙁 Lo he obtenido de un muy buen post de la web digwp.com.
Cómo añadir o sobrescribir CSS en WordPress
En general son dos las tareas que uno puede realizar a la hora de trabajar sobre el CSS en WordPress:
1- Añadir nuevos estilos .
2- Sobrescribir/editar estilos previamente creados.
Si bien son tareas similares vamos a individualizarlas para que lo entiendas mejor.
〉〉 Añadir nuevos estilos
Acudimos a esto cuando necesitamos nuevos elementos de diseño para nuestra web. Puede tratarse de botones, cajas de texto, menús, widgets, etc.
Llevar esto a cabo es super sencillo, solo debes tomar el trozo de código CSS y añadirlo de alguna de las tres formas que te expliqué.
Por ejemplo, si lo que búscas es el código CSS de un botón, este podría servirte.
/* codigo css botón rojo */ .button.rojo { display: inline-block; padding: 10px 35px; margin: 3px; border: 1px solid #999; border-radius: 3px; -webkit-transition:1.8s opacity; transition: 0.2s opacity; box-shadow: 0 1px 2px rgba(0,0,0,.2); font-size:16px; background-color: #e62727; color: #FFF; font-weight: bold; } .button.rojo:hover{ background-color: #BF00FF; }Una vez añadido en la hoja de estilo CSS de tu WordPress podrás, a traves del HTML, hacer uso del elemento.
<!– código html del botón –> <a class=»button rojo» href=»URL del botón»><span>Código HTML para el boton</span></a>El resultado final es el siguiente:
<script async src=»//jsfiddle.net/luisfor09/m07z1612/1/embed/result/dark/»></script>
〉〉 Sobrescribir/editar estilos CSS previamente creados
Es muy común necesitar editar el CSS en WordPress de elementos los ya existentes en nuestro tema. Puede que queramos cambiar el color de fondo de nuestro menú, variar el estilo de letra a los textos, dar un estilo más llamativo a la caja de comentarios, etc, etc etc. Las modificaciones posibles son infinitas.
Si el elemento a modificar es bien conocido, por ejemplo los títulos h2. No hay muchas vueltas, nos vamos a nuestro editor CSS y escribimos los estilos que deseamos dar.
h2 { color: #FFF; text-align: center; font-size:16px; background-color: #e62727; }Esto cambiaría de color, alineación y tamaño a estos títulos.
Nota: puede pasar que, para ciertas etiquetas, tu tema no tome los nuevos estilos ya que prioriza los propios. Esto sucede en estilos que sobreescribes, no en estilos nuevos. Para ello una solución es el uso de la etiqueta !important.
Siguiendo con el ejemplo anterior, si tu plantilla no te toma la edición del color en el título h2, deberías agregar la etiqueta !important de la siguiente manera.
h2 { color: #FFF !important; text-align: center; font-size:16px; background-color: #e62727; }Esto forzará al sistema a tomar el color que tu dices.
El caso que acabamos de ver es el ideal, pero generalmente necesitamos modificar el estilo de elementos, de los cuales desconocemos los estilos que los gobiernan. Es ahí cuando acudimos al grandísimo inspector de elementos de nuestro navegador. En mi caso Google Chrome.
Usar dicha herramienta es muy sencillo, solo debemos abrir la web con el navegador, colocarnos en el elemento que deseamos editar, hacer click derecho sobre el mismo y luego click en inspeccionar.
El inspector de elementos te da un panel a la derecha, que en su parte superior tiene el código HTML de la web, y debajo el CSS.
A medida que te desplazas con el cursor por el código HTML, en la web se van resaltando los elementos que define cada etiqueta. Además, se muestran los códigos CSS relacionados a cada uno de ellos.
Por practicidad el HTML se encuentra comprimido, muestra la etiqueta madre y lo demás lo contrae. Te darás cuenta de ello por los puntos suspensivos (…), para expandir el código y llegar a la etiqueta que tú quieres obtener, debes hacer doble clic en los tres puntos.
Desde el panel CSS del inspector se permiten hacer ediciones, las cuales obviamente solo son a nivel de tu navegador, y con solo actualizar se pierden. Por ejemplo, en mi plantilla podemos cambiar el color de los íconos sociales.
Personalmente, lo que busco es dar un color diferente a cada ícono social, por lo que no bastará con hacer la edición anterior a nivel interno. La tarea que debo llevar a cabo es buscar la etiqueta que controla cada ícono, para luego editarla mediante CSS.
Expandiendo el HTML logré llegar hasta la etiqueta del icono de Facebook.
Haciendo doble click en la etiqueta ya puedo seleccionarla, y llevarla a mi panel de edición CSS.
Una vez extraídas las etiquetas de cada icono (Facebook, Twitter, Google Plus, etc), y editadas mediante el CSS en WordPress, el resultado fue el siguiente.
Y bueno así de sencillo es llevar a cabo la edición CSS en WordPress. Tanto si vas a crear tú mismo una página web como si vas a optar por un diseñador web especializado en WordPress, es bueno que tengas unos mínimos conocimiento.
Espero hayas entendido todo el procedimiento. De lo contrario pégale otra leída, y si continúan tus dudas déjalas en la caja de comentarios. 😉
