web-dev-qa-db-fra.com

Ajouter une classe CSS différente dans la balise body de différentes pages WP

Je transfère un site HTML statique de 20 pages vers un thème Wordpress. Sur chaque page du site statique, la balise body a une classe CSS personnalisée, c'est-à-dire 'banque-page ".

Je sais que WP génère des classes d'ID de page dans la balise body pour représenter les pages individuelles (c'est-à-dire .page-id-27), mais en termes de lisibilité (et de transférabilité), est-il possible de ajouter un peu de php sur chaque page qui insérera une classe spécifique dans la balise de corps CSS pour cette page particulière? L'utilisation de la fonction body_class() ne le fera pas car elle s'affichera sur chaque page.

Merci d'avance

Emilie.

phppagescss
1
The Chewy

Dans votre functions.php:

function my_body_class($classes) {

    if(is_page()){
      global $page;
      $title = get_the_title(  $page );
      $classes[] = $title;

    }
    return $classes;
}

add_filter('body_class', 'my_body_class');

Cela ajoutera le titre de la page en tant que classe à chaque page.

1
KGreene

Quelques options pour vous.

Option 1: utilisez la fonction body_class() pour ajouter le slug de page à la classe. 

function add_slug_body_class( $classes ) {
     global $post;
  if ( isset( $post ) ) {
     $classes[] = $post->post_name;
  }
  return $classes;
}

add_filter( 'body_class', 'add_slug_body_class' );

Ensuite, quelle que soit l'URL, dites "votredomainepage.com/page-bancaire", puis elle saisira "page-banque" comme classe pour le corps. Cela signifie que vos URL doivent correspondre à vos classes, ce qui n'est peut-être pas la solution idéale.

Option 2: ajouter une méta-boîte de classe de corps à vos pages. Je préfère utiliser ACF pour cela, mais cela peut aussi être fait en utilisant la fonction add_meta_box () .

Une fois que vous l'avez rempli, vous utilisez la même fonction que celle répertoriée dans l'option 1, sauf que vous remplacez $post->post_name; avec votre meta box/ valeur du champ ACF .

2
Faye

Vous souhaitez ajouter une classe CSS différente sur une page différente. Vous pouvez le faire en le vérifiant par page ou identifiant de page. Ça va vous demander un peu de travail. Cependant, vous pouvez le faire dans les deux sens. (Il y a peut-être plus de façons mais je vous suggère ces deux)

Pour les deux, vous devriez avoir ajouté le code suivant dans le fichier d'en-tête du thème actif où vous rendez la balise body

<body <?php body_class( 'class-name' ); ?>>

  1. Vérifiez la page en utilisant le code dans le filtre body_class (Hook):

    add_filter( 'body_class', 'add_custom_class', 10, 1);
function add_custom_class( $classes ) {
    if ( is_page( 57 ) ) { 
        // 57 is your desire page id for example
        // if ( is_page ( 'home' ) ) { // the slug of page
        array_merge( $classes, array( 'home-class' ) );
    } elseif( is_page( 58 ) ) { 
        // elseif ( is_page('about-us') ) {
        array_merge( $classes, array( 'about-class' ) );
    } elseif ( is_page( 60 ) ) { 
        // elseif( is_page('contact-us') )
        array_merge( $classes, array( 'contact-class' ) );
    } 
    // until all your pages are finished.
    return $classes;
}

  2. Une autre façon est d'ajouter une méta-boîte ou un champ personnalisé sur chaque page dans wp-admin et d'ajouter la classe de cette page et de modifier le code ci-dessus comme suit:

    add_filter( 'body_class', 'add_custom_class', 10, 1);
    function add_custom_class( $classes ) {
        // If you're using custom-field or meta that should be shaved in postmeta table
        global $post;
        $page_class = get_post_meta( $post->ID, 'meta_key', true );
        // You can use Advance custom field plugins to add fields into your posts/pages
        // If you use ACF plugin you can use get_field( 'selector', $post->ID ) instead of get_post_meta(...);
        if ( is_page() ) {
            if( '' != $page_class ) {
                array_merge( $classes, array( $page_class ) );
            }
        } 
        return $classes;
    }
0
Vantiya
 // ajouter une classe de corps pour cela. 
 add_filter ('body_class', 'custom_class'); 
 function custom_class ($ classes) {
 if (is_single ( ) && 'post' == get_post_type ()) {
 $ classes [] = 'article-page'; 
} 
 
 else {
 if (! is_page ('library')) $ classes [] = 'home'; 
} 
 if (is_page ('contact-page')) {
 $ classes [] = 'contact-page'; 
} 
 if (is_page ('banking-page')) {
 $ classes [] = 'banking-page'; 
} 
 renvoie $ classes; 
}
0
test1gddg