¿Cómo personalizar el CSS de su sitio web WordPress? Descúbrelo en este artículo.

No importa qué tema de WordPress elija para su sitio web, habrá otros sitios web que lo utilizarán. E incluso a pesar de las muchas opciones de personalización que ofrecen muchos Temas de WordPress hoy en día puede hacer que su sitio web sea aún más único.

Para realmente Para tocar el aspecto visual de tu tema de WordPress, debes ir más allá de la personalización estándar que ofrecen las opciones o configuraciones de un tema de WordPress. La personalización CSS de tu blog de WordPress te permitirá modificar elapariencia de su sitio web para hacerlo verdaderamente único.

Este tutorial analizará la variedad de métodos disponibles para personalizar su sitio web con CSS, creando y personalizando temas secundarios, utilizando complementos integrados de WordPress Customizer y plugins de WordPress de CSS.

Pero antes de comenzar, tómese el tiempo para echar un vistazo a Cómo instalar un tema de WordPress, ¿Cuántas plugins debería instalar en WordPress.

Entonces descubran juntos nuestra lista.

CSS: los conceptos básicos y cómo los usa WordPress

En primer lugar: CSS significa Hojas de Estilo en Cascada, que no es más claro que el acrónimo. Entonces, analicémoslo.

Una hoja de estilo es un documento que describe estilos (tales como tipo de letra, colores, etc..) que se utilizará para la presentación de otro documento. En nuestro caso, se trata de un estilo de las páginas web.

La parte "en cascadaEl nombre es parte de lo que lo hace verdaderamente poderoso. Las páginas web se pueden diseñar con varias hojas de estilo, como una cascada en cascada, con la hoja inferior agregando o reemplazando estilos de un nivel superior. Esto es importante porque la forma en que agrega sus estilos sobrescribirá los cambios originales.

Tan simple como parece, CSS se puede usar para cambiar casi cualquier cosa en una página web (incluyendo diseño, colores, fuentes e incluso animaciones).

Aprenda a administrar sus notificaciones descubriendo Cómo administrar las notificaciones de correo electrónico en WordPress

La mayoría de las Temas de WordPress use un código CSS disponible en un archivo llamado style.css. Si abre este archivo, verá una lista completa de reglas de estilo para su tema de WordPress. Hagas lo que hagas ¡No modifique este archivo! Las actualizaciones sobrescribirán sus cambios.

Hay varias formas de agregar un código CSS personalizado a su tema de WordPress para que sus cambios sobrevivan a una actualización del tema de WordPress.

Cómo personalizar su sitio web de WordPress con CSS

Ahora que comprende mejor qué es CSS y cómo Temas de WordPress Úsalos, veremos las opciones que puedes usar para personalizar tu blog de WordPress y discutiremos los pros y los contras de cada método.

Al final de nuestro trabajo, podrá determinar qué método corresponde a su tema de WordPress.

Opción # 1: Personaliza CSS usando un tema secundario

Si utiliza un el tema de los niños Para personalizar su código CSS, las actualizaciones de los temas de los que hablamos antes ya no serán un problema. Una actualización de un tema de WordPress afectará al tema " con el futuro bebé», Dejando intactos los cambios en el tema de su hijo. Muchos desarrolladores de temas de WordPress entienden la utilidad de un tema hijo.

Descubre ¿Cuándo y cómo instalar WordPress en un subdirectorio

Crear un tema hijo es bastante sencillo. Consiste en crear una carpeta en su alojamiento web que incluye un archivo style.css que enumera el tema principal como plantilla e importa el archivo style.css del tema principal¿Recuerda el significado de las hojas de estilo en cascada?).

El Codex de WordPress tiene más información sobre la creación de temas secundarios.

Una vez que haya creado su tema hijo y lo haya activado correctamente, puede comenzar a personalizar su tema de WordPress. La forma más rápida será editar su archivo style.css, al que se puede acceder de dos maneras.

Mira este artículo para descubrir Cómo comprimir tus archivos CSS, HTML y Javascript

La primera es utilizar el editor incluido en el panel de WordPress, haciendo clic en Apariencia> Editor. L 'editor muestra una lista de archivos a la derecha disponibles en el tema (Solo se muestran los archivos populares). Su archivo style.css estará al final de la lista, y al hacer clic en la opción hoja de estilo votre fichier style.css cobrará

Puede agregar sus cambios a esta ubicación y guardar el cambio.

La otra forma de acceder a su archivo style.css (que recomendamos) es buscar los archivos en su alojamiento web a través de un cliente FTP o un administrador de archivos. La carpeta del tema secundario que creó estará en el " wp-content> temas« . Podrá usar un editor de texto para editar el archivo style.css.

Opción n ° 2: personalizar el CSS desde el Personalizador

A partir de WordPress 4.7, los usuarios pueden agregar CSS personalizado directamente desde el área de administración de WordPress. Es muy fácil y podrá ver sus cambios con una vista previa en tiempo real.

Primero, debes dirigirte a la página Temas »Personalizar.

Esto iniciará la interfaz de personalización del tema de WordPress.

Verá la vista previa en tiempo real de su sitio web a la derecha 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 área simple donde puede agregar su CSS personalizado. Tan pronto como agregue una regla CSS válida, podrá verla aplicada en el panel de vista previa en tiempo real de su sitio web.

Puede continuar agregando código CSS personalizado, hasta que esté satisfecho con cómo se ve en su sitio web. No olvide hacer clic en el " Guardar y publicar En la parte superior cuando haya terminado.

Nota: Cualquier CSS personalizado que agregue usando el Personalizador solo está disponible con ese tema de WordPress en particular. Si desea usarlo con otros temas, deberá copiar y pegar en su nuevo tema usando el mismo método.

Opción # 3: Personalice CSS usando un complemento

La ventaja de usar un complemento para la personalización de CSS es que conserva el complemento incluso si realiza un cambio en el tema de WordPress. Esto tiene sus ventajas y desventajas, ya que los estilos no se pueden mostrar bien en todos los temas de WordPress.

Aquí hay algunos plugins:

1. CSS personalizado en Jetpack (gratis)

El plugin de WordPress jetpack  está instalado en más de un millón de sitios web de WordPress, y probablemente también en el tuyo. Trae características disponibles en WordPress.com para sitios web autohospedados, y también ofrece un Módulo para la personalización CSS.

Una vez que el módulo esté activado en el panel de Jetpack, estará disponible un editor CSS personalizado, que le permitirá personalizar su tema de WordPress sin crear un tema hijo. Se accede al editor siguiendo esta ruta " Apariencia> Editar CSS« .

2. CSS personalizado simple (gratuito)

Si por el contrario desea una opción independiente, Simple CSS personalizado Es una buena elección. Este complemento gratuito, utilizado en más de sitios web de 200.000 con una calificación de estrellas 4,9, definitivamente lo ayudará a personalizar su blog CSS WordPress.

Este complemento no requiere ninguna configuración, solo necesita instalar y activar el complemento. Para modificar su código CSS, vaya a " Apariencia> CSS personalizado«  en el panel de WordPress. Aplique sus cambios de CSS en el cuadro de texto y, una vez que haya terminado, guarde la configuración.

3. CSS Hero (desde $ 14 por año)

La última opción de complemento de WordPress que estamos viendo hoy es un complemento premium de WordPress llamado CSS héroe. Desde 14 $ por año para un sitio web, este complemento le permite personalizar su tema de WordPress utilizando una interfaz intuitiva.

Diseñado para funcionar mejor con docenas de temas compatibles de WordPress , CSS Hero te da control total sobre todos los elementos de tu tema de WordPress. Para los temas que no están en su lista, puede usar el la moda de cohetes para habilitar la personalización de CSS Hero.

CSS Hero elimina la necesidad de comprender la sintaxis CSS al simplificar la interacción con el código a través de una interfaz, y esto se aplica a las animaciones y transiciones. También puede obtener una vista previa de sus cambios en tiempo real y volver a una versión anterior.

Descubrir Cómo mover comentarios de un artículo a otro en WordPress

