web-dev-qa-db-fra.com

Pourquoi le modèle de largeur totale dans Twenty Twelve intègre-t-il autant de classes dans l'attribut de classe corps?

J'ai créé une page et sélectionné l'option "Modèle de page pleine largeur, sans barre latérale" dans le thème Vingt-douze. La page visualisée a la balise body suivante:

<body class="page page-id-2 page-template page-template-page-templates page-template-full-width page-template-page-templatesfull-width-php logged-in admin-bar full-width custom-font-enabled single-author customize-support">

Je souhaite créer un thème enfant avec une page pleine largeur personnalisée, mais je ne suis pas certain de la raison pour laquelle je devrais inclure autant de classes similaires, ni de la meilleure pratique à suivre pour les créer. La plupart d'entre eux ne semblent pas réellement être utilisés dans le style de la page. Par exemple, je ne vois pas l’utilisation de page-template-page-templatesfull-width-php. C'est peut-être un bug.

templateschild-themetheme-twenty-twelve
1
OrganicCorridor

Ces classes sont sorties par la fonction body_class , qui peut être filtrée par des plugins pour ajouter leurs propres classes. Vous n'avez pas besoin (et ne devriez pas) coder les classes dans la balise body de votre modèle, ajoutez simplement cette fonction dans la balise body:

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

Twenty Twelve ajoute par exemple la classe CSS .full-width à body_class via une fonction de filtrage dans functions.php du thème lorsque le modèle buld-in 'Modèle de page pleine largeur, Pas de barre latérale' est utilisé. Code correspondant à partir de Twenty Twelve:

if ( ! is_active_sidebar( 'sidebar-1' ) || is_page_template( 'page-templates/full-width.php' ) )
    $classes[] = 'full-width';

Cette classe CSS est utilisée dans style.css pour formater les pages en largeur. Pour faciliter le formatage, vous pouvez envisager de faire de même pour votre modèle de page.

Code possible pour un thème enfant (basé sur le nom de fichier et l'emplacement du modèle de page personnalisé - exemple /page-templates/custom-full-width.php ):

function wpse_174855_twentytwelve_child_body_class( $classes ) {
    if( is_page_template( 'page-templates/custom-full-width.php' ) ) {
        $classes[] = 'full-width';
    }
    return $classes;    
}
add_filter( 'body_class', 'wpse_174855_twentytwelve_child_body_class', 20 );
0
Michael