CSS en WordPress: cómo editar el diseño de tu página web

Tienes varias opciones para editar el código CSS en WordPress. Además de poder realizar cambios en la plantilla de diseño o utilizar el Pe­r­so­na­li­za­dor, también hay un gran número de plugins muy re­co­me­n­da­bles entre los que puedes elegir.

Además de los temas de WordPress y las pla­n­ti­llas, WordPress ofrece mediante CSS una he­rra­mie­n­ta es­pe­cia­l­me­n­te im­po­r­ta­n­te y útil que te permite diseñar tu sitio web al completo conforme a tus ideas. CSS (Cascading Style Sheets) está pensado para el diseño de tu presencia online y te permite ajustar el diseño, los colores y la ti­po­gra­fía.

Editar CSS en WordPress puede ser im­po­r­ta­n­te y re­co­me­n­da­ble por varias razones. Mientras que el contenido se define con HTML, CSS se encarga de que dicho contenido se muestre a los vi­si­ta­n­tes de forma atractiva. Ya solo por eso merece la pena saber usar CSS.

Además de las ventajas es­tri­c­ta­me­n­te visuales, CSS también te da la opción de hacer que tu página web sea re­s­po­n­si­va y se pueda optimizar para su vi­sua­li­za­ción en distintos di­s­po­si­ti­vos. Editar el código CSS en WordPress no es nada co­m­pli­ca­do ni supone riesgo alguno gracias a los temas de WordPress.

Dispones de varias opciones para editar CSS en WordPress. Lo más sencillo es trabajar di­re­c­ta­me­n­te con el Pe­r­so­na­li­za­dor o bien co­m­ple­me­n­tar­lo. La mayoría de los pasos ya están definidos y el proceso de edición se rige por unas reglas pre­de­te­r­mi­na­das. Si ya estás más fa­mi­lia­ri­za­do con WordPress y quieres dotar a tu sitio web de un diseño co­m­ple­ta­me­n­te pe­r­so­na­li­za­do, también puedes realizar mo­di­fi­ca­cio­nes di­re­c­ta­me­n­te en la plantilla de diseño o tema de WordPress. Este método es más complejo, pero también te ofrece una mayor libertad. El término medio es utilizar varios plugins de WordPress que permiten editar y pe­r­so­na­li­zar CSS en WordPress. En este caso, las opciones y el nivel de di­fi­cu­l­tad varían en función del proveedor.

Si quieres editar CSS en WordPress di­re­c­ta­me­n­te en tu tema, deberías primero crear un child theme. Por un lado, es el método más seguro y, por otro, evita que las mo­di­fi­ca­cio­nes más complejas se borren al ac­tua­li­zar el tema. Las mo­di­fi­ca­cio­nes más im­po­r­ta­n­tes se realizan en la propia hoja de estilo, que permite integrar CSS en HTML. La forma más fácil de acceder a ella es a través del panel de control. Para ello, no es necesario disponer de programas o editores adi­cio­na­les. Sin embargo, también es posible realizar cambios a través de FTP.

El uso de un plugin es es­pe­cia­l­me­n­te re­co­me­n­da­ble para minimizar el riesgo de pérdida de todos los cambios efe­c­tua­dos en el CSS al cambiar el tema. En la ac­tua­li­dad existen varias he­rra­mie­n­tas adecuadas para este fin, algunas de las cuales también están di­s­po­ni­bles de forma gratuita. A co­n­ti­nua­ción, te pre­se­n­ta­mos algunos plugins es­pe­cia­l­me­n­te buenos.

Simple Custom CSS es pro­ba­ble­me­n­te el mejor plugin que puedes utilizar para editar rápida y fá­ci­l­me­n­te el CSS en WordPress o añadir tu propio CSS. El propio nombre del plugin ya lo dice todo, es­pe­cia­l­me­n­te en lo que se refiere a su co­n­fi­gu­ra­ción y uso. En estos aspectos, el plugin es muy sencillo y, por tanto, fácil de aprender. Las ventajas son muchas, ya que Simple Custom CSS no tiene un impacto negativo en el re­n­di­mie­n­to y gana puntos con la co­m­pro­ba­ción de errores y el resaltado de sintaxis, entre otras cosas. Además, el plugin funciona con todos los temas más comunes.

CSS Hero cuesta 29 dólares al año, es una solución muy completa y a la vez fácil de usar. Esta solución merece la pena si quieres diseñar y adaptar el CSS de WordPress conforme a tus propias ne­ce­si­da­des. Los cambios pueden seguirse en directo y las opciones de diseño pe­r­so­na­li­za­bles son es­pe­cia­l­me­n­te variadas. Por lo tanto, esta he­rra­mie­n­ta es, sin duda, demasiado completa para efectuar cambios pequeños, pero si se quieren modificar muchos detalles con precisión, CSS Hero es la mejor opción. El plugin es co­m­pa­ti­ble con muchos temas.

Si buscas una solución más sencilla para una pe­r­so­na­li­za­ción puntual, Si­teO­ri­gin CSS es una buena opción. El plugin te ofrece la po­si­bi­li­dad de cambiar a un editor visual y así realizar cambios sin tener que recurrir al propio código. Merece la pena tenerlo en cuenta, es­pe­cia­l­me­n­te para los menos versados. Si­teO­ri­gin CSS también funciona con un gran número de temas.

WP Add Custom CSS ofrece ventajas similares a las de Simple Custom CSS, pero lleva el concepto un poco más allá. El plugin no solo te permite editar el código CSS de forma sencilla, sino que también te permite se­le­c­cio­nar y es­pe­ci­fi­car páginas y su­b­pá­gi­nas concretas. De esta forma, los cambios no se realizan de forma general, sino que solamente se llevan a cabo en de­te­r­mi­na­dos casos. Esto se consigue mediante un pequeño metabox que puedes utilizar como co­m­ple­me­n­to a la propia ventana de edición.