CSS personalizado por página en WordPress

3 minutos de lectura

Buenos dias a todos,

He creado un fondo diferente y algunas otras imágenes para ciertas páginas dentro de nuestro sitio. Actualmente, el siguiente código funciona bien con la página “niños” en nuestro sitio.

<body<?php if ( is_page(array('kids'))) {
echo ' class="kids" '; } ?>>

Estoy tratando de descubrir cómo agregar ese mismo CSS a otras páginas “debajo” de la página de niños. Entonces, si vas a kids/block-party, ¿cómo haría para agregarlo al código para llamar a ese CSS especial?

He intentado lo siguiente

<body<?php if ( is_page(array('kids, kids/block-party'))) {
echo ' class="kids" '; } ?>>

la coma no parece registrarse por alguna razón.

Este es un sitio de ejecución de wordpress.

Gracias

Otra opción es simplemente reemplazar

<body>

con

<body <?php body_class(); ?>>

Luego puede apuntarlo a través de css de la siguiente manera:

body.page-id-2, body.parent-pageid-2 { background-color: red; }

Donde el ID es el ID de la página/página principal a la que se dirige. Esto mantendrá su plantilla libre de lógica y le permitirá las mismas opciones de personalización que usa su método actual.

Descubrí que necesitaba el ” a su alrededor

<body<?php if ( is_page(array('newsletter-1', 'newsletter-2', 'newsletter-3'))) { echo '   class="myclass" '; } ?>>

Nota:
Sé que las 3 respuestas actuales son una solución común a este problema para WP, pero en la práctica, lo odio. Produce HTML inflado y CSS monolítico :/

Responder:
Puede usar un archivo de plantilla asignado a cualquier número de páginas para agregar CSS/Javascript específico como este:

<?php
function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}    

add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

Fuente: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

  • esta es una muy buena respuesta. Con este método, no cargará una gran cantidad de código css inútil, que se usa solo en otras páginas. Podrá preparar CSS minimalista dirigido solo a esta página en particular. Google “cobertura css” para obtener más información.

    – psad

    3 mayo 2020 a las 20:49


Puede que haya pensado demasiado en esto, pero aquí está mi solución.

El siguiente script obtiene automáticamente todos los elementos secundarios de una página principal específica e imprime la clase que necesita. Esta solución funciona muy bien si no quiere tener que actualizar la lista de páginas secundarias manualmente.

Esto va en su archivo header.php:

<?php 
    //set page id 
            $page_id = '98';

           //get page's children 
    $children = get_pages('child_of=".$page_id);
    foreach($children as $child){
       $children_ids = $child->ID;
    }

    if(is_page($page_id) || is_page($children_ids)){
       echo "class="kids';
    }

?>

¡Gracias, y espero que esto ayude!

¿Ha sido útil esta solución?