Share
Maintenant que nous avons traité les menus personnalisés, concentrons-nous sur les barres latérales dynamiques et sur la manière dont elles peuvent être utilisées dans un thème..
Qu'est-ce qu'une barre latérale dynamique exactement? Il y a 3 parties de la dénomination que nous devons traiter en termes de ce sujet.
Tout d'abord, "dynamique". Dynamique fait référence au fait que la zone de la barre latérale peut être contrôlée à partir du tableau de bord d'administration et peut facilement être modifiée. En outre, son contenu peut être extrait d’informations WordPress constamment mises à jour, telles que des publications, des commentaires, et d’autres types de contenu régulièrement mis à jour, de sorte que chaque fois qu’une nouvelle publication soit ajoutée, elle peut être intégrée à un bloc de contenu ou à un widget de publications récentes. avec le terme widget dans un peu.).
Deuxièmement, "Barre latérale" fait référence à une zone de contenu, qui n'a pas nécessairement besoin d'être située sur le côté de la mise en page (étrange, je le sais). Le terme a été hérité des débuts de la mise en page de style blog où les widgets étaient presque toujours placés à côté. La zone de la barre latérale contient des blocs de contenu supplémentaires ou des données générées par les plugins qui apparaissent sous la forme de "widgets" généralement sur le côté, dans l'en-tête ou dans le pied de page des thèmes WordPress, mais peuvent également être positionnés de la manière souhaitée dans la présentation du thème..
Un widget est un petit bloc de contenu, contenant généralement des liens ou des contenus associés à des pages ou à des publications. Celles-ci pourraient inclure des listes de publications, commentaires, balises, catégories et toute une gamme d'autres collections de contenu, certaines intégrées et certaines générées par des plugins supplémentaires..
Les widgets peuvent être ajoutés aux thèmes "prêts pour les widgets" via Apparence -> Widgets dans le tableau de bord d'administration à l'aide de la zone de gestion des widgets intégrée. Les thèmes ne prennent pas automatiquement en charge les widgets et doivent être préparés en enregistrant une fonction spéciale, de la même manière que les menus personnalisés..
Avant d'enregistrer des barres latérales dans un thème WordPress, lors de la visite de Apparence -> Widgets, nous voyons ce qui suit.
Semblable aux menus personnalisés de notre leçon précédente, pour que la fonction de barre latérale dynamique fonctionne dans votre thème, votre thème a besoin d'un fichier functions.php qui enregistre les barres latérales. Le fichier simple functions.php doit contenir le code suivant:
Faites bien attention, comme indiqué précédemment, à ne pas laisser d'espaces après le code dans votre fichier de fonctions, car cela peut parfois entraîner des problèmes pouvant entraîner l'affichage d'un écran blanc lors de l'affichage de votre thème dans l'interface frontale..
Le seul aspect de ce code qu'il serait nécessaire de modifier au début serait le nombre de zones de la barre latérale dynamique à enregistrer dans "register_sidebars (1);". Nous allons traiter des barres latérales nommées dans un peu. Pour l'instant notre code ci-dessus a enregistré 2 barres latérales identifiées simplement par leur numéro.
Si vous souhaitez avoir 5 zones de barre latérale dynamiques dans votre thème, le nombre passera à 5 - "register_sidebars (5);". Dans ce cas, vous auriez 5 zones de barre latérale dynamiques numérotées de 1 à 5.
La fonction a une instruction "if" ou un argument conditionnel qui vérifie si la fonction register_sidebars existe dans cette version de WordPress. Si la réponse revient avec un oui, la fonction register_sidebars est exécutée. Considérant que les barres latérales sont prises en charge depuis la version 2.2 de WordPress, il est probablement inutile de s’inquiéter de cet aspect du code..
Une fois que votre fichier de fonctions est prêt, vous pouvez insérer des widgets dans les nouvelles zones de la barre latérale que nous avons créées..
Vous pouvez maintenant récupérer les widgets dans la partie gauche de la zone "Widgets disponibles" et les déposer dans la barre latérale 1 ou 2 à droite..
Une fois que votre fichier de fonctions est prêt, vous pouvez insérer le code de la barre latérale dynamique dans les zones de votre thème où vous souhaitez ajouter dynamiquement des widgets WordPress. Le code ci-dessous est la forme la plus élémentaire du code de placement de la barre latérale. Le seul aspect à modifier est le numéro indiquant quelle barre latérale numérotée vous souhaitez placer à l'emplacement spécifique..
Nous allons placer ce code dans notre barre latérale gauche
Le code ci-dessus devrait être suffisant pour permettre à la barre latérale enregistrée d'afficher le contenu du widget dans le thème. Nous allons donc aller de l'avant et ajouter des widgets.
Ce qui résulte en:
J'ai dû ajouter des CSS supplémentaires pour prendre en compte les widgets récemment ajoutés. Essentiellement, j'ai ajouté des widgets CSS dans la barre latérale du thème Twenty Eleven. Vous aurez peut-être besoin d'écrire des CSS personnalisés pour vos propres thèmes afin qu'ils s'intègrent parfaitement à la mise en page, au style et à la couleur de votre thème. Je posterai le CSS à la fin de la leçon.
Pour que notre barre latérale continue d'afficher quelque chose dans les cas où les widgets n'ont pas encore été ajoutés, ou dans le cas où les barres latérales ne sont pas enregistrées (nous espérons que personne n'exécutera WordPress avant la version 2), nous devons étendre le code de placement avec Suivant. Remarquer Barre latérale dynamique (1) est toujours dans la première ligne de code!
Que fait le code ci-dessus?
Ligne 1 du code vérifie si vous avez enregistré des barres latérales dans votre fichier functions.php et, le cas échéant, le numéro de la barre latérale à insérer à cet emplacement..
Ligne 2 agit comme un widget par défaut qui affiche une liste des catégories de publication de votre site si aucun widget dynamique n'a été ajouté. Une fois qu'un widget dynamique est ajouté à votre barre latérale dans votre tableau de bord, le widget par défaut sera remplacé par le widget dynamique..
Ligne 3 termine l'argument if dont la ligne 1 a commencé. En PHP, des arguments tels que if, qui est une instruction conditionnelle, doivent également être terminés afin que l'argument n'affecte pas le code php qui suit. Ne ferme pas le si avec le endif; va briser votre thème!
La seule partie des 3 lignes de code de la barre latérale dynamique qui doit vraiment être modifiée est le numéro, pour indiquer quelle barre latérale numérotée spécifique est insérée à cet emplacement particulier..
À partir de la documentation WordPress (The Codex), voici quelques-unes des fonctions qui peuvent être utilisées pour "coder en dur" les widgets dans les zones de la barre latérale et pour les inclure en tant que widgets par défaut dans le code de placement de la barre latérale..
wp_list_authors () - Affiche une liste des auteurs des sites (utilisateurs). Si l'utilisateur a créé des articles, le nom de l'auteur est affiché sous forme de lien vers ses articles..
wp_list_categories () - Affiche une liste de catégories sous forme de liens. Lorsqu'un lien de catégorie est cliqué, tous les articles de cette catégorie s'afficheront.
wp_dropdown_categories () - Affiche ou récupère la liste déroulante HTML des catégories.
wp_tag_cloud () - Affiche une liste de balises dans ce qu'on appelle un "nuage de balises", où la taille de chaque balise est déterminée par le nombre de fois où cette balise a été attribuée à des publications..
wp_list_pages () - Affiche une liste de pages WordPress sous forme de liens.
wp_list_bookmarks () - Affiche les signets trouvés dans le panneau Administration -> Liens.
get_comments () - Liste les commentaires en fonction du nombre, de l'ordre et d'autres paramètres.
wp_get_archives () - Cette fonction affiche une liste d'archives par date.
Ces fonctions peuvent également être utilisées n'importe où dans le thème pour générer des listes de divers contenus du site afin d'aider les utilisateurs à trouver du contenu plus facilement..
Nous pourrions ensuite utiliser cette convention de code d’emplacement pour placer notre encadré numéro 2 dans la partie droite de notre thème..
Les catégories
Nous pourrions également inclure tout autre contenu HTML en tant que contenu de widget par défaut à afficher avant l'ajout de widgets dynamiques via l'administrateur de widgets. Cela peut inclure un message pour rappeler aux propriétaires de site d'ajouter physiquement des widgets une fois le nouveau thème activé.
Aucun Widgets ajouté
Veuillez vous connecter et ajouter des widgets à cette barre latérale.
Comme nous pouvons le voir ci-dessous, nous avons inséré le code de positionnement de la barre latérale dans le contenu par défaut, soit des widgets, comme illustré dans la barre latérale gauche, soit d'un autre contenu HTML, comme illustré dans la barre latérale droite. Cela apparaîtra tant qu'aucun widget dynamique n'est ajouté via le tableau de bord des widgets. Une fois les widgets dynamiques ajoutés, ils remplaceront automatiquement ces contenus par défaut..
Maintenant, pour tester certains widgets dynamiques, nous avons ajouté les 2 widgets dynamiques suivants:
Quels résultats dans l'apparition suivante.
Actuellement, nous avons 2 codes d'emplacement avec un contenu par défaut différent, mais en insérant la même zone de la barre latérale dans les côtés gauche et droit de notre thème. Pour remédier à cela, nous allons changer le code de placement de la barre latérale dans la barre latérale droite pour placer la barre latérale numéro 2 au lieu de la barre latérale 1 comme suit. Comme vous pouvez le constater, il suffit de changer le numéro de la barre latérale numérotée que nous aimerions placer..
Aucun Widgets ajouté
Veuillez vous connecter et ajouter des widgets à cette barre latérale.
Nous pouvons maintenant gérer nos barres latérale gauche et droite de manière indépendante.
Une fois que vous avez ajouté une certaine quantité de barres latérales à votre thème, vous vous rendez vite compte de la nécessité d’avoir des noms plutôt que des chiffres. Cela vous aidera à vous souvenir des régions de votre page ou de vos modèles dans lesquels la barre latérale spécifique est placée..
Pour enregistrer les barres latérales nommées, vous devez utiliser le code suivant pour enregistrer les barres latérales dans votre fichier functions.php:
La seule différence en ce qui concerne ce qui est enregistré ici est actuellement le nom de la barre latérale. Il existe un certain nombre de paramètres pour personnaliser davantage la sortie HTML des widgets de la barre latérale, comme suit:
Source: register_sidebar
L'utilisation de certains d'entre eux au format tableau entraîne la structure de code suivante.
'Côté gauche', 'before_widget' => '',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',)); ?>
Cela entraînera la sortie HTML suivante.
Nous pouvons changer les wrappers HTML pour le conteneur de widgets et le titre avec n'importe quel autre HTML, classes, identifiants, etc..
De plus, pour enregistrer plus d’une zone de barre latérale dynamique, nous dupliquons le register_sidebar Zone du code avec son tableau de paramètres autant de fois que nécessaire pour enregistrer des barres latérales supplémentaires.
'Côté gauche', 'before_widget' => '',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',));
register_sidebar (array ('name' => 'Right Side', 'before_widget' => '',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',)); ?>
Avec ces paramètres supplémentaires, nous pouvons plus facilement contrôler la sortie HTML afin de correspondre à la structure dont nous avons besoin pour le style que nous essayons d'obtenir. Nous utiliserons le code ci-dessus pour remplacer nos barres numérotées par des barres nommées..
Il est important de noter que lors de la modification des inscriptions dans la barre latérale comme je viens de le faire ou lors de l'ajout de barres latérales supplémentaires, en particulier pour les thèmes exécutés sur des sites Web en direct, les widgets pourraient éventuellement être attribués de manière incorrecte par WordPress.
WordPress essaie généralement de conserver les widgets dans les barres latérales en fonction de leur ordre. Ainsi, si une zone de la barre latérale est supprimée ou ajoutée, WordPress peut réaffecter vos widgets existants aux zones de la barre latérale qui correspondent à l'ordre précédent. Dans notre cas, ce n’est pas un problème car nous n’avons toujours que 2 barres latérales pour que nos widgets restent là où ils étaient..
Ayant actuellement changé les noms dans notre code d'enregistrement, étant donné que nous avons une configuration simple à 2 barres latérales, WordPress est toujours en mesure de placer nos barres latérales nommées dans notre thème en fonction de leur ordre. Nous devons toutefois modifier notre code de placement dans la barre latérale pour refléter les noms que nous avons créés afin d'éviter d'éventuels problèmes à l'avenir..
Placer des barres latérales nommées nécessite essentiellement de changer le numéro, dans notre code d’emplacement, au nom de la barre latérale. Donc, en utilisant le tout premier code de placement avec lequel nous avons commencé, le plus simple:
Le nom que nous utilisons doit être identique au nom qui nous est donné dans l'encadré de notre code d'enregistrement.
En termes de code de placement plus étendu que nous avons utilisé pour nos barres latérales numérotées:
Aucun Widgets ajouté
Veuillez vous connecter et ajouter des widgets à cette barre latérale.
En utilisant la sortie HTML générée par le code d'enregistrement, nous pouvons maintenant attribuer au contenu de notre coeur les éléments de notre barre latérale..
Le lien ci-dessous décrit certains des éléments CSS essentiels de la barre latérale et du widget que nous devons prendre en compte lors de la préparation des thèmes pour la publication. Ceci afin que les utilisateurs qui ajoutent les widgets les plus courants les préfigurent pour qu'ils correspondent à l'apparence et à la présentation du thème..
Styles CSS par défaut de WordPress - Jeff Star, DigWP
Allez maintenant et widgetize!
Accentsconagua