Instalar WordPress

Guía de Instalación

Optimizar WordPress

Optimización y Velocidad

Seguridad de WordPress

Guía de Protección

Métodos de personalizar y editar CSS en WordPress

Métodos para Personalizar y Editar CSS en WordPress

En el mundo de WordPress existen muchos temas que vienen con un diseño muy atractivo para usar en tu sitio web, con un panel de opciones para personalizar la apariencia, sin embargo casi siempre encuentras algo que deseas editar algo en el estilo para que se adapte a las necesidades de tu sitio web. En WordPress hay varios métodos que puedes usar para personalizar y editar CSS de tu tema, los cuales te detallaremos en este tutorial.

Editar CSS en WordPress

Los temas en WordPress son la forma estándar y clásica de presentar y estilizar el contenido de un sitio web. Hoy en día encontramos un gran número de temas tanto gratuitos en el repositorio oficial de temas como premium que se venden en los marketplaces.

Todos los temas de WordPress necesitan un archivo style.css para estilizar los elementos de HTML para que funcionen (los temas), pero además, otros temas en su mayoría pagados, incluyen todo un panel para personalizar los colores, fuentes, párrafos, entre otros.

No obstante, a menudo encontramos detalles pequeños que nos gustaría editar para darle una forma que nos parezca más atractiva o ajustada. Por es es muy probable que necesites editar CSS de tu WordPress para conseguir el efecto deseado.

En WordPress hay varias formas que te permiten añadir o editar CSS en tu sitio web. Por eso en este tutorial te vamos a asistir para descubrir los métodos más comunes y prácticos para editar CSS en WordPress.

Método 1 : Editar CSS con el Personalizador

El personalizador de WordPress es una característica presente desde la versión 3.4. Es un conjunto de opciones que te permiten personalizar la apariencia general de tu tema, y editar los componentes que aparecen en tu sitio web.

Cada instalación de WordPress viene un un submenú en Apariencia → Personalizar donde encontrarás toda la gama de opciones y facilidades para editar la apariencia de tu tema.

Editar CSS en el CSS adicional del personalizador de WordPress

Cuando accedes al personalizador de WordPress, en la parte inferior aparece un enlace de “CSS adicional” que una vez das clic ahí, aparece un mini editor de hojas de estilo, que te permite insertar cualquier código CSS y ver el cambio de forma casi instantánea.

El editor de CSS del personalizador de WordPress ha conocido una mejoría considerable a lo largo de su vida. Puede intepretar código CSS con un autocompletado bastante eficaz y rápido, además puede detectar cualquier error en el código de forma instantánea, para que lo corrijas.

El personalizador es la primera opción y más recomendable método para editar CSS o añadir nuevo código de estilo a WordPress de forma fácil y rápida, viendo los resultados de forma inmediata.

Método 2 : Editar CSS con Plugin

Los plugins son una de la características más famosas de WordPress. Con la gran comunidad de usuarios y creadores no es muy difícil encontrar plugins que te hacen la vida más fácil.

Es lo mismo que pasa cuando hablamos de plugins para editar CSS en WordPress. Puedes utilizar el plugin Simple CSS cuando necesitas añadir nuevo código de estilización en tu sitio web en una interfaz parecida a un editor de escritorio.

Editar CSS con el editor del plugin Simple CSS en WordPress

Primero debes instalar este plugin, una vez hecho, aparece un nuevo submenú Apariencia → Simple CSS que contiene un editor parecido al editor de escritorio Sublime Text. En esa área que ofrece este plugin puedes insertar cualquier estilo CSS de los elementos de HTML y de las clases y ID de tu tema.

Si quieres visualizar los cambios en tiempo real mientras editas el estilo, en el personalizador de WordPress aparece un nuevo enlace de Simple CSS desde el cual puedes editar CSS de forma instantánea visualizando los cambios al mismo tiempo.

Si estás intentando editar archivos con muchas líneas de código que superan 1000 líneas, te recomendamos crear un tema hijo o child theme para preservar los cambios que realizas en el estilo de tu tema de WordPress.

Método 3 : Editar CSS con Editor Predeterminado

WordPress de forma predeterminada viene con un editor integrado que te permite leer y editar el código. Este editor viene tanto en la sección de Apariencia como en la de Plugins, para explorar el código de todos los archivos de los temas y plugins de tu instalación.

El editor predeterminado de WordPress que está en Apariencia → Editor funciona perfectamente, sin embargo no es el método más recomendable para editar los archivos de tu tema o plugins, ni para editar CSS de la apariencia del tema, especialmente si eres un principiantes en el mundo de WordPress.

Editar CSS en WordPress con el editor predeterminado

Es un editor básico sin herramientas suficientes para arreglar errores o deshacer cambios por ejemplo, además puedes perder todos los cambios que realizas cuando actualizas un tema o plugin. Incluso te puedes quedar fuera de tu sitio web si editas mal algún código PHP.

Incluso WordPress añadió un mensaje de advertencia a partir de la versión 4.9 que te avisa de no utilizar el editor del panel de administración de WordPress. Si insistes en usar este editor, asegúrate primero de copiar su contenido en un archivo en tu ordenador, para recuperar la versión original en caso de emergencia.

Conclusión

Hemos visto en este tutorial los tres métodos más prácticos para editar CSS o archivos de estilo de WordPress de tu tema o plugins, que te ayudan a mejorar el diseño y apariencia de tu sitio.

Lo que te recomendamos es utilizar un tema hijo en tu sitio web antes de hacer ediciones sea de CSS o sobre archivos que necesitas modificar del tema, para mantener los cambios y no se pierdan cada vez que actualizas el tema a posibles nuevas versiones.

Esto es todo. Te invitamos a seguir nuestra página en facebook y twitter para obtener nuestros tutoriales y artículos de cómo proteger y optimizar tu WordPress de forma correcta.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Si continúas utilizando este sitio significa que aceptas el uso de cookies. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar