Cómo aplicar CSS en una página/publicación específica

¿Sabes que puedes aplicar CSS en una página específica o una publicación en WordPress ? Sí, debido a la naturaleza compatible con CSS de WordPress, esto es posible. Y en esta guía, le mostraremos las diversas formas en que puede agregar CSS a una página o publicación específica.

Todos los temas de WordPress suelen aplicar diferentes estilos a cada tipo de contenido. Las publicaciones, páginas, taxonomías, perfiles y cualquier otro contenido tienen diferentes hojas de estilo en cada uno de ellos. Y lo mismo ocurre con los complementos y todos los demás aspectos de WordPress también.

Sin embargo, debido a la flexibilidad de WordPress, también puede usar diferentes hojas de estilo para una página específica y tipos de publicaciones. Pero veamos por qué es posible que deba agregarles CSS antes de pasar por el proceso.

¿Por qué aplicar CSS a una página o publicación específica?

Agregar CSS a páginas y publicaciones específicas es muy útil si está creando un sitio web o diseñando su sitio web . CSS se usa generalmente para personalizar la apariencia visual del sitio web. Por lo tanto, usar CSS en su sitio web en general puede ser muy útil para presentar sus páginas web exactamente como desea para los visitantes de su sitio web.

Puede haber una página en particular o un tipo de publicación que necesite un diseño único en comparación con otras páginas o publicaciones en su sitio web. En este caso, una de tus mejores opciones es aplicar CSS en la página específica o en la publicación. Estas páginas o publicaciones generalmente se agregan a los menús de su sitio web. Pero también pueden incluir otras páginas y publicaciones únicas, como la página de la tienda, la página del producto o incluso la página de inicio.

Por ejemplo, incluso nosotros en QuadLayers hemos usado CSS en páginas específicas como Portafolio y Acerca de para diferenciarlas de otras páginas o tipos de publicaciones. Ahora, sin más preámbulos, sigamos con el proceso.

Cómo aplicar CSS en una página o publicación específica

Hay varias formas con las que puede agregar aplicar CSS en una página específica o una publicación. Pero, aquí están los 3 más comunes :

1. Usando la identificación o clase HTML
2. Agregar una función PHP
3. Incluir un archivo CSS en una página o publicación específica

Todos estos enfoques se pueden utilizar para aplicar CSS para múltiples propósitos. Revisaremos todos estos enfoques en este artículo con un tutorial paso a paso adecuado.

1. Usando la identificación o clase HTML

Este es uno de los enfoques más comunes y ampliamente aceptados si desea aplicar CSS en una página o publicación específica. Todo lo que tenemos que hacer es obtener un identificador único que tendrá una página o publicación. Luego, esta clase HTML o id nos permite dirigir todos nuestros scripts CSS a la página o publicación deseada.

1.1. Encuentre la clase HTML o la identificación de la página

Primero, debe averiguar la identificación o la clase que se usará para el script CSS. Esto se puede encontrar fácilmente con la ayuda de la herramienta de inspección del navegador.

Simplemente abra la página donde desea aplicar CSS y haga clic derecho en el elemento que desea editar. Luego haga clic en Inspeccionar .

Aquí, verifique la etiqueta HTML del cuerpo. Esto variará dependiendo del tema que estés usando.

Hemos utilizado el tema Veinte Veinte en todos los siguientes ejemplos. Entonces, esto es lo que verá cuando inspeccione la página de inicio de un sitio web usando el tema Twenty Twenty:

De la captura de pantalla anterior, el identificador único que tiene la página de inicio es la clase " inicio ". Por lo tanto, si desea aplicar algunas reglas CSS solo a la página de inicio, debe usar esta clase en sus selectores.

Por ejemplo, digamos que queremos aplicar algún estilo al logotipo solo en la página de inicio . Luego, además de la clase de inicio, también necesitamos el selector de imagen del logotipo. Nuevamente, esto se puede obtener de la herramienta de inspección del navegador.

En este caso, usaremos la clase "logotipo personalizado" para aplicar nuestro estilo al logotipo. Ahora, juntémoslos con la clase agarrada en el paso anterior. Finalmente, podemos aplicar nuestro script solo en la página de inicio usando el siguiente selector de CSS:

 .home .custom-logo{ /*your CSS here */}

