Ya sabéis que el código CSS nos ayuda a los que nos dedicamos al desarrollo y diseño de sitios web a personalizar la apariencia de la interfaz de nuestra plataforma. Si no conocías este tipo de lenguaje de diseño, te animo a que te sumerjas en este tema ya que si eres administrador de un sitio web desarrollado con WordPress te puede resultar la mar de útil. Aun así, es muy posible que te hayas topado con algo de CSS si lees nuestros artículos asiduamente.
Resumiendo, si necesitas añadir tu propio código CSS en WordPress hay múltiples opciones para llevarlo a cabo y en este artículo exploramos algunas de ellas.
Añadir tu código CSS mediante el personalizador de temas
Fue en la versión 4.7 de WordPress cuando se añadió la opción de añadir código CSS desde el backoffice de WordPress, concretamente desde el Personalizador de temas. Quizás una de las grandes ventajas de utilizar el Personalizador de temas de WordPress es que los cambios que se realicen, ya sea a través de la interfaz o mediante la sección para agregar código CSS, se pueden ver en tiempo real gracias a la preview que se muestra en la zona derecha de dicha sección.
Para acceder al Personalizar debes ir a la zona de administración de tu sitio web y entrar en Apariencia > Personalizar mediante el menú lateral izquierdo. Como he comentado antes, el Personalizador de temas cuenta con una opción para añadir tu propio código CSS en el menú CSS Adicional. Una vez entres, verás una caja de texto grande en la que tendrás que introducir las distintas reglas de CSS que quieres aplicar en tu sitio web.
Cuando estés satisfecho con los cambios (ojo, puedes verlo en tiempo real en la preview de la derecha), pulsa 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.
Añadir tu código CSS mediante el personalizador de temas
Para llevar a cabo este método es necesario que instales y actives el plugin 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.
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 código CSS en la caja grande de texto. Lo mejor de este plugin es que te remarca con colores la sintaxis del código para que diseñar tu sitio web sea mucho, pero mucho más sencillo. Es decir, mediante esta función es más dificil el entender e interpretar el código por el usuario.
Cuando hayas terminado, pulsa 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.
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. ¡Nos leemos!
Icono: Mohamed Mbarki
