Cómo agregar fácilmente CSS personalizado a su sitio de WordPress

A veces puede que necesites añadir CSS personalizados en tu sitio de WordPress. Quizás es porque estás siguiendo un tutorial sobre AprenderWP. Si el uso de FTP es demasiado confuso, entonces hay una manera más fácil de añadir CSS en su sitio. En este artículo, le mostraremos cómo agregar CSS personalizado a su sitio WordPress sin editar ningún archivo de tema.

Video Tutorial

Suscribirse a AprenderWP

Si no te gustan los tutoriales en vídeo o quieres moverte a tu propio ritmo, sigue leyendo las instrucciones a continuación.

Método 1: Añadir CSS personalizado utilizando el Personalizador de temas

Desde WordPress 4.7, los usuarios ahora pueden añadir CSS personalizados directamente desde el área de administración de WordPress. Esto es súper fácil y podrá ver sus cambios con una vista previa en vivo al instante.

Vaya a Temas » Personalizar página.

Esto iniciará la interfaz del personalizador de temas de WordPress.

Verá la vista previa en vivo de su sitio con un montón de opciones en el panel izquierdo. Haga clic en la pestaña CSS adicional en el panel izquierdo.

La pestaña se deslizará para mostrarle un cuadro sencillo donde puede agregar su CSS personalizado. Tan pronto como añada una regla CSS válida, podrá verla aplicada en el panel de vista previa en vivo de su sitio web.

Puede continuar añadiendo código CSS personalizado, hasta que esté satisfecho con el aspecto de su sitio.

No olvides hacer clic en el botón «Guardar y publicar» en la parte superior cuando hayas terminado.

Nota: Cualquier CSS personalizado que añada utilizando el personalizador de temas sólo está disponible con ese tema en particular. Si desea utilizarlo con otros temas, deberá copiarlo y pegarlo en el nuevo tema utilizando el mismo método.

Método 2: Añadir CSS personalizado utilizando un plugin

Este método requiere la instalación de un plugin. Es particularmente útil para los usuarios que no utilizan WordPress 4.7 o versiones posteriores de WordPress.

Lo primero que debe hacer es instalar y activar el plugin Simple Custom CSS. Una vez activada, simplemente vaya a Apariencia » CSS Personalizado y escriba o pegue su CSS personalizado.

No olvide pulsar el botónActualizar CSS personalizado para almacenar su CSS.

Ahora puede ver su sitio web para ver el CSS personalizado en acción.

Nota: Otra ventaja de usar este método es que su CSS personalizado estará disponible incluso cuando cambie el tema.

Uso de un plugin CSS personalizado frente a la adición de CSS en el tema

Ambos métodos descritos anteriormente son recomendables para principiantes. Los usuarios avanzados también pueden añadir CSS personalizados directamente a sus temas.

Sin embargo, no se recomienda añadir fragmentos de CSS personalizados al tema principal. Los cambios en tu CSS se perderán si accidentalmente actualizas el tema sin guardar los cambios personalizados.

El mejor enfoque es usar un tema infantil en su lugar. Sin embargo, muchos principiantes no quieren crear un tema infantil. Aparte de añadir CSS personalizados, realmente no saben cómo van a usar ese tema hijo.

El uso de un plugin de CSS personalizado le permite almacenar su CSS personalizado independientemente de su tema. De esta manera puede cambiar fácilmente de tema y su CSS personalizado seguirá allí.

Otra gran manera de añadir CSS personalizado a su sitio WordPress es usando el plugin CSS Hero. Este maravilloso plugin te permite editar casi todo en tu sitio WordPress sin tener que escribir una sola línea de código.

Esperamos que este artículo haya ayudado a añadir css personalizados a su sitio de WordPress. También puedes ver cómo nuestra guía sobre cómo crear un plugin de WordPress específico para el sitio para almacenar tus fragmentos de código personalizado.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.

Deja un comentario