Nota: No necesita seguir todas las etiquetas HTML intermedias e incluirlas en su selector. Puede omitirlos todos incluso si el elemento que desea diseñar está lejos del selector de página único.

Por supuesto, si necesita un selector más específico, puede usar el selector de ruta CSS completo. Pero esto es bastante abrumador y no será necesario en la mayoría de los casos.

Como ejemplo, este es un selector muy específico para diseñar el mismo elemento de logotipo que hemos visto antes:

 html body.home div#page.site header#masthead div.site-branding div.site-logo span.custom-logo-link img.custom-logo{ /*your CSS here */}

1.2. Encuentre la clase HTML o la identificación de la publicación

De manera similar a las páginas, también debe haber una clase HTML única para cada publicación. Nuevamente, solo inspeccione el elemento en la publicación que desea aplicar CSS con la ayuda de la herramienta de desarrollo del navegador. Luego, podrá ver el identificador único como con el atributo postid .

Para la siguiente publicación con el tema Twenty Twenty, la clase que identifica esta publicación es postid -557.

Del mismo modo, puedes hacer lo mismo con cualquier otra página de un sitio web. Usando la clase única que identifica una página. Si observa la siguiente captura de pantalla, puede ver que la clase que identifica la página es page-id-357 .

Finalmente, cree su propio selector de CSS que se adapte a las necesidades de su sitio web, como en el ejemplo del logotipo personalizado. Luego, puede aplicar el CSS en la página o publicación específica agregándolo en Apariencia > Personalizar > CSS adicional . Si necesita más ayuda, puede consultar nuestra guía sobre cómo aplicar CSS a WordPress o cómo aplicar CSS utilizando la herramienta de desarrollo del navegador.

2. Agregar una función PHP

El método anterior es adecuado para aplicar nuestro CSS personalizado a publicaciones o páginas específicas. Será suficiente para la mayor parte de la personalización que pueda necesitar. Pero en algunos casos, puede haber limitaciones:

• Su tema no tiene ninguna clase HTML o identificación única para el contenido que necesita diseñar.
• Tiene una gran lista de reglas CSS y necesita guardarlas en archivos separados.
• Desea aplicar alguna otra condición además de la página actual.

Si tiene problemas similares cuando desea aplicar CSS a una página o publicación específica, sería mejor usar una función de PHP .

Pero antes de comenzar, asegúrese de hacer una copia de seguridad de su sitio web de WordPress o cree un tema secundario para este enfoque. Estaremos editando algunos archivos delicados en su sitio web. Por lo tanto, cualquier cambio innecesario podría generar más problemas con su sitio web.

Si necesita ayuda, incluso puede usar uno de los mejores complementos de temas secundarios para WordPress para crear un tema secundario.

2.1. Encuentre la identificación de la página/publicación

El primer paso es verificar la identificación de la página o la publicación donde queremos aplicar nuestros estilos. Puede notar que los valores de id son los mismos que los del paso anterior. Sin embargo, esta no es la misma identificación HTML que usamos antes.

La identificación a la que nos referimos ahora es una variable de PHP que identifica publicaciones y páginas. Mientras que la identificación en el enfoque anterior identifica una clase HTML.

Afortunadamente, es muy fácil encontrar la página y publicar la identificación en su sitio web. Puede ver la identificación de las páginas y las publicaciones en el panel de administración del backend cuando abre el editor . La identificación de la publicación o página se menciona en la URL de su navegador.

Otra forma de obtener la identificación de una página o publicación es usar el siguiente script en el archivo functions.php del tema secundario. Solo ve a Apariencia > Editor de temas y abre el archivo functions.php .

Luego, pegue el siguiente fragmento en el editor y actualice el archivo. Imprimirá la identificación de la página en la parte delantera.

 add_action('wp_head',función(){
    $page_id = get_queried_object_id();
    echo $id_página;
});

Después de conocer el identificador de PHP para la publicación o página a la que necesita aplicar CSS, simplemente puede imprimir el CSS en el encabezado. Puede usar el mismo enlace que hemos usado antes, es decir, wp_head() .

Simplemente pegue el siguiente fragmento en el archivo functions.php una vez más.

 add_action('wp_head','my_head_css');
función my_head_css(){
    $page_id = get_queried_object_id();
    si ($page_id==97){
        echo "<estilo> /* tu CSS aquí */ </estilo>";
    }
}

Asegúrese de agregar su CSS en la sección "su CSS aquí" y actualice el archivo.

3. Incluir un archivo CSS en una página o publicación específica

Los métodos anteriores están bien para agregar pequeñas piezas de CSS para la personalización básica que requiere una publicación o página específica. Pero para secuencias de comandos CSS más grandes, debe seguir las buenas prácticas y cargar un archivo CSS separado. donde se debe recopilar todo su CSS personalizado.

3.1. Crear un archivo CSS usando el Editor de código

Primero, debe crear el archivo CSS separado con todos los scripts CSS necesarios utilizando un editor de código. Se pueden utilizar editores como Visual Studio Code, Sublime text o cualquier otro que admita archivos CSS.

Luego, crea un nuevo archivo con la extensión CSS y pega tu código aquí. Hemos nombrado el archivo my-style.css para este tutorial.

3.2. Cargue el archivo CSS en la carpeta del tema secundario

Ahora, el archivo CSS que creó debe cargarse en el directorio de temas secundarios. Para esto, puede usar un cliente FTP como FileZilla para cargar el archivo. Incluso puede cargarlo en el directorio principal del tema secundario .

3.2. Ponga en cola su archivo CSS personalizado

Ahora, puede poner en cola su archivo CSS personalizado en su sitio web de WordPress agregando un fragmento de código en su archivo functions.php .

En el siguiente script, usaremos el gancho wp_enqueue_script() , que es la forma correcta de aplicar archivos CSS a un sitio web de WP. Dentro de la función, registramos y ponemos en cola nuestro archivo CSS ( my-styles.css ) solo si se cumple la condición. Este es el mismo uso que el ejemplo anterior.

Luego, la función get_queried_object_id() recuperará la identificación de la página o publicación actual. Todo lo que tiene que hacer es agregar el siguiente script al archivo functions.php una vez más y actualizarlo .

 add_action('wp_enqueue_scripts', 'my_theme_styles');

function my_theme_styles() {
    if(get_queried_object_id()==97){
        wp_register_style( 'mis-estilos', get_stylesheet_directory_uri() . '/mis-estilos.css');
        wp_enqueue_style( 'mis-estilos', get_stylesheet_directory_uri() . '/mis-estilos.css');
    }
}

Nota: En el script de muestra anterior, nos referimos a la misma referencia de ID que usamos en los ejemplos anteriores, que es 97.

Si desea obtener más información sobre cómo agregar un archivo CSS, consulte nuestra guía detallada para aplicar CSS a WordPress.

Conclusión

Estos son todos los diversos métodos a través de los cuales puede aplicar CSS a una página o publicación específica. Puede ayudarlo mucho a crear diseños únicos para páginas y publicaciones particulares para su sitio web. Para resumir, hay 3 formas más comunes de agregar CSS a páginas y publicaciones específicas:

• Usando la identificación o clase HTML
• Agregar una función PHP
• Incluir el archivo CSS en una página o publicación específica

El enfoque más directo de ellos es usar la identificación o clase de HTML para los selectores de CSS. Sin embargo, si su tema tiene alguna limitación, su siguiente mejor opción es agregar una función de PHP para aplicar CSS. Finalmente, si tiene que aplicar scripts CSS grandes para la página específica o la publicación, incluirlos en un archivo CSS es el enfoque más adecuado para usted.

Si desea usar más CSS en su sitio web, también tenemos tutoriales para personalizar el menú Divi con CSS o editar la tienda WooCommerce mediante programación. Del mismo modo, también puede personalizar sus páginas y publicaciones aún más con la ayuda de nuestras guías para crear publicaciones y páginas mediante programación, convertir una publicación en una página, crear un tipo de publicación personalizado o incluso agregar publicaciones a una página en WordPress.

Entonces, ¿puedes aplicar CSS a páginas o publicaciones específicas ahora? ¿Fue útil este tutorial? Por favor, háganos saber en los comentarios. Mientras tanto, aquí hay algunos artículos más que tal vez desee visitar:

• Cómo convertir/cambiar el tipo de publicación en WordPress
• Cree un tipo de publicación personalizada de WordPress mediante programación
• Cómo personalizar la página del carrito de WooCommerce