Cómo añadir tu propio código CSS en WordPress

Hay veces que necesitas añadir código CSS en tu sitio web desarrollado con WordPress. Es posible que lo debas hacer porque estás siguiendo algún tutorial de nuestra web. Para muchos usuarios, hacerlo mediante un cliente FTP es demasiado confuso pero, afortunadamente, hay métodos mucho más sencillos de añadir código CSS en WordPress. En este artículo, veremos cómo añadir tu propio código CSS en WordPress sin necesidad de editar los ficheros del theme que tienes actualmente instalado.

Método 1: Añadir tu propio código CSS utilizando el Personalizador de Temas

Desde la versión 4.7 de WordPress, los usuarios pueden añadir código CSS directamente desde el área de administración. Es súper sencillo y podrás ver los cambios automáticamente en una preview que el propio WordPress te proporciona.

Para ello ve a Apariencia >> Personalizar. La última de las secciones que te ofrece el personalizador de temas de WordPress (en el lateral izquierdo), es la de insertar CSS adicional. Si entras dentro verás una campo de texto grande en el que podrás añadir tu propio código CSS. Solo tendrás que ingresar las reglas que quieras reflejar en tu diseño, para verlas aplicadas en la preview de la zona derecha de la pantalla.

código CSS

Una vez estés satisfecho con el código, no olvides pulsar el botón de Guardar y Publicar.

Ojo, el código que añadas mediante el personalizador solo estará disponible en el tema que estés utilizando actualmente. Si quieres utilizar dicho código en otros temas, tendrás que copiarlo y pegarlo en el nuevo tema utilizando el mismo método.

Método 2: Añadir tu propio código CSS mediante un plugin

Este método requiere que instales un plugin, así que lo primero que tienes que hacer es instalar y activar Simple Custom CSS. Para ello, ve a la sección Plugins del backoffice de tu WordPress y selecciona la opción de Añadir Nuevo. En la página de Añadir Nuevo Plugin, busca el plugin que queremos instalar haciendo uso del campo de búsqueda que se sitúa en la parte superior derecha de la página.

También te puede interesar: Cómo minimizar archivos de CSS y Javascript en WordPress

Teclea el nombre del plugin (que como te hemos indicado es “Simple Custom CSS”) y presiona ENTER para iniciar la búsqueda. Si has seguido los pasos al pie de la letra, este plugin te debería aparecer como el primer resultado de la búsqueda. Instálalo y actívalo para poder utilizarlo.

Una vez activado, ve a Apariencia > Custom CSS e introduce tu propio código CSS en la caja grande de texto. Lo mejor de este plugin es que te colorea la sintaxis del código para que el hecho de diseñar sea mucho más sencillo.

código CSS

Una vez termines, no olvides hacer clic en el botón Update Custom CSS para guardar los cambios. Ahora visita la parte pública de tu web para ver los cambios en acción.

Otra ventaja de utilizar este método es que el código CSS que insertes en este plugin, estará disponible también cuando cambies de tema.

Utilizar un plugin VS Añadirlo en el tema

Ambos métodos descritos antes son totalmente recomendados para novatos. Los usuarios avanzados pueden utilizar otra técnica, la de añadir el código CSS directamente en sus temas.

De todas maneras, no recomiendo añadir código CSS en el tema padre. El código que se introduzca se perderá cuando se actualice el tema, por lo que el usuario tendrá que volver a introducirlo una vez más.

Lo mejor es utilizar un tema hijo para ello. Sé que muchos sois recelosos a abrazar esta opción, pero sinceramente, creédme que es la mejor. Los temas hijo o child themes te proporcionan múltiples beneficios, y este, el de poder añadir código sin que sea eliminado al actualizar, es uno de ellos.

El hecho de utilizar un plugin para insertar código CSS propio, te permite almacenar el CSS de forma independiente al tema. De esta manera puedes cambiar de tema sin miedo a perder el CSS que hayas insertado.

También te puede interesar: Cómo insertar fácilmente animaciones CSS en WordPress

Y hasta aquí nuestro artículo sobre cómo añadir tu propio código CSS en WordPress. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. El artículo ha sido extraido de WPBeginner, y el icono de la imagen destacada es obra de Mohamed Mbarki. ¡Nos leemos!

 

Dejar respuesta

Please enter your comment!
Please enter your name here