Cómo Agregar Código CSS Personalizado en WordPress

Nube Colectiva

hace 2 años

Cómo Añadir CSS Personalizado en WordPress

En esta página:

WordPress es uno de los CMS (Content Management System) o Sistema de Gestión de Contenido, más populares del mundo.

Existen ciertas características que lo hacen el mejor, la primera probablemente sea su proceso sencillo de instalación.

Otra de sus características es que permite personalizar el código JavaScript y hacer que una web sea diferente o que tenga con ciertas características que la hacen única.

WordPress también nos permite personalizar el código CSS y en este tutorial te enseñaré a Cómo Agregar Código CSS Personalizado en WordPress, vamos con ello.

Para personalizar css wordpress debes seguir las buenas prácticas

Cómo Agregar Código CSS Personalizado en WordPress

Existen diferentes maneras de Añadir Código CSS Personalizado en WordPress, desde las más fáciles, hasta las más avanzadas o para usuarios con mucha experiencia en el desarrollo.

Para seguir las buenas prácticas en WordPress, voy a compartirte 2 maneras de cómo hacerlo sin afectar tu proyecto en WordPress.

Veamos estas maneras de agregar CSS personalizado a WordPress, a continuación:

1. Cómo Añadir CSS Personalizado mediante el administrador de WordPress

El administrador nos brinda la posibilidad de agregar nuestro propio código css adicional wordpress. Para agregar CSS personalizado debes ir a Apariencia > Personalizar:

En esta opción podrás agregar CSS personalizado en WordPress

Luego dirígete a la opción que dice CSS adicional y presiónala:

Usar la opción CSS adicional te permitirá agregar css a wordpress sin tanto rollo

Se te abrirá un editor de código sencillo en donde puedes agregar css a WordPress o modificar el código CSS de tu WordPress que ya esté siendo usado.

Por ejemplo le doy el color rojo al título del artículo Como Usar Bootstrap en PHP, algo genial es que podrás ver en tiempo real el resultado final.

Una vez que estés de acuerdo, presionar el botón que dice Publicar para guardar los cambios:

Recuerda que debes conocer la clase, id o el selector específico al cual le quieres agregar css en wordpress

Personalmente esta es la mejor manera de agregar css en wordpress, ya que no estamos tocando nada delicado del proyecto, el mismo WordPress nos brinda este editor para trabajar con CSS personalizado.

2. Cómo Agregar Código CSS Personalizado en WordPress usando Plugin

Esta manera la puse en segundo lugar, ya que el uso de plugins puede recargar tu servidor, no estoy diciendo que se vaya a caer, pero siempre es bueno arroparlo y dejarlo respirar, al final es el lugar donde está alojado tu proyecto y necesita ser consentido.

Instalación de un plugin css wordpress

Con esto no estoy diciendo que no uses plugins, claro que es válido usarlos, solo te comparto un punto de vista o forma de trabajar, ya depende de ti si consideras aplicarlo también a tus proyectos. Para usar plugins que te permitan Añadir Código CSS Personalizado en WordPress, ve a Plugins > Añadir nuevo:

Existen muchos plugins para css personalizado wordpres

En el buscador de plugins coloca el texto “custom css” y te aparecerán varias alternativas, puedes instalar e ir probando los plugins que desees, hasta quedarte con el que cumpla tus espectativas:

Recuerda desinstalar los plugins que no necesitas

Por ejemplo, más abajo encontré el plugin llamado Custom CSS, JS & PHP, presionamos su botón que dice Instalar ahora y luego que termine de instalarse, aparecerá un botón que dice Activar, lo presionamos para activar el plugin:

Este plugin te permite agregar a wordPress CSS adicional

Una vez activado el plugin, nos dirigimos a Herramientas > Custom CSS, allí activamos la casilla que dice Enable custom front-end CSS, escribimos nuestro código CSS personalizado y presionamos el botón de abajo que dice Save changes para guardar los cambios:

Recuerda presionar el botón para guardar los cambios

Puedes agregar todos los estilos CSS que desees y también modificar css en wordpress. Existen otras maneras de hacerlo, las que he compartido están orientadas para la mayoría de usuarios, tanto nuevos como avanzados en WordPress.

3. Cómo Agregar Código CSS Personalizado en WordPress Mediante el Editor de Bloques (Gutenberg)

Si usas el editor de bloques Gutenberg, puedes agregar clases de CSS personalizado en los bloques individuales en la opción Configuración avanzada de cada bloque.

Las clases las puedes crear en otro archivo y las llamas en tu bloque

4. Cómo Agregar Código CSS Personalizado en WordPress mediante el archivo functions.php

También puedes inyectar CSS personalizado usando el archivo functions.php de tu tema o tema hijo:


// Agregar CSS personalizado al tema
function agregar_css_personalizado() {
    echo '<style>
        body { background-color: #e0e0e0; }
        h1 { color: #ff6347; }
    </style>';
}
add_action('wp_head', 'agregar_css_personalizado');

// Agregar CSS personalizado al tema

function agregar_css_personalizado() {

echo '<style>

body { background-color: #e0e0e0; }

h1 { color: #ff6347; }

</style>';

}

add_action('wp_head', 'agregar_css_personalizado');

5. Cómo Agregar Código CSS Personalizado en WordPress con un archivo CSS externo mediante functions.php

Si prefieres tener un archivo CSS separado, puedes agregarlo así en el archivo functions.php de tu tema:


// Cargar un archivo CSS personalizado
function cargar_archivo_css_personalizado() {
    wp_enqueue_style('mi-css-personalizado', get_stylesheet_directory_uri() . '/css/mi-estilo.css');
}
add_action('wp_enqueue_scripts', 'cargar_archivo_css_personalizado');

// Cargar un archivo CSS personalizado

function cargar_archivo_css_personalizado() {

wp_enqueue_style('mi-css-personalizado', get_stylesheet_directory_uri() . '/css/mi-estilo.css');

}

add_action('wp_enqueue_scripts', 'cargar_archivo_css_personalizado');

Para hacer esto sigue los siguientes pasos:

Crea una carpeta /css dentro de tu tema.
Sube tu archivo mi-estilo.css en esa carpeta.
Llama al archivo usando el código anterior en el archivo functions.php.

6. Mediante Page Builders (Elementor, WPBakery, etc.)

Si usas un Page Builder, generalmente hay una sección para agregar CSS personalizado:

En Elementor: Ve a Ajustes del Sitio > CSS Personalizado.
En WPBakery: Usa la seccion Custom CSS en cada página o en la configuración global.

7. Añadir CSS a Widgets con HTML Personalizado

También puedes hacerlo mediante Widgets (por ejemplo, en la barra lateral o el footer):

Ve a Apariencia > Widgets.
Añade un Widget HTML Personalizado.
Incluye tus estilos en un <style> o aplica una clase personalizada.

¿Cuál es la mejor opción?

Si necesitas hacer cambios rápidos: CSS Adicional en el Personalizador.

Si deseas hacer personalizaciones permanentes: Tema Hijo.

Si estás trabajando con un sitio web complejo: Plugins de CSS Personalizado.

¿Qué es el CSS en WordPress?

Es un código que le añadimos a WordPress, para mejora la interfaz del sitio web, este código puede cambiar el color de los encabezados, cambiar el tamaño del texto de los párrafos, establecer un color de fondo, cambiar el tipo de letra, entre otras tareas más.

¿Qué es un CSS personalizado en WordPress?

Es un código que permite cambiar el aspecto de los elementos de una web, por ejemplo cambiar el color de un encabezado h1, cambiar el tamaño de una imagen, etc.

¿Cómo se aplica los CSS en WordPress?

Escribe el nombre de la clase en el editor CSS y aplicales color, tamaño y demás propiedades deseadas, así como te explicamos en la imagen 4 de este tutorial.

Si necesitas agregar código JavaScript personalizado a tu WordPress, puedes leer el tutorial Como Añadir Código JavaScript Personalizado en WordPress.

Conclusión

En este post has aprendido a Cómo Agregar Código CSS Personalizado en WordPress, saber hacer esto te permitirá mejorar la interface de usuario de tu proyecto. En un principio te puede parecer confuso seguir los pasos mencionados, pero conforme práctiques estos 2 métodos o uno de ellos, lograrás familiarizarte con el tiempo y se te hará más fácil.

Nota(s)

No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.