Añadir código css en WordPress 2020

En pleno 2020, añadir código css es fundamental en una página web WordPress, ya que nos ayuda a dar formato a cada componente de la web.

WordPress nos ofrece una gran cantidad de temas, tanto gratuitos como de pago que pueden adaptarse a la perfección a nuestras necesidades. Pero a veces vamos a tener la necesidad de modificar parte de la apariencia, como el color o el tamaño de un texto

En el siguiente post voy a explicar las diferentes formas de añadir código css en nuestra página wordpress, ya sea enlazando un archivo css o escribiéndolo directamente en el tema o con ayuda de algún plugin.

Añadir css en wordpress a través de la plantilla

Esta quizá sea la forma más fácil de añadir css a nuestra página wordpress, ya que es una opción que viene integrada en la plantilla.

Es una opción que recomiendo para cambios muy puntuales ya que no es nada organizado.

Menú apariencia personalizar

Para hacerlo, debemos dirigirnos al backoffice de nuestra página wordpress, en el menú lateral izquierdo: Apariencia > Personalizar.

*Si no ves esta opción prueba a entrar en Apariencia > Temas y personalizar el tema activado.

Una vez dentro, accederemos al menú de personalización. En la parte de abajo encontraremos la opción: CSS adicional.

Menú css adiccional
css personalizado

Y tras insertar nuestro código solo tendremos que pulsar el botón de publicar.

Editar directamente el código del tema

Esta es personalmente la forma que más utilizo a la hora de modificar el css de una página web wordpress.

¡Aviso! No utilices esta opción sin haber creado un tema hijo, ya que si este se actualiza podrías perder todo lo que has modificado. Si no sabes cómo crear un tema hijo mira este post.

Si simplemente queremos añadir código al final del archivo podemos ir de una forma muy rápida: Apariencia > Editor de temas.

Por defecto se abrirá el archivo de tema style.css donde podrás añadir el código que quieras.

Enlazar con archivo css

Podemos enlazar con un archivo css que hayamos creado y que este afecte a toda la web o a una sola página.

La primera duda que me surgió la primera vez que hice esto era dónde guardar el archivo css.

Para tener un fácil acceso, recomiendo crear una carpeta llamada css dentro de carpeta del tema, como se ve en la siguiente imagen.

Si quieres que el archivo afecte a toda la web sólo tienes que incluir el siguiente código en el archivo header (ubicado en la carpeta del tema) justo antes del cierre de la etiqueta </head>

<link rel="stylesheet" type="text/css" href="/wp-content/themes/twentynineteenchild/css/estilos.css">

*Sustituiremos siempre «tuentynineteenchild» por el nombre de nuestro tema.

Si queremos que el archivo afecte a una sola página o post de nuestra web, lo primero que debemos averiguar es el id de la página. Para ello solo tenemos que colocar el cursor encima del nombre de la página en el listado de páginas de wordpress.

En la parte de abajo vemos el enlace y en el mismo, podemos ver post=2. Ese número 2 es el id de la página a la que queremos que afecte.

Ahora vamos a enlazar nuestro archivo css desde functions.php incluyendo el siguiente código al final del archivo.

add_action( 'wp_enqueue_scripts', 'css_custom_page');
function css_custom_page() {
  if (is_page ('2')) {
	wp_enqueue_style( 'custom', get_stylesheet_directory_uri() . '/css/estilos.css',false,'1','all');
  }
}

Hablo más sobre este tema en este post.

Añadir css utilizando un plugin

En la red encontraréis multitud de plugins que os ayuden a insertar código css.

Yo os voy a recomendar uno que he utilizado en alguna ocasión y me gustó por la facilidad de crear varios archivos css y porque permite añadir también código javascript (incluso jquery).

Su nombre es Simple Custom CSS and JS.

Al instalarlo se añadirá una nueva opción en el menú lateral izquierdo donde podremos entrar y empezar a añadir código.

Además este plugin en su versión gratuita ofrece varias opciones como el tipo de enlazado, ubicación en la página (muy útil en javascript) y la ubicación en el sitio, para poder editar también el backend de wordpress y el wp-login.

¿Sabes más formas de añadir css? Coméntalo en los comentarios.

¡No olvides dejar tu comentario!

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *