Share
Jusqu'à présent, dans cette série, je vous ai expliqué quels sont les formats de publication et comment utiliser différents modèles pour différents formats de publication dans la boucle. Dans cet article, je vais vous montrer comment définir l'application de différents CSS à des parties du contenu d'un article en fonction du format de l'article..
Les exemples que je vais vous montrer sont assez simples, ils ne font que changer la couleur de fond, mais une fois que vous avez compris ces concepts de base, vous serez en mesure de les utiliser pour appliquer différents modèles à différents formats de publication et rendre vraiment votre thème remarquable pour sa gestion. médias et autres contenus spécialisés.
Les thèmes conformes aux normes utilisent la fonction post_class () définir les classes du conteneur entourant le contenu de la publication. Cette fonction ajoute une classe basée sur le format de publication. Ainsi, par exemple, si un message a le format "image", le message aura une classe "format-image". Cela rend très facile de cibler les conteneurs à l'intérieur de la publication via CSS sans avoir à modifier les modèles de page ou à écrire des fonctions spécifiques..
Pour changer la couleur de fond du contenu du message dans tous les messages image, vous pouvez simplement ajouter ce css au style.css de votre thème:
.format-image .entry-content background-color: red;
Parfois, vous ne pouvez pas réaliser ce que vous voulez sans ajouter de classes ou modifier complètement la mise en page. La deuxième option est pourquoi nous utilisons différentes parties de contenu. J'ai expliqué comment utiliser différentes parties de contenu par format de message dans mon dernier message de cette série..
Une fois que vous avez une partie de contenu différente, vous pouvez apporter les modifications souhaitées, par exemple, dans les publications image, vous souhaitez transformer l'image sélectionnée en un conteneur pleine largeur au lieu d'un petit élément flottant..
Si vous souhaitez simplement modifier l'apparence d'un format de publication dans l'index des blogs, vous pouvez ajouter un filtre pour ajouter des classes à post_class () dans des situations spécifiques. Nous pouvons utiliser le filtre post_class pour ajouter des classes spécifiques à la publication dans des situations spécifiques, par exemple s'il a le format d'image et n'est pas la vue unique..
Accentsconagua
function slug_preview_image_class ($ classes) global $ post; if (has_post_format ('image', $ post-> ID) &&! is_single ($ post-> ID)) $ classes [] = 'preview-image-post'; retourne $ classes; add_filter ('post_class', 'slug_preview_image_class'); Ce filtre vous permet de cibler les publications image dans l'index ou l'archive de blog, sans affecter leur apparence, en ciblant la classe 'preview-image-post'..
Vous pouvez également souhaiter simplement ajouter une classe de prévisualisation à toute publication ayant un format de publication autre que le format standard. Le filtre que je viens de montrer peut être modifié pour ce faire soit en ajoutant manuellement tous les formats de publication pris en charge par le thème dans un tableau has_post_format ().
Bien entendu, vous pouvez ne pas savoir quels formats de message le thème prend en charge, par exemple si vous ajoutez cette fonction dans un plugin, au lieu d'un thème. Dans ce cas, il serait préférable d’obtenir la liste des formats postaux actuellement enregistrés en utilisant get_theme_support ('post-formats') comme vous pouvez le voir dans cette fonction de filtre modifiée.
function slug_post_format_preview_class ($ classes) global $ post; $ post_formats = get_theme_support ('post-formats'); if (has_post_format ($ post_formats [0], $ post-> ID) &&! is_single ($ post-> ID)) $ classes [] = 'format de prévisualisation'; retourne $ classes; add_filter ('post_class', 'slug_post_format_preview_class'); Avec ce filtre en place, vous pouvez toujours cibler des formats de publication individuels séparément ou tous ensemble. Ce CSS, ainsi que le filtre qui associe le filtre "Aperçu-format", modifie l'arrière-plan du contenu de l'article pour chaque format d'article en bleu, sauf s'il s'agit d'une image, auquel cas la couleur d'arrière-plan sera rouge..
.format de prévisualisation .entry-content background-color: # 00F; .preview-format.format-image .entry-content background-color: # F00;
Cet article ne vous a donné qu'un avant-goût de la façon dont vous pouvez formater vos différents formats de publication pour les faire ressortir dans la boucle, ou même pour personnaliser leur apparence en mode publication unique. Comme toujours, je vous encourage à expérimenter avec les exemples de code et les thèmes de référence prenant en charge les formats de publication, tels que le thème Socialement Awkward de Theme Hybrid..
Si vous êtes la seule raison de ne pas utiliser les formats de publication, c'est parce que vous avez tellement de publications sans ensemble de format de publication, assurez-vous de voir la publication suivante de cette série. Je couvrirai la mise à jour en bloc du format des messages.
