Cómo añadir CSS personalizado a su sitio web WordPress: Guía detallada

El CSS personalizado es una herramienta poderosa a la hora de crear y gestionar tu sitio web WordPress, ya que te da la libertad de ir más allá de las opciones estándar y ajustar el diseño y la apariencia de tu sitio web. Mediante el uso de CSS personalizado, puedes tomar el control total del diseño de tu sitio web, personalizando todo, desde las fuentes y los colores hasta el espaciado y las animaciones.

En este artículo, vamos a detallar cómo agregar fácilmente CSS personalizado a su sitio de WordPress, mientras queNo es necesario editar ningún archivo del tema.

¿Por qué añadir CSS personalizado a WordPress?

CSS (Cascading Style Sheets) es un lenguaje de diseño que funciona en conjunción con HTML para ayudarle a definir la apariencia de los elementos del sitio web. CSS permite controlar el color, el tamaño, la disposición y la visualización de los elementos para conseguir un efecto de diseño muy personalizado.

Añadir CSS personalizado te permite personalizar el diseño y la apariencia de tu sitio web, funciones que no están disponibles con las opciones predeterminadas. Es fácil modificar la apariencia de tu tema de WordPress con unas simples líneas de código, por ejemplo, cambiando el color de fondo de una página específica en lugar de utilizar el mismo color en todo tu sitio.

Tres maneras de añadir CSS personalizado a su sitio web WordPress

Aquí tienes tres formas de añadir CSS personalizado a tu sitio WordPress, cada una de ellas adaptada a las diferentes necesidades y niveles de habilidad de los usuarios.

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

A partir de WordPress 4.7, puede añadir CSS personalizado directamente desde el área de administración de WordPress, lo que es muy fácil de hacer y puede ver el efecto de los cambios inmediatamente con una vista previa en vivo.

1. Ir al personalizador de temas::
   • Vaya a la página Apariencia " " Personalización desde el panel de control de WordPress.
   • Se abrirá la interfaz del personalizador de temas de WordPress, donde podrá previsualizar el sitio web en tiempo real, mientras encuentra varias opciones de personalización en el panel izquierdo.

2. Añadir CSS personalizado::
   • En el panel izquierdo, busque y haga clic en la pestaña Otros CSS.
   • Esta pestaña muestra un cuadro sencillo en el que puede introducir código CSS personalizado.

3. Previsualice y publique los cambios en tiempo real::
   • La introducción de una regla CSS válida mostrará inmediatamente el efecto en la vista previa en vivo del sitio.
   • Cuando esté satisfecho con los cambios, pulse en la parte superior "escriba a" para guardar los cambios.

tome nota deCualquier CSS personalizado añadido a través del personalizador de temas sólo se aplicará al tema actual. Si cambias a otro tema, deberás copiar y pegar este código CSS en el nuevo tema.

Método 2: Utilice WPCode Plugin para añadir CSS personalizado

Una de las limitaciones del personalizador de temas es que su código CSS sólo funciona en el tema actual. Si cambias de tema, puede que tengas que copiar y pegar de nuevo el código personalizado. Para evitar este problema, puedes utilizar el plugin WPCode.

1. Instalación y activación del plug-in WPCode::
   • Instale y active el plugin WPCode desde el repositorio de plugins de WordPress. El plugin le permite añadir código personalizado a su sitio web WordPress y soporta el cambio sin problemas entre cualquier tema.
2. Añadir fragmentos CSS personalizados::
   • Una vez activado el plugin, vaya a la página Code Snippets ""+ Add New Code" en el panel de control de WordPress.
   • Añada un título identificativo a su fragmento y, a continuación, escriba o pegue el código CSS personalizado en el cuadro Vista previa del código.
   • Seleccione "Fragmento de código CSS" en el menú desplegable "Tipo de código".

3. Seleccionar método de inserción::
   • Si desea que el código se aplique a todo el sitio, seleccione "Autoinserción"Opciones.
   • Para utilizar este código sólo en páginas o entradas específicas, puede seleccionar "código corto"Métodos.

4. Active y guarde el fragmento de código::
   • Activa el interruptor "Activar" y haz clic en el botón "Guardar fragmento de código". Ahora su CSS personalizado estará disponible en todas las partes de su sitio web sin tener que preocuparse por los cambios de tema.

Método 3: Añadir CSS personalizado con el Editor completo del sitio (FSE)

El Full Site Editor (FSE) es una nueva función de WordPress que permite a los usuarios editar la maquetación y el diseño de todo un sitio web mediante un editor de bloques. Aunque esta función solo está disponible para algunos temas, ofrece a los usuarios opciones de personalización más flexibles.

1. Visitar el personalizador de temas::
   • En primer lugar, debes asegurarte de que tu tema es compatible con el editor de sitio completo. Después de iniciar sesión en su administrador de WordPress, copie y pegue la siguiente URL en su navegador, sustituyendo "ejemplo.com" por el nombre de dominio de su sitio web:https://example.com/wp-admin/customize.php
   • Esto le llevará a la versión restringida del personalizador de temas, que se encuentra en el menú de la izquierda en "CSS adicional"Opciones.
2. Añadir CSS personalizado::
   • Haz clic en la pestaña "CSS extra" e introduce tu código CSS.
   • Una vez introducido el código, pulse el botón "Publicar" para guardar los cambios.

Uso de plugins CSS personalizados y adición de CSS a los temas

Los métodos descritos anteriormente se recomiendan para principiantes. Algunos usuarios avanzados pueden desear añadir CSS personalizado directamente a sus archivos de tema, sin embargo, la adición de fragmentos de CSS personalizados directamente a la etiquetatema principalno es una buena práctica, ya que estos cambios pueden sobrescribirse al actualizar el tema.

Uso recomendadosubtemapara guardar CSS personalizado. Aunque crear temas hijo puede ser un poco complicado para los principiantes, es realmente una forma segura de gestionar el código personalizado.

Otras opciones de plug-in

Si no quieres escribir código CSS manualmente, considera la posibilidad de utilizar algunos plugins para simplificar el proceso:

1. Héroe CSS: Se trata de un potente plugin que te permite editar casi todos los estilos CSS de tu sitio web WordPress sin escribir una sola línea de código. Con CSS Hero, es fácil ajustar los márgenes, fuentes, colores, etc. de los elementos de la página.
2. SeedProd: Se trata de un plugin constructor de sitios web de arrastrar y soltar que ayuda a crear temas de WordPress personalizados y páginas de inicio de sesión. También le permite editar la configuración global de CSS, adecuado paraUsuarios que no desean acceder directamente al código.

resúmenes

Toma el control total del diseño de tu sitio añadiendo CSS personalizado a tu sitio de WordPress, personalizando todo, desde las fuentes y los colores hasta el diseño y las animaciones. Tanto si utilizas el personalizador de temas, el plugin WPCode o el editor de sitios completo (FSE), hay una solución que se adapta a tu nivel de conocimientos y necesidades a la hora de crear un sitio web autodidacta con WP.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres