Cómo agregar CSS personalizado a WordPress: 4 métodos para diferentes necesidades

¿Tiene que agregar CSS personalizado a WordPress? A medida que se familiarice más con WordPress, seguramente querrá agregar al menos un poco de CSS Custom a su sitio. Sé que sí, todos los sitios de WordPress que lanzarán tiene al menos algunos cambios para hacer las cosas correctas. Pero agregar código CSS personalizado a WordPress puede ser un poco más difícil, ya que no es una buena idea editar la hoja de estilo de tema de Paterna y pegar allí. Para ayudarlo a agregar CSS personalizado a WordPress correctamente, compartiré cuatro formas diferentes de usar, cada una con algo que lo haga único. Cubriré todo, desde WordPress personalizado hasta colocar su propia hoja de estilo personalizada, para que pueda encontrar el método adecuado para usted.
PSSST: ¿Le gustaría cambiar fácilmente su CSS, vivir, mientras lo mira? Prueba el héroe CSS para saltar. Método 1: use el personalizador de WordPress. Comenzaré con WordPress Customizer porque es el método más accesible, pero no es necesario mi método personal favorito (este es el método 2). Ventajas de usar la personalización de WordPress para CSS:
No tiene que hacer ninguna configuración o instalar un complemento. Es parte del núcleo de WordPress.
Puede ver cambios CSS personalizados en una vista previa en tiempo real de su sitio.
Incluye la validación básica para asegurarse de no superar nada.
Contra el uso de la personalización de WordPress para CSS:
Cualquier CSS personalizado que agregue está relacionado con su tema. Por lo tanto, si cambia los temas, deberá copiar su CSS personalizado.
Cómo usar el personalizador de WordPress para CSS: inicie la interfaz de personalizador de WordPress accediendo → personalización en la placa de WordPress: el artículo continúa a continuación


Luego haga clic en la opción para el CSS adicional en la barra lateral de personalizador de WordPress (debe estar en la parte inferior):
Ahora, simplemente agregue su CSS personalizado a la caja. Si está equivocado, alguna sintaxis, el editor le advertirá sobre sus errores:

Cuando haya terminado de agregar CSS personalizado, haga clic en Publicar para hacer cambios. Método 2: Use el complemento CSS simple para CSS simple gratuito es un complemento gratuito de Tom Usborne, que también es el creador del tema popular GeneratePress (que también es el tema que usamos aquí en Wplift). El complemento puede hacer casi todo en el método anterior y muchos más. Ventajas de usar complemento CSS simple:

Todavía puede agregar CSS a través de WordPress Customizer para vista previas de tiempo real
El complemento incluye un editor CSS separado con funciones completas fuera del WordPress Personalizado
Puede agregar CSS personalizado a publicaciones o páginas individuales
Todos los CSS que agregas son independientes del tema. Entonces, incluso si cambia la tarea, su CSS seguirá allí
Contra el uso del complemento CSS simple:
No hay validación del código como el método de personalizador de WordPress
Cómo usar el complemento CSS simple: una vez que instala y activa el complemento, hay algunas formas diferentes en que puede agregar CSS personalizado a WordPress.
El artículo continúa a continuación

En primer lugar, puede acceder a la apariencia → Personalización y usar la opción CSS simple. Esto le dará una vista previa en vivo de su CSS cambia lo mismo que el método anterior: segundo, puede ir a → CSS fácil de usar el editor completo. El código en este editor será idéntico al código en el área CSS simple del WordPress personalizado:

Finalmente, también puede agregar CSS personalizado a una publicación o página individual a través del nuevo cuadro Simple Meta CSS en el editor de WordPress:

Uno por uno, el complemento CSS simple es mi método favorito para agregar cambios básicos de CSS. Método 3: Use la hoja de estilo de su hijo si tiene que agregar muchos CSS personalizados, en lugar de solo algunos aquí y allá, probablemente sea mejor usar la hoja de estilo. Pero no puedes poner el CSS personalizado en la hoja de estilo de los padres, porque se sobrescribirá cada vez que actualice su tema.


En cambio, debes usar algo llamado tema infantil. De esta manera, su CSS personalizado permanecerá intacto incluso cuando actualice el tema principal.

El artículo continúa a continuación
Ventajas de usar la hoja de estilo para niños:

Bueno para agregar muchos CS personalizados (como 1,000 líneas adicionales)

Desventajas del uso de la hoja de estilo para el niño:
No hay vistas previas en vivo en WordPress personalizadas, como los dos métodos anteriores
No tan conveniente como los otros dos métodos en general
Su CSS personalizado está relacionado con su tema, por lo que deberá moverlo si alguna vez cambia los temas
Cómo usar el tema infantil para CSS personalizado Si el lugar donde tomó el tema aún no ha incluido un tema infantil para trabajar, puede usar el complemento de tema de un solo clic para crear uno. → Tema infantil y:
Ingrese los detalles de los nombres, la descripción y el autor
Haga clic en Crear niño
Una vez que el complemento crea el tema del niño, lo activará automáticamente. Luego puede hacer clic para moverse directamente a la hoja de estilo de su hijo.:
O siempre puede acceder a esto accediendo a → Editor:
Al igual que el método de personalizador de WordPress, WordPress realizará la validación del código central en cualquier CSS que agregue (¡esta es una característica agregada recientemente que me encanta!). Método 4: Pon su propia hoja de estilo personalizada que la mayoría de los usuarios de WordPress nunca tendrán que usar este método.

Pero lo incluyo porque algunas personas intentan agregar su propia hoja de estilo personalizada que incluye directamente en su sección como sigue: Método anterior no es la forma de hacerlo en WordPress. En su lugar, debe usar wp_enquee_style para agregar hojas de estilo. Por ejemplo, para agregar una hoja de estilo llamada customStyl.css que cargó a su carpeta de base., Agregaría este fragmento de código al archivo functions.php o un complemento como fragmentos de código. wp_enqueue_style (‘customstyles’, get_stylesheet_directory_uri (). ‘/customstyles.css’);