5 formas prácticas de añadir CSS personalizado en WordPress y preguntas frecuentes

Añadir en WordPressCSS personalizado es una forma muy práctica de controlar totalmente el aspecto y el estilo de tu sitio web. El CSS personalizado es una herramienta muy flexible y potente en la personalización de sitios web de WordPress, que te ayuda a tener un control preciso sobre los elementos visuales, el diseño y la experiencia del usuario de tu sitio web, así como a mejorar la visualización en dispositivos móviles. Tanto si desea modificar las fuentes, cambiar el esquema de color u optimizar el diseño, el CSS personalizado puede ayudarle a satisfacer sus necesidades. Estas son algunas de las formas más comunes de añadir CSS personalizado a tu sitio WordPress.

Método 1: Utilice la función "Custom CSS" que viene con WordPress.

WordPress ofrece una opción incorporada que le permite añadir CSS personalizado directamente en el backend.Este método es simple y fácil de usar para los principiantes, y para situaciones en las que usted necesita para hacer pequeños ajustes. Estos son los pasos exactos:

1. Ir a la configuración "Personalizada
   • Inicie sesión en el panel de administración de WordPress y vaya a Apariencia > Personalización.

2. Seleccione la opción "CSS extra
   • En el menú de la izquierda, busque CSS adicionalHaga clic en Abrir. Aparecerá un cuadro de entrada donde podrá añadir directamente el código CSS.

3. Introducir CSS personalizado
   • Introduzca su código CSS en el cuadro de texto. Ejemplo:
   • El código cambia el color de fondo de la página y ajusta el color y el tamaño de los títulos de primer nivel.

body { background-color: #f4f4f4; } h1 { color: #333333; font-size: 2.5em; }

4. Previsualización y publicación en directo
   • La función de personalización de WordPress previsualizará los cambios CSS en tiempo real. Una vez que haya confirmado que ha realizado los cambios correctos, haga clic en escriba a para guardar los cambios.

vantage::
Este método es sencillo y adecuado para pequeños ajustes de estilo y no implica modificar los archivos del tema, por lo que no se perderá ningún código cuando se actualice el tema.

Escenarios aplicables::
Para los usuarios que desean añadir pequeñas cantidades de CSS de forma rápida y sencilla, esta opción es especialmente adecuada para situaciones en las que se requieren pequeños ajustes en la apariencia de un sitio.

Método 2: Utilizar el archivo style.css del tema hijo

Si desea personalizar el aspecto de su sitio en mayor profundidad, o necesita retocarlo de forma masiva, se recomienda utilizar un tema hijo y añadir uno nuevo a la carpeta style.css La ventaja de esto es que incluso si el tema se actualiza, el código CSS modificado no se perderá. Estos son los pasos:

1. Habilitación de temas hijo
   • Para evitar sobrescribir el código personalizado cuando se actualice el tema, se recomienda crear y utilizar el archivosubtema. Si aún no existe un tema hijo, puede instalar uno o utilizar un plugin (como el plugin Configurador de temas infantiles) Generación rápida.
2. Abra el archivo style.css
   • Vaya al backend de administración de WordPress y navegue hasta Apariencia > Editor de archivos de temasseleccione el subtema del style.css archivo. Este es el archivo principal de la hoja de estilos para el tema hijo.

3. Añadir CSS personalizado
   • existe style.css Añade tu código CSS personalizado al final del archivo, por ejemplo:
   • Este código es .custom-header establece los colores de fondo y de fuente, y establece los colores de fondo y de fuente para la clase .custom-button diseña un estilo de botón con esquinas redondeadas.

.custom-header { background-color: #2c3e50; color: #ffff; } .custom-button { background-color: #e74c3c; color: #ffff; padding: 10px 20px; border-radius: 5px; }

4. Guardar cambios
   • Tras confirmar que no hay errores, pulse Documentos actualizados para guardar los cambios.

tome nota de::
Modificar directamente los archivos CSS del tema padre puede hacer que el tema sobrescriba los cambios cuando se actualice, por lo que no es recomendable y utilizar un tema hijo es una opción más segura.

Escenarios aplicables::
Ideales para usuarios que necesitan ajustar drásticamente el estilo de su sitio web, especialmente para desarrolladores o usuarios avanzados, los temas hijo son un método flexible y seguro de personalización.

Método 3: Añadir CSS personalizado mediante un plugin

Si no desea editar los archivos de código o no quiere utilizar un tema hijo, recurrir a los plugins es una opción sencilla y eficaz. Este método es adecuado para los usuarios que necesitan una personalización multipágina. Aquí tienes algunos plugins populares y los pasos para utilizarlos:

Plug-ins de uso común:

• CSS y JS personalizados sencillos: Un plugin ligero que añade CSS y JavaScript para facilitar el funcionamiento.
• WPcodeSoporte para añadir CSS personalizado a todo un sitio web, a una página específica o a un post específico.
• SiteOrigin CSS: Proporciona un editor visual intuitivo para usuarios no familiarizados con CSS.

Paso 1: Instalar el plugin WPCode

1. Acceso a la biblioteca de plugins
   • Inicie sesión en el backend de WordPress y navegue hasta Plugins > Instalar nuevo plugin.
2. Buscar en WPCode
   • En la barra de búsqueda escriba "WPCode", encontrar WPCode - Insertar encabezados y pies de página + fragmentos de código personalizados Complementos.

3. Instale y active el plugin
   • golpe (en el teclado) montajey, a continuación, active el complemento.

Paso 2: Crear un nuevo fragmento de código CSS

1. Vaya a la página de administración de WPCode
   • Después de activar el plugin, vaya a Fragmentos de código > Añadir fragmento.

2. Seleccione el tipo de código
   • En la biblioteca de plantillas de fragmentos de código proporcionada por WPCode, seleccione la opción Añada su código personalizado (nuevo fragmento) A continuación, seleccione directamente Fragmento CSS Plantilla.

3. Seleccionar lugar de inserción
   • En la opción "Insertar ubicación", seleccione Cabecera del sitio tal vez Pie de página del sitio(se recomienda añadirlo a la cabecera) para garantizar que el código CSS se carga en todo el sitio.

Enfoque 4: Creador de temas (Elementor(por ejemplo, Divi, etc.) para añadir CSS personalizado

Para el uso de ElementorPara los usuarios de creadores de temas como Divi, etc., estas herramientas a menudo vienen con una función de complemento CSS que facilita su uso.

Añadir CSS a Elementor

1. Seleccione el elemento y vaya a los ajustes "Avanzados
   • Abrir Elementor página webseleccione el elemento al que desea añadir CSS y vaya a la sección "alto nivel", busque "CSS personalizado"(sólo Elementor Pro (Proporcionado).

2. Introduzca el código CSS
   • hacer uso de selector Selecciona el elemento actual, por ejemplo:

selector { background-color: #333; color: #fff; }

Añadir CSS a Divi

1. Ir a Opciones de tema
   • En el backend de WordPress, vaya a Divi > Opciones de tema > CSS personalizado.
2. Introduce el código CSS y guárdalo
   • Después de introducir el código CSS personalizado, haga clic en Guardar.

vantage::
Gestiona fácilmente el CSS sin salir del editor, especialmente para los usuarios de herramientas de diseño avanzadas.

Escenarios aplicables::
Para los usuarios que ya utilizan constructores como Elementor, Divi, etc., este método es conveniente y no requiere un plugin.

Método 5: Añadir CSS directamente mediante FTP o editor de código

Si tiene mayores necesidades de personalización y está familiarizado con el FTP y las herramientas de edición de código, puede editar el CSS directamente en los archivos del tema. este enfoque es adecuado para desarrolladores.

mover

1. Conexión a FTP
   • Conéctese al servidor web utilizando un cliente FTP como FileZilla.
2. Localice la carpeta del tema
   • entrar en wp-content/temas/su-tema-niño/ busque la carpeta style.css Documentación.
3. Editar y cargar
   • mostrar (una entrada) style.css añada CSS personalizado donde corresponda, guárdelo y súbalo.

vantage::
Control total sobre la documentación y el código para desarrolladores avanzados.

Escenarios aplicables::
Usuarios avanzados que necesitan hacer muchos cambios de estilo y están familiarizados con las operaciones FTP.

problemas comunes

1. ¿Por qué no funciona el CSS personalizado?
Podría ser un problema de caché, intenta borrar la caché de tu navegador o el plugin de caché del sitio web.

2. ¿Cómo puedo evitar que el CSS personalizado se pierda al actualizar el tema?
Se recomienda utilizar un tema hijo o un plugin para guardar el CSS y evitar sobrescribir el código con las actualizaciones.

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: [email protected]
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres