Aunque WordPress ofrece una gran cantidad de configuraciones en la interfaz del panel de administración, no es suficiente para todos los propósitos. Por ejemplo, no puede agregar un fragmento de código CSS a una página. Encontrará dificultades cuando quiera insertar estilos CSS personalizados a nivel de página. En este artículo, explicaremos varias opciones disponibles para agregar CSS a una sola página en su sitio de WordPress.
Problemas al agregar CSS en todo el sitio en WordPress
Hay tres métodos comúnmente utilizados para agregar CSS en WordPress.
- Ve a la sección "Apariencia > Personalizador > CSS adicional" y pega tu código.
- De lo contrario, vaya a "Apariencia > Editor de archivos de temas" y pegue el código CSS en el archivo style.css del tema. Puede usar un tema secundario para este propósito para que los cambios no se eliminen cuando actualice el tema principal.
- También hay muchos complementos que ofrecen la función de agregar CSS en todo el sitio a la sección del encabezado.
El problema con estos métodos es que el CSS agregado se cargará en todas las páginas de su sitio. Esto será un problema cuando desee insertar cientos de líneas de código. Otro problema es que esto afectará el comportamiento de todo el sitio en lugar de solo afectar la página donde necesita el código. Supongamos que ve una barra de desplazamiento horizontal en su página de inicio y desea desactivarla. Puedes usar body{overflow-x:hidden;} para facilitarlo Cuando utilice los métodos anteriores, este código se cargará en todas las páginas y afectará a las páginas en las que realmente desee mostrar una barra de desplazamiento horizontal, como las páginas con tablas grandes con varias columnas.
Agregar CSS a una página
Hay dos formas de lograr esto en WordPress: puede usar un bloque HTML personalizado o usar un complemento de terceros.
Agregue CSS con un bloque HTML personalizado
El HTML personalizado es uno de los bloques predeterminados que viene con el editor de Gutenberg. Entonces, si está usando Gutenberg, no tiene complementos adicionales con este método.
- Edite la página a la que desea agregar CSS personalizado.
- Escriba /personalizado y seleccione Bloque HTML personalizado de los resultados. Si no ve el bloqueo, es posible que lo haya desactivado por error. Obtenga más información sobre cómo revelar todos los bloques ocultos en el editor de Gutenberg.
- Coloque el código CSS entre las etiquetas de estilo de apertura y cierre. Por ejemplo, debajo debería estar el código para ocultar el desbordamiento horizontal.
<style>
body {
overflow-x: hidden;
}
</style>- Puede insertar el bloque HTML personalizado al principio antes que el resto del contenido. Puede obtener una vista previa de la página o presionar el botón publicar para aplicar los cambios.
La página no mostrará la barra de desplazamiento horizontal y el CSS en línea solo se cargará en la página específica.
2. Creador de páginas de WPBakery
Algunos de los temas comerciales vendidos en Themeforest vienen con el paquete WPBakery Page Builder. Si tiene un tema creado en WPBakery o ha comprado el complemento por separado, puede usarlo para insertar CSS personalizado a nivel de página. Recomendamos usar esto solo en páginas, no en publicaciones, y deshabilitar el complemento para crear páginas en publicaciones.
- Cree o edite su página con el editor de front-end o back-end del complemento WPBakery Page Builder.
- Haga clic en el icono "Configuración de página" que se muestra en la barra de herramientas superior.
- Agregue su propio CSS personalizado que se aplica solo a esta página. Asegúrese de agregar el código sin abrir ni cerrar etiquetas de estilo.
- Haga clic en el botón "Guardar cambios" y actualice o publique su página.
3. Complemento de bloques de espectros
Si está utilizando el tema Astra, entonces Spectra es el complemento de bloque que debe usar. Aunque este complemento también funciona con otros temas, se integra a la perfección con el tema Astra. Puede usar este complemento de bloque Spectra para agregar CSS a nivel de página a su sitio.
- Edite la página y haga clic en el icono "Configuración de página de espectros" que aparece en la esquina superior derecha del editor. Si no ve el icono, haga clic en los tres puntos verticales y seleccione la opción "Configuración de página de espectros" del menú.
- Pegue o escriba su CSS personalizado en el cuadro debajo de la sección CSS personalizado.
- La ventaja aquí es que el complemento resaltará el código con resaltado de sintaxis y sugerirá posibles valores. Esto ayudará a evitar errores al ingresar una gran cantidad de código directamente en el editor.
palabras de cierre
Aunque el bloque HTML personalizado ayuda a agregar CSS en una sola página en WordPress, no tendrá rastro de las páginas donde agregó los códigos. Este es el mismo problema con los complementos Spectra y WPBakery. La versión premium del complemento Code Snippets le permite crear fragmentos de shortcode y puede rastrear, habilitar o deshabilitar los fragmentos desde el tablero. Si necesita administrar cientos de inserciones de CSS a nivel de página, esta será una opción adecuada en comparación con otras.
Deja una respuesta