Une fonctionnalité utile de WordPress est la façon dont il génère des classes et des identifiants. Certaines d'entre elles sont générées par le système lui-même, alors que dans d'autres cas, vous insérez du code PHP dans votre thème. WordPress l'utilise pour ajouter des classes et des identifiants au balisage de la page..
Dans ce didacticiel, je vais illustrer trois façons dont WordPress procède ainsi et fournir des applications pratiques et des exemples pour chacun. Les trois domaines que je traiterai sont les suivants:
Classes et ID générés pour les images que vous téléchargez sur WordPress via le programme de téléchargement multimédia
Balises de modèle utilisées dans les fichiers de modèle d'un thème pour générer des classes et des ID basés sur le contenu et la page en cours de visualisation
Paramètres que vous pouvez définir lors de l'enregistrement de widgets et de menus (ou qui seront déjà définis dans un thème bien écrit), qui généreront des classes et des identifiants correspondant à des types spécifiques de widgets, de widgets individuels et d'éléments de menu
Pour chacune d’elles, je vais expliquer leur fonctionnement, puis présenter chacune d’elles avec quelques exemples..
Ce dont vous aurez besoin pour compléter ce didacticiel
Pour suivre les exemples pratiques de ce tutoriel, vous aurez besoin de:
Une installation de développement de WordPress
Un thème que vous pouvez éditer
Je travaillerai avec un thème enfant de Twenty Twelve - vous pouvez accéder aux fichiers de thème du paquet de codes..
Classes et IDS générés pour les images par le téléchargeur de supports
Lorsque vous téléchargez des images via Media Uploader, vous avez la possibilité de spécifier le mode d'alignement de l'image, comme illustré sur la capture d'écran. Vous êtes également invité à choisir la taille d'image que vous souhaitez afficher: miniature, moyenne, grande ou pleine taille..
En fonction de votre sélection, WordPress attribue le taguer pour vos images téléchargées un certain nombre de classes. Les classes pour l'alignement sont les suivantes:
.alignnone
.aligneur
.aligner droit
.alignez à gauche
En outre, WordPress attribue le .wpcaption classe à n’importe quelle légende que vous ajoutez à une image. Les sous-titres auront cette classe ainsi que l’une des classes d’alignement ci-dessus, en fonction de la manière dont vous choisissez d’aligner l’image..
WordPress ajoute également des classes pour chaque taille d'image:
.taille complète
.taille large
.taille moyenne
.vignette de taille
Vous pouvez les utiliser pour styler des images de chaque taille de fichier.
La plupart des thèmes incluent CSS pour attribuer un style approprié à chacune de ces classes. Par exemple, le thème Twenty Twelve comprend les éléments suivants:
Le CSS ci-dessus aligne n'importe quel élément (pas seulement les images) avec le .alignez à gauche, .aligner droit ou .aligneur class, ce qui signifie que vous pouvez également utiliser ces classes pour styliser du contenu autre que des images si vous le souhaitez..
Il ajoute également des marges aux images ayant ces classes et garantit que les images de taille grande et grande ne s’écartent pas en dehors de leur élément conteneur, en utilisant largeur maximale: 100%.
Vous pouvez voir l'effet de ceci dans la capture d'écran ci-dessous. La première image est alignée à droite et la seconde est centrée et en taille réelle.
Ajoutez votre propre style en utilisant ces classes et ces identifiants
En plus de définir l'alignement et les marges pour chacune de ces classes, vous pouvez les utiliser pour ajouter un style supplémentaire..
La première image de la capture d'écran ci-dessus est alignée à droite. Si l'écran est redimensionné, il reste à la même taille et le texte s'enroule mal:
Vous pouvez ajouter un style pour vous assurer que les images alignées à droite occupent au maximum 50% de la largeur de l'écran. Le texte sera ainsi mieux mis en forme en ajoutant le code CSS suivant à votre feuille de style:
img.alignright max-width: 50%;
Désormais, lorsque la page est affichée sur un écran étroit, l’image est moins dominante:
En plus de l'ajout de CSS pour la mise en page ou le dimensionnement, vous pouvez ajouter un style décoratif aux images alignées d'une certaine manière. Pour ajouter un style décoratif aux images centrées en taille réelle, ajoutez ce qui suit à votre feuille de style:
Cela ajoute une bordure à l'image et réduit sa taille:
Balises de modèle pour l'ajout de classes et d'ID
Les classes et les identifiants d'images que nous avons examinés sont générés par WordPress lui-même. D'autres classes et identifiants peuvent être générés par des balises de modèle dans votre thème..
Remarque: Si vous n'êtes pas familier avec les balises de modèles, consultez l'article sur les balises de modèles du Codex..
Il existe deux séries de balises de gabarit: une qui s’applique à la Balise HTML et deux qui s'appliquent à des publications individuelles.
le body_class () Tag de modèle
Un thème bien écrit aura la balise suivante dans son header.php fichier:
>
Cela remplace la normale étiquette. le body_class () balise de modèle indique à WordPress d’attribuer des classes à la balise basée sur la page en cours de visualisation et le fichier modèle utilisé à partir du thème actif.
La liste des classes pouvant être générées est longue et vous pouvez la trouver dans le Codex WordPress.
Quelques exemples incluent:
.maison pour la page d'accueil
.single-postid- ID lorsqu'un seul message est affiché, où ID est l'identifiant numérique de ce message
.archiver pour toute page d'archive
.page-template- nom du fichier -php lorsqu'un modèle de page personnalisé est utilisé
Si vous souhaitez ajouter des classes supplémentaires à la tag qui ne sont pas générés par WordPress, vous pouvez. Par exemple, pour ajouter la classe "hello", le code est le suivant:
>
Vous pouvez ajouter autant de classes que vous le souhaitez, en les séparant par des espaces..
Vous pouvez utiliser les classes générées par le body_class () balise pour ajouter un style spécifique à un certain emplacement du site ou d'un fichier de modèle, ou à des éléments de ce fichier de modèle.
Par exemple, dans mon thème enfant, j'ai créé un modèle de page appelé page-pleine-largeur-avec-sidebar.php, qui est conçu pour afficher les pages avec la largeur totale du contenu et la barre latérale en dessous du contenu au lieu de se trouver à droite. Vous pouvez trouver ce modèle de page dans la liasse de codes.
En utilisant le body_class () tag, WordPress génère un .page-template-page-pleine-largeur-avec-sidebar-php classe pour le tag (parmi d'autres classes).
Ainsi, pour appliquer un style aux éléments d’une page à l’aide de ce modèle, vous ajoutez les éléments suivants à votre feuille de style:
/ * disposition de style pour le modèle de page complet avec barre latérale * / .page-template-page-pleine-largeur-avec-sidebar-php .site-content, .page-template-page-pleine-largeur-avec-sidebar-php. widget-area width: 100%; clarifier les deux; .page-template-page-full-width-with-sidebar-php # secondary.widget-area .widget width: 48%; marge: 0 1%; float: gauche;
Ceci définit la largeur du contenu principal et de la barre latérale (#secondaire) à 100% et aligne également les widgets dans la barre latérale les uns à côté des autres. Vous pouvez voir l'effet dans la capture d'écran:
Remarque: Si votre thème est réactif, assurez-vous de régler la largeur des widgets sur des écrans étroits dans vos requêtes multimédia..
le post_class () et post_ID () Tags de modèle
Ces balises fonctionnent de la même manière que le body_class () tag, mais vous les utilisez avec des posts individuels dans la boucle au lieu du élément.
Par exemple, dans le thème Twenty Twelve, chaque message de la boucle est enveloppé dans un élément avec ces balises appliquées:
> // contenu ici
Cela génère un certain nombre de classes en fonction de la catégorie et du type de la publication, ainsi qu'un identifiant basé sur l'ID numérique de la publication. Par exemple, une publication de mon site de démonstration avec la catégorie "rouge" aura les classes et l'ID suivants générés:
// contenu
Vous pouvez utiliser ces classes pour styler différemment les publications de catégories individuelles. Dans le site de démonstration, trois catégories sont définies: "rouge", "bleu" et "important"..
Pour les styler, ajoutez le CSS suivant à la feuille de style du thème:
/ * messages de style dans la catégorie 'rouge' * / .category-red border-top: 2px solid # cc0000; / * messages de style dans la catégorie 'bleu' * / .category-blue border-top: 2px solid # 3366ff; / * messages de style dans la catégorie 'important' * / .blog .category-important padding-top: 2em; marge gauche: 2em; .category-important: avant contenu: 'LIRE CET ARTICLE! C'EST IMPORTANT';
Cela ajoute du style à chacune des catégories: une bordure colorée pour chacune des catégories de couleur et une marge supplémentaire pour la catégorie «importante». Il utilise également un pseudo-élément pour insérer du contenu supplémentaire avant chaque message dans la catégorie "important"..
Le résultat est montré dans la capture d'écran.
Utilisation de classes et d'ID avec des widgets et des menus
Lorsque les widgets sont enregistrés dans un thème (ou parfois un plugin), les fonctions utilisées peuvent inclure un code qui indique à WordPress de générer des classes et des identifiants en fonction du nom, du type et de l'identifiant du widget..
Une fois les menus enregistrés, WordPress peut générer des classes en fonction du nom du menu, de la position des éléments dans le menu et de l'emplacement sur le site. Vous pouvez utiliser tous ces éléments pour styliser vos widgets et vos menus..
Classes et ID pour les widgets
Pour enregistrer une zone de widget, vous utilisez le register_sidebar () fonctionner dans votre thème functions.php fichier. Cela prend les paramètres suivants:
__ ('Nom de la barre latérale', 'theme_text_domain'), 'id' => 'unique-sidebar-id', 'description' => ", 'class' =>", 'before_widget' => '
',' after_widget '=>'
',' before_title '=>'
',' after_title '=>'
'); ?>
Deux paramètres génèrent des classes et / ou des identifiants:
'classe' => "
'before_widget' => '
'
le 'classe' Ce paramètre vous permet de spécifier manuellement une classe pour la zone du widget. Les paramètres pour le 'before_widget' le paramètre indique à WordPress de générer un identifiant unique pour chaque widget de la zone du widget et un certain nombre de classes pour celui-ci, qui dépendra du type de widget dont il s'agit.
Par exemple, sur le site de démonstration, j'ai ajouté deux widgets: une liste de publications et une liste de pages. Pour la liste des publications, le code HTML suivant est généré:
Pour la liste des pages, le code HTML suivant est généré:
Vous pouvez l'utiliser pour styliser les widgets qui répertorient les publications en ajoutant le code CSS suivant à la feuille de style du thème:
Cela ajoute une bordure aux pages de liste des widgets, comme indiqué dans la capture d'écran:
Remarque: Cela fonctionne sur le site de démonstration car il utilise un thème enfant du thème vingt douze, qui contient des barres latérales correctement enregistrées. Si vous construisez votre propre thème, vous devrez ajouter la balise register_sidebar () avec les paramètres ci-dessus. Découvrez comment faire cela dans l'article du Codex associé.
Classes et ID pour les menus
Les menus de navigation sont affichés à l’aide des touches wp_nav_menu () tag dans votre thème header.php fichier. Cela prend un certain nombre de paramètres, comme détaillé dans la wp_nav_menu article.
L'un de ceux-ci ajoute des classes et des identifiants à chaque élément du menu:
'items_wrap' => '
% 3 $ s
'
Cela ajoute un identifiant et un nombre de classes à chaque élément. Les classes sont basées sur la classe pour le menu lui-même et l'emplacement dans le site. Par exemple, lorsque l’utilisateur est sur une page du site, son entrée dans le menu de navigation aura la .current_page_item classe.
Vous pouvez l'utiliser pour ajouter un style à l'entrée de la page actuelle dans le menu. Par exemple, pour ajouter un soulignement à la page en cours, ajoutez ce qui suit à votre feuille de style:
/ * lien de page active de style dans la navigation * / .main-navigation .current_page_item a text-decoration: underline;
Le soulignement résultant est visible sur la capture d'écran (ainsi que le changement de couleur déjà présent dans la feuille de style du thème parent):
Remarque: Comme j'utilise un thème pour enfants du thème vingt-douze, je n'ai pas besoin d'ajouter le wp_nav_menu () tag, car il est déjà présent dans le thème parent.
Résumé
Comme nous l'avons vu ci-dessus, WordPress génère des classes et des identifiants sur des éléments d'un site. Certaines d'entre elles sont générées par WordPress lui-même et d'autres utilisent des balises de modèle ou des paramètres de fonction pour indiquer à WordPress de générer les classes et les identifiants. Vous pouvez les utiliser pour styler des pages, des menus, des widgets, des listes de publication et d'autres éléments de votre conception..
Il existe de nombreuses autres manières d'utiliser ces classes et ces identifiants pour styliser vos projets. Par exemple:
Vous pouvez créer un site avec plusieurs sections distinctes, en utilisant les classes générées par le body_class () balise pour rendre le contenu de chaque section très distinct
Vous pouvez définir le style de chaque publication dans une page d’archive en ciblant l’ID généré par le l identité() étiquette
Vous pouvez mettre en surbrillance les éléments de menu actuels dans votre navigation, créer un effet de type bouton et utiliser des images, des arrière-plans, des dégradés, etc.
Vous pouvez utiliser une combinaison de ce qui précède, par exemple en attribuant à certains widgets un style différent selon les zones du site.
Les possibilités ne sont limitées que par votre imagination!
Ressources
Quelques pages utiles du Codex sur les sujets abordés dans ce tutoriel:
Classes générées pour les images: http://codex.wordpress.org/CSS#WordPress_Generated_Classes
le body_class () tag: http://codex.wordpress.org/Function_Reference/body_class
le post_class () tag: http://codex.wordpress.org/Function_Reference/post_class
le l identité() tag: http://codex.wordpress.org/Function_Reference/the_ID
le wp_register_sidebar () fonction: http://codex.wordpress.org/Function_Reference/register_sidebar
le wp_nav_menu () tag: http://codex.wordpress.org/Function_Reference/wp_nav_menu
Un guide pour les balises de modèle: http://codex.wordpress.org/Template_Tags
Share
Accentsconagua