Si desea cambiar completamente el CSS de su blog de WordPress, pero no desea aprender CSS, CSS Hero es una excelente opción para personalizar su sitio web, especialmente si está utilizando uno de sus temas de WordPress.

Sin embargo, aunque sabe que el contenido es importante, querrá que su sitio web se destaque entre la multitud, incluso si está utilizando un tema popular de WordPress. Con CSS, puede personalizar el diseño de su sitio web para que sea completamente único.

Ve más allá descubriendo Cómo permitir a los usuarios editar determinadas páginas

Por lo tanto, hay varias formas de personalizar el CSS de su tema de WordPress:

1. Un tema infantil.
2. el personalizador.
3. Plugin de CSS.

Descubre también algunos complementos premium de WordPress  

Puedes usar otros plugins de WordPress para dar una apariencia moderna y optimizar el manejo de tu blog o sitio web.

Aquí le ofrecemos algunos complementos premium de WordPress que lo ayudarán a hacerlo.

1. Publicidad publicitaria

WP PRO Advertising System es un complemento de gestión de publicidad de WordPress, que ofrece ubicaciones estratégicas de 18 para ayudarlo a mostrar anuncios en su sitio web. También tiene una sección de estadísticas detalladas desde la cual verá el rendimiento de cada anuncio.

Esta característica es crucial porque lo ayudará a mejorar su campaña y maximizar sus ganancias. Este complemento de WordPress Adsense también viene con una característica única llamada anuncios de fondo. Le permite mostrar anuncios como fondo de su contenido.

Además, dado que es compatible con complementos como WPBakery et Slider Revolution, puede mostrar sus anuncios en forma de controles deslizantes o colocarlos en cualquier lugar de su sitio web.

Descargar | Demo | alojamiento web

2. WP Media File Manager

WP Media File Manager es un complemento de WordPress que facilita la organización de la biblioteca de medios en una forma de jerarquía, utilizando la funcionalidad de arrastrar y soltar. Es uno de plugins de WordPress el administrador de archivos más potente de CodeCanyon. Ni siquiera necesitarás crear carpetas manualmente.

Este complemento de WordPress le permite cargar miles de archivos desde el administrador de archivos de su PC al sitio web copiando automáticamente la jerarquía de la carpeta de origen. Si desea tener el mismo archivo en diferentes carpetas, sepa que ahora tiene una biblioteca multimedia real que brinda esta funcionalidad.

Dile adiós a los problemas para descargar tipos de archivos específicos, ahora solo tienes que instalar este complemento de WordPress y dejar que te ayude a administrar tus archivos.

Descargar | Demo | alojamiento web

3. héroe menú

Hero Menu es un complemento de WordPress de mega menú. Y aunque no es mucho heroico, tiene todas las funciones necesarias por solo $ 19. Un poco como Mega Main Menu, es un complemento que también presenta productos que aparecen en CodeCanyon y tiene casi 4500 ventas en su haber en este momento.

En la sección de características, se dará cuenta rápidamente de que es bastante fácil crear un megamenu. El proceso solo toma unos pocos pasos. Pero además, notará que el complemento es compatible con WooCommerce, ofrece un diseño receptivo y una interfaz de "arrastrar y soltar" para crear los menús.

El creador de menús mejora el uso del complemento y simplifica enormemente el trabajo del comprador. La integración de la interfaz de usuario también es un gran trabajo y la interfaz de usuario se comporta perfectamente con otros complementos.

Descargar | Demo | alojamiento web

Recursos recomendados

Conozca otros recursos recomendados para ayudarlo a construir y administrar su sitio web.

• Cómo proteger con contraseña un formulario en WordPress
• Cómo crear hermosas transiciones de páginas en WordPress
• Cómo usar la API REST de WordPress
• Cómo asociar su sitio web de WordPress con Telegram
• Cómo limpiar WordPress en unos pocos pasos.

Conclusión

Aquí! Eso es todo por este tutorial. Esperamos que este tutorial le haya mostrado cómo personalizar el CSS de su sitio web de WordPress. No dude en comparte con tus amigos en tus redes sociales favoritas. 

Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress.

Si tienes sugerencias o comentarios, déjalos en nuestra sección comentarios.

...