Te voy a mostrar las formas más sencillas de añadir código CSS a WordPress. La forma va a variar dependiendo de la versión de tu WordPress y de si estás usando el tema por defecto de WordPress o un tema que hayas instalado tú.
También te voy a mostrar una forma de añadir código CSS a WordPress sin insertar una sola línea de código CSS. ¿No te lo crees?. En el último apartado te lo explico.
ACCEDE A TODOS MIS CURSOS ONLINE POR SOLO 10€/MES
AÑADIR CÓDIGO CSS A WORDPRESS MUY MUY FÁCIL
1.- Cómo añadir código CSS a WordPress fácil si te has instalado un tema
Si NO utilizas el tema que viene por defecto en WordPress, la forma más sencilla de añadir código CSS a WordPress es la siguiente:
i.- Ir al panel de administración: en primer lugar deberás acceder al panel de administración de WordPress.
ii.- Menú lateral: en el menú lateral de WordPress ve a Apariencia > personalizar. Después haz clic en el apartado “CSS adicional”.
iii.- Añadir código CSS: Ya solo te falta añadir el código CSS en el área de texto.
1.1.- Cómo añadir código CSS a WordPress si tu versión es muy antigua
En caso de que estés usando una versión muy antigua de WordPress y no encuentres la opción que te he comentado, utiliza el sistema que te indico en el siguiente apartado.
Puedes usar el sistema del siguiente apartado, o también tienes la opción de buscar si tu tema tiene algún área de texto de CSS Personalizado (Muchos temas de pago lo tienen).
Te pongo algunos ejemplos:
- Tema Divi: ve a “Divi > opciones del tema > Pestaña “General”. Busca el apartado “CSS Personalizado”
- Tema Flatsome: ve a: “Flatsome > Advanced” haz clic en “Custom CSS”. Introduce el código CSS en el área de texto “All screens”
2.- Cómo añadir código CSS a WordPress fácil si usas el tema por defecto
Si utilizas el tema por defecto en las versiones más modernas de WordPress verás que no te aparece la opción que vimos en el apartado 1) “Apariencia > personalizar > CSS Adicional”. Esto es debido a la incorporación que está haciendo wordpress al diseño global de sitio.
Si este es tu caso, la forma más fácil de añadir código CSS será a través de un plugin gratuito.
Aquí te pongo 3 opciones:
👉Simple Custom CSS and JS (by SilkyPress.com)
El que más descargas tiene.
Este plugin te servirá para añadir código CSS (También permite añadir JS)
👉Simple Custom CSS Plugin (por John Regan)
El segundo que más descargas tiene.
Te servirá para añadir fácil código CSS
👉Post/Page specific custom CSS (by Lukasz Nowicki)
Este plugin es interesante si quieres añadir CSS pero NO en todo el sitio web (no de manera global). Sino que quieres añadir CSS solo en algún o algunos post o páginas específicas.
3.- Cómo insertar código CSS sin añadir código CSS
Parece una contradicción ¿verdad?
A lo que me refiero es que con este plugin podrás realizar modificaciones de diseño de tu web sin tener que añadir una sola línea de código CSS.
Todo lo harás de manera visual. Tú solo tendrás que elegir dónde y qué color quieres añadir, que tipo de fuente, que tamaño, etc. Y el plugin generará el código CSS y lo insertará por ti.
El plugin se llama CSS Hero. Es un plugin de pago, pero muy económico. Te puede venir como anillo al dedo, si no tienes mucha idea de código CSS.
IR AL PLUGIN CSS HEROEn este vídeo puedes ver CSS HERO en acción:
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
