Si quieres conocer el mejor método para añadir CSS en WordPress has llegado al lugar indicado. Sigue leyendo y conocerás varias técnicas, sus pros y contras y cuál y por qué es la mejor de ellas.
Para un desarrollo web WordPress profesional siempre aconsejamos disponer de los conocimientos técnicos suficientes o, al menos, saber cómo contratar un diseñador web suficientemente profesional.
Índice de Contenido
¿Se puede añadir CSS personalizado en WordPress?
Claro que sí. De hecho es más que recomendable para optimizar tiempos de carga. También hay que tener en cuenta que cada web es un mundo, por lo que es imposible que el CSS por defecto de nuestro WordPress, o de la plantilla que estemos usando, sea 100% compatible con cada web. Personalizar nuestro CSS evitaría este y muchos otros problemas.
Por qué añadir CSS a medida en WordPress
Como ya se ha dicho, al añadir código personalizado podremos optimizar tiempos de carga, pero no solo eso, uno de los mayores problemas si no editamos nuestro código CSS es que nuestra web no sea totalmente responsive (adaptable a todos los dispositivos). Hoy en día existe una gran cantidad de páginas hechas en WordPress. Su facilidad de uso también hace que exista mucho escombro en internet.
Cómo añadir CSS en WordPress
Te presento 5 modos diferentes de añadir CSS personalizado, con sus pros y contras.
Modo común para editar CSS en WordPress
WordPress cuenta con herramientas nativas para que podamos editar nuestro CSS de forma rápida y sencilla. Para hacer esto solo tendremos que dirigirnos a nuestro panel de control y hacer clic en Apariencia/Personalizar. Una vez estemos en el editor nativo veremos un menú a la izquierda, abajo del todo encontraremos la pestaña CSS adicional. Solo tendremos que escribir el código que deseemos y hacer clic en publicar.
- Pros: Facilidad y rapidez de edición. Contaremos con edición en vivo. No es necesario tocar nada de código PHP o nativo de WordPress.
- Contras: Estaremos sobreescribiendo código por lo que ralentizaremos el tiempo de carga de nuestra web
Mejor modo para añadir CSS personalizado en WordPress
Desde nuestro punto de vista no hay lugar a dudas, este es el mejor método para incluir nuestro CSS en WordPress. Eliminaremos todo el código por defecto y llamaremos al código en el “above the fold” con el hook “wp_head” y el código restante con “wp_footer”.
- Pros: Tiempo de carga del CSS inmejorable
- Contras: Son necesarios unos conocimientos medio/avanzados de desarrollo en WordPress
Si te interesa saber cómo implementar el mejor modo para añadir CSS personalizado, y así trabajar el WPO, continúa hasta la sección final de este artículo, allí lo explico todo al detalle.
Editando el archivo style.css
Ya sea que tengamos activo el tema predeterminado o un tema hijo contaremos con un archivo style.css para añadir el código de los estilos. Para acceder a este archivo podremos hacer clic en Apariencia/Editor de archivos de temas. Una vez que estemos dentro del editor debemos asegurarnos que, a la derecha, está seleccionada la pestaña style.css. Ahora solo tendremos que añadir nuestro código y hacer clic en Actualizar nuestro archivo.
- Pros: Facilidad de implementación,mayor organización del código
- Contras: Se requieren conocimientos medios ya que no existe edición en vivo. Aunque se mejora la carga algo más que en el punto anterior, aún seguimos sobreescribiendo el código CSS por defecto
Plugins para añadir CSS adicional en WordPress (No se recomienda)
Aunque me parece un tanto peculiar, existen plugins para añadir CSS. La verdad es que existiendo una herramienta como el editor nativo o el archivo style.css no entiendo la funcionalidad de estos plugins. Pero bueno, había que mencionarlo.
- Pros: Tenemos acceso directo a través de una pestaña nuestro panel de control
- Contras: Muchas, muchas contras. Machacamos código, ralentizamos mucho más el tiempo de carga (ya que existirán muchos más elementos que cargar), etc.
Algunos ejemplos de plugins para añadir CSS en WordPress son:
- WP Coder
- Simple Custom CSS and JS
- WP Add Custom CSS
- Simple CSS
Método tradicional para enlazar un archivo de CSS en WordPress
La estructura de WordPress está diseñada para añadir nuevos archivos CSS de este modo. Aunque es verdad que en algunos aspectos no es el mejor método, no está de más conocerlo. Según la documentación de WordPress, en estos casos es mejor usar la función wp_enqueue_style. Esta función suele usarse dentro del hook wp_enqueue_scripts del siguiente modo:
function webheroe_estilo_externo() {
wp_register_style( 'mis_estilos', get_stylesheet_directory_uri().'/mis_estilos.css' );
wp_enqueue_style( 'mis_estilos' );
}
add_action( 'wp_enqueue_scripts', 'webheroe_estilo_externo' );- Pros: Organización y naturalidad al desarrollar al “estilo de WordPress”. En caso que cualquier desarrollador necesite trabajar en nuestra web, le será muy fácil encontrar nuestro archivo
- Contras: Unos conocimientos medios en desarrollo de WordPress son esenciales
- Tip para este método: Si queremos optimizar un poquito la carga podremos evitar el uso de hooks y enlazar directamente el archivo mediante código HTML en nuestro archivo header.php. Solo habría que añadir el siguiente código entre las etiquetas <head></head>:
<link rel=»stylesheet» href=»camino/hasta/nuestro/archivo/estilos.css»>
Personalizando al 100% nuestro código CSS en WordPress (Recomendado)
Algo importante a tener en cuenta es que el consumo de recursos al personalizar tanto nuestra web es mucho mayor. Esto es debido al tiempo invertido cada vez que queremos corregir, modificar o añadir contenido.
Si sabemos cómo hacer mantenimiento en WordPress, no es difícil llegar a la conclusión de que este proceso llevará más tiempo,.
Para poder realizar este método lo primero que tendremos que hacer es eliminar el código CSS por defecto. Podéis revisar un artículo de este blog donde explico cada paso para hacer esto. Después tendremos que decidirnos por una de las 2 posibilidades:
- Incrustar un solo archivo CSS que afecte a todas las páginas de la web
- Crear archivos independientes que afecten a páginas independientes o a grupos de plantillas (Page Templates)
En esta ocasión voy a centrarme en el segundo punto ya que evitaremos cargar código innecesario en muchas páginas.
Añadir CSS en WordPress dependiendo de qué página se cargue
Tendremos que seguir los siguientes pasos:
- Hacer un esquema de páginas y grupos de páginas a las que afectará cada archivo
- Obtener los IDs de cada página o el nombre del page-template.php para atacar un grupo de páginas
- Dividir nuestro código CSS en 2 grupos
- Above the Fold
- Resto de la página
- Crear un archivo pilar desde donde enlazar cada página con su respectivo CSS. Y usando un único hook
Quizá el modo más organizado de implementar todo esto es a través de un plugin personalizado. Así que pongámonos manos a la obra:
Crear Plugin personalizado para cargar CSS dependiendo de qué página se visualice
1. Creamos la estructura de archivos del plugin
Antes que nada debemos considerar qué grupos de páginas usan el mismo CSS, o casi. He añadido este “o casi” porque, si hay pocas diferencias, quizá sea más rentable añadir ese poco código extra en el mismo archivo.
En este ejemplo vamos a atacar 4 páginas diferentes en las que 2 de ellas están añadidas mediante un page-template. Por lo que habría que crear el plugin con la siguiente estructura de archivos:
wh_css_personalizado.php
/styles
st_inicio_head.php
st_inicio_footer.php
st_contacto_head.php
st_contacto_footer.php
st_plantilla1_head.php
st_plantilla1_footer.phpEl archivo wh_css_personalizado.php es el que hará que se reconozca el plugin y, al ser un plugin con un mecanismo relativamente simple, podremos meter todo el código ahí.
2. Obtenemos los IDs de cada página o el nombre del archivo page template
El ID o el nombre del archivo page template es lo que nos permitirá especificar qué páginas se verán afectadas por cada archivo de estilos. Como ejemplo diremos que los identificadores son:
- inicio = ID 3
- contacto = ID 7
- página1 = custom_template.php
- página2 = custom_template.php
3. Dividimos nuestro código CSS
Ahora es el turno de trabajar los estilos. Como ya hemos eliminado todo el código CSS por defecto nuestra web tendrá una apariencia desordenada y antiestética. Podemos usar el mismo navegador para ir trabajando los estilos.
Lo importante aquí es tener bien definido cuál es el bloque de contenido que se verá tras la carga de la página, tanto en móvil como en desktop. Una solución sencilla en Gutenberg sería agrupar la sección superior de cada página y reconocerla mediante un selector CSS de tipo ID.
Una vez tengamos todo el código CSS de la parte superior (Above the Fold), lo colocaremos en el archivo de estilos “head” correspondiente. Y el resto de código CSS lo añadiremos en el archivo de estilos “footer”.
En este ejemplo deberíamos añadir el código CSS de “página1” y “página2” como si fuese una página única. Esto es porque vamos a cargar los archivos a partir del page-template, y este agrupa estas 2 páginas.
Este sería un ejemplo de archivo para la parte superior:
<style>
#parte_superior{
background-color: aqua;
}
</style>Y este un ejemplo de archivo para el resto de código CSS:
<style>
#main{
font-size: 15px;
}
footer{
background-color: orange;
}
</style>4. Configuramos el archivo pilar
Para cargar los archivos CSS de un modo coherente y dependiendo de qué página se esté renderizando podremos crear un archivo pilar con lo siguiente:
- 1 función enganchada al hook wp_head para cargar los estilos del Above the Fold
- 1 función enganchada a wp_footer para cargar el resto de estilos
- Cada una de esas funciones contendrá varios condicionales comprobando qué página es en la que está el visitante. Si el condicional devuelve “true” se añadirá un require del archivo correspondiente.
Este también será el archivo que hará reconocer el plugin, por lo que tendremos que añadir los comentarios para que WordPress lo identifique. Al final, el archivo sería algo que así:
<?php
/**
* Plugin Name: WebHeroe CSS
* Plugin Uri: https://webheroe.com/la_pagina_del_plugin
* Description: Un plugin para optimizar la carga de código CSS
* Author: Álvaro Torres
* Author URI: https://webheroe.com/
* Version: 1.0
* License: GPLv2 or later
* Text Domain: whc
*/
function webheroe_above_estilos(){
// Estilos del Above the Fold para página de inicio.
if ( is_page(3) ) {
require_once dirname(__FILE__) . '/styles/st_inicio_head.php';
}
// Estilos del Above the Fold para página de contacto.
if ( is_page(7) ) {
require_once dirname(__FILE__) . '/styles/st_contacto_head.php';
}
// Estilos del Above the Fold para grupo de páginas con page-template.
if ( is_page_template( 'custom_template.php' ) ) {
require_once dirname(__FILE__) . '/styles/st_plantilla1_head.php';
}
}
add_action( 'wp_head', 'webheroe_above_estilos' );
function webheroe_resto_estilos(){
// Resto de estilos para página de inicio.
if ( is_page(3) ) {
require_once dirname(__FILE__) . '/styles/st_inicio_footer.php';
}
// Resto de estilos para página de contacto.
if ( is_page(7) ) {
require_once dirname(__FILE__) . '/styles/st_contacto_footer.php';
}
// Resto de estilos para grupo de páginas con page-template.
if ( is_page_template('custom_template.php') ) {
require_once dirname(__FILE__) . '/styles/st_plantilla1_footer.php';
}
}
add_action( 'wp_footer', 'webheroe_resto_estilos' );Como podemos ver es súper sencillo. Y créeme, en cuanto a WPO marca la diferencia.