Como editar el estilo CSS en WordPress – Guía para novatos

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.

 

Te puede parecer complejo ya que tanto el html y el CSS son dos lenguajes complejos pero ni mucho menos difíciles de entender en la actualidad.

Para que aprendas a usarlos y dar un toque especial a tus diseños he traído un invitado muy especial, es argentino y se llama Luis Forgiarini y ha escrito esta Guía para novatos en CSS, te va a encantar, te dejo con él:


Te interesará leer:

Elementor 

Plantillas WordPress Profesionales

Cómo diseñar una página web


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.

 

iniciacion-al-cssIntroducció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.

hojas-de-estilos-css

  • 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:
p { color: red; }  

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:
#id-one { background: #FFF; }

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.
img[src] { padding: 65px 0 65px 0; }

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:
a:hover { color: #000; }

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:
<div class=”class-one”> <h2>Un título cualquiera</h2> <p>Con un párrafo cualquiera</p> </div> <div class=”class-two”> <h2>Otro título cualquiera</h2> <p>Con un párrafo cualquiera</p> </div>

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)

combinaciones-css

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.

 

¿Sobre que temática quieres que te hable?

Suscríbete y elige un GRUPO

Recibe los últimos artículos, trucos, tips de Seo, Marketing o Diseño Web

  • Responsable: José Manuel Peña Fernández
  • Finalidad: enviarte publicaciones y noticias sobre el blog
  • Legitimación: tu consentimiento.
  • Destinatarios: tus datos serán guardados en Mailrelay, (mi proveedor de email marketing)
  • 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.

 

estilos-css5 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.

css-editor-wordpress

 

 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 Haz click para twittear

css-personalizadoCó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.

WP Add Custom CSS

 

Lo instalas, lo activas, y tendrás disponible un editor de texto CSS en cada  una de tus páginas y entradas.

plugin-css

 

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.

 

añadir-codigo-cssCó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.

 

Uso del Inspector de Elementos de tu navegador

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.

 

inspector de elementos en maquetador

 

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.

 

ver-codigo-css

 

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.

 

panel-css

 

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.

 

ejemplos-css

 

Haciendo doble click en la etiqueta ya puedo seleccionarla, y llevarla a mi panel de edición CSS.

 

custom-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.

 

css-en-wordpress

 

Y bueno así de sencillo es llevar a cabo la edición CSS en WordPress, 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. 😉

Si te ha gustado… ¡Compártelo y dame 5 estrellitas!

Guía de CSS para novatos. Aprende a personalizar más tus diseños usando código fácilmenteHaz click para twittear
Como editar el estilo CSS en WordPress – Guía para novatos
5 (100%) 9 votes

Ingeniero civil de profesión, blogger en los tiempos libres. Escribo sobre creación, gestión de sitios webs, blogging y todo lo que aprendo día a día sobre el tema.

6 comentarios en “Como editar el estilo CSS en WordPress – Guía para novatos

  1. Hola José y Luis

    La verdad nunca he podido con este del CSS.
    Estuve leyendo tu post y veo que esta muy completo pero aún así prefiero no tocar código. Para mi es mas seguro jejeje.
    De todas formas lo tendré a mano por si algo.

    Gracias

    • Prueba Rolando, tocar CSS no es peligroso, además siempre puedes usar una herremienta externa y luego aplicar en la web.

      Hoy día no hace falta casi para tener un buen diseño pero cualquier pequeña modificación que necesites en un momento dado si eres capaz de usar un poco de CSS es perfecto.

      Echa un vistazo porque Luis ha escrito un post muy bueno para quien quiera empezar a manejar un poco de código.

      Saludos Rolando y gracias por dejar tu comentario

  2. Muy interesante la guía. Completa y fácil de entender. Lo que eché en falta fue, como crear el hijo. Pero, supongo que tendréis que crear otra guía explicandolo. CSS ya toco alguna cosita pero con los consejos de Luis todo parece más sencillo. Muchas gracias por compartir con los lectores

    • Hola Ana, eso es lo que sabía que iba a conseguir con Luis, que lo pusiera muy fácil para quien no sepa nada o casi nada de CSS.

      Respecto al tema hijo yo no lo uso porque utilizo los hooks que permite mi plantilla pero es sencillo de instalar, tomo nota para futuros post.

      Saludos Ana

  3. ¡Genial! Este post me ha resulto unas cuantas dudas, había ciertas partes de todo este asunto del CSS que no me estaban quedando nada claras 🙂 Algunas cosas del mundo WordPress se me hacen cuesta arriba y no siempre es fácil dar con un post que vaya al grano y que aporte una solución que realmente funcione, ¿verdad? Pero ahora creo que ya lo he entendido todo, ¡te explicas de maravilla!
    Muchas gracias por tu ayuda 😀

Deja un comentario

Responsable: José Manuel Peña Fernández

Finalidad:  gestionar los comentarios.

Legitimación: tu consentimiento.  

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.

Compartir66
Twittear256
Compartir
Buffer86
WhatsApp
+1
408 Compartir

Utilizamos cookies para mejorar tu experiencia. Al navegar estás aceptando el uso de ellas. 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