web-dev-qa-db-fra.com

Est-ce la meilleure (et la seule) option pour styler CSS pour un type de publication donné?

Tout d'abord, merci de m'avoir lu et mes excuses pour mon manque de connaissances.

J'ai un site WP avec un thème et un thème enfant. Je le cours en 3 langues espagnol, anglais et portugais; et pour gérer les traductions, j'utilise le plugin WPML.

Mon problème est que dans la page traduite Portfolios and Contact, le site ne ressemble pas tout à fait à ma volonté. Après de nombreuses recherches sur le support WPML, nous avons conclu que le thème de l'enfant, y compris les feuilles CSS supplémentaires, est étonnamment défini pour des niveaux spécifiques de publication/page. Donc, le style va comme dans les images:

CSSSheetPageLevelStyling

CMorePageSpecificStyling

Et il en va de même pour les messages Contacts ID.

Ainsi, dans ce scénario, la solution de support WMPL consiste à "copier" le script et à modifier simplement l'identifiant du post dans les lignes copiées.

Je pense qu’il s’agit d’une solution à court terme, car si à l’avenir l’un des événements suivants devait se produire, je devrais le refaire:

-Je veux créer une deuxième page de portfolio -Je veux ajouter une nouvelle langue -Pour quelque raison que ce soit, je supprime la page de portfolio ou de contact et le fais de nouveau.

La question qui se pose est donc la suivante: n’est-il pas une autre option pour y parvenir de manière plus "propre"? Je ne saurais pas comment mais j'imagine quelque chose comme dire dans le CSS, pour les portefeuilles, le style devrait être celui-ci - peu importe la langue -; pour Contact, le style devrait être ceux-ci, etc.

Mon dev dit que cette approche est fausse, mais pour moi leurs explications n'ont aucun sens.

Tout conseil serait profondément apprécié

À votre santé

postscustomizationcsstranslationstyles
4
user114431

Vous avez absolument raison dans votre hypothèse. CSS ne devrait jamais être lié à des ID de publication, car ils peuvent toujours changer (par exemple, si vous décidez de migrer vos publications vers une autre installation).

Vous pouvez toujours déplacer le contrôle vers le tableau de bord d'administration.

Ajoutez un champ personnalisé dans un article/une page que vous souhaitez styler de manière spéciale (dans votre exemple, vous auriez le même champ personnalisé dans toutes les versions linguistiques de l'article/de la page). Disons que ce sera wpse_custom_class. Ajoutez-le à chaque article/page; la valeur sera portfolio pour cet exemple.

Ajoutez ce code à functions.php (copié de cette réponse ). Lorsque la page se charge, elle recherche un champ personnalisé et insère sa valeur en tant que classe CSS sur l'élément body HTML.

function wpse_filter_post_class( $classes ) {
    $my_post_class = get_post_meta($post->ID, "wpse_custom_class");

    if( $my_post_class != '' ) {
        $classes[] = $my_post_class;
    }
    return $classes;
}

add_filter( 'post_class', 'wpse_filter_post_class' );

Votre concepteur peut maintenant l'utiliser comme ceci:

.portfolio #content .main {
    max-width: 100%;
}

C’est davantage un travail d’administrateur (vous ou le concepteur devrez entrer manuellement et spécifier ces classes CSS pour toutes les pages de style personnalisé), mais cela contribue finalement à une solution très flexible et évolutive.

2
montrealist

Pourquoi ne pas utiliser de règles CSS spécifiques à un ID:

Les CSS spécifiques à Post ID ne peuvent être qu'une solution rapide et sont loin d'être les meilleures pratiques. Le post-identification n'est pas fiable dans de nombreux cas. Par exemple:

  • Peut-être supprimerez-vous un message et le remplaceriez-vous par un nouveau.

  • Peut-être aurez-vous besoin de migrer votre site à l'avenir vers un autre serveur.

  • Peut-être créez-vous une nouvelle version du message/de la page et souhaitez-vous consulter le nouveau message/de la nouvelle page avant de remplacer l’ancienne.

Dans tous ces cas, l'ID de publication est susceptible de changer et les CSS spécifiques à cet ID ne seront même plus applicables. Vous devrez donc à nouveau mettre à jour votre CSS pour répondre à vos besoins en matière de conception. WordPress est extrêmement personnalisable, vous ne devez donc pas utiliser de règles CSS de base post-ID. Pour une pratique de développement et de conception plus mature, l'utilisation de règles CSS spécifiques à un ID est fortement déconseillée. Utilisez plutôt l'une des options ci-dessous:

Utiliser les modèles de page:

WordPress prend en charge les modèles de page pour les pages de longue date et à partir de la version 4.7 WordPress prend en charge les modèles de page pour tout type de publication . Ainsi, si vous possédez WordPress 4.7 ou une version ultérieure, vous pouvez créer un modèle de page spécifique pour les publications ou les pages de votre thème enfant.

De cette façon, vous n'avez besoin d'aucun CSS spécifique à un ID, car une fois que vous avez ces modèles spécifiques, chaque fois que vous avez besoin du même design pour une page ou une publication, vous devez simplement choisir le même modèle dans la publication ou éditeur de page. C'est tout. Après cela, la conception de ce modèle de page s'appliquera à cette page, post ou custom post type.

Utilisez post_class crochet de filtre:

Si vous ne souhaitez pas accéder à différentes pages ou publications dans le panneau d'administration pour attribuer des modèles spécifiques (vous avez peut-être beaucoup de pages/publications), vous pouvez utiliser le crochet de filtre post_class. De cette façon, vous pourrez attribuer des classes CSS uniques à différentes publications et pages qui en ont besoin et les styler en fonction de ces classes CSS. Par exemple, supposons que vous avez un type de publication personnalisé movie & vous souhaitez une classe CSS différente pour les entrées movie. Ensuite, dans le fichier functions.php de votre thème, vous pouvez ajouter le CODE suivant:

add_filter( 'post_class', 'movie_post_class' );
function movie_post_class( $class ) {
    if ( get_post_type() === 'movie' ) {

        // remove these CSS classes from movie entries
        $remove = array( 'css-class-to-remove', 'another-class-to-remove' );
        $class = array_diff( $class, $remove );

        // add these custom CSS classes to movie entries
        $add = array( 'custom-movie', 'my-movie-class' );
        $class = array_merge( $add, $class );
    }
    return $class;
}

Vous pouvez maintenant utiliser les CSS suivants pour cibler les films entrants:

.custom-movie {
    background-color: gold;
}

Utilisez body_class crochet de filtre:

Dans certaines situations, si vous ne souhaitez pas utiliser de modèles de page et que vous avez besoin d'un contrôle plus générique sur l'ensemble de la conception de la page (par rapport à ce que post_class fournira), vous pouvez modifier la classe <body> à l'aide du crochet de filtre body_class (de la même manière). que vous pouvez faire avec le crochet de filtre post_class). Comme ça:

add_filter( 'body_class', 'movie_body_class' );
function movie_body_class( $class ) {
    if ( is_single() && get_post_type() === 'movie' ) {

        // remove these CSS classes from body class
        $remove = array( 'css-class-to-remove', 'another-class-to-remove' );
        $class = array_diff( $class, $remove );

        // add these custom CSS classes to body class of a movie post
        $add = array( 'custom-movie', 'my-movie-class' );
        $class = array_merge( $add, $class );
    }
    return $class;
}

Vous pouvez maintenant utiliser le CSS suivant pour cibler la page de publication personnalisée du film:

body.custom-movie .any-inner-content-class {
    color: blue;
}

Puisque cette classe personnalisée est ajoutée dans le <body>, vous pouvez cibler n'importe quel élément de la page de cette façon.

0
Fayaz