Share
Aujourd'hui, j'aimerais vous montrer comment ajouter facilement des barres latérales personnalisées à utiliser dans vos publications et vos pages. Il pourrait être utile d'afficher différents widgets en fonction du sujet de votre page ou de votre message..
Nous verrons comment utiliser les méta-boîtes WordPress pour stocker et récupérer un encadré choisi pour un message spécifique. Des barres personnalisées seront ajoutées dans la section des options de thème.
J'avais l'habitude de m'occuper de l'excellent plug-in de logique de widgets pour afficher différents widgets sur différentes pages, mais la page des widgets est devenue très floue et difficile à gérer. Alors pourquoi ne pas utiliser plusieurs barres latérales et choisir laquelle afficher sur un message spécifique? C'est ce que je vais couvrir dans ce tutoriel.
Dans ce tutoriel, je vais utiliser le grand thème par défaut de WordPress, Twenty Eleven, pour montrer comment utiliser les barres latérales personnalisées dans votre thème..
Tout d'abord, nous allons ajouter un nouveau paramètre dans Apparence -> Options du thème. Vous pouvez vous référer à ce didacticiel pour voir comment ajouter des paramètres..
Ouvrez le theme-options.php fichier, situé dans vingteleven / inc et ajoutez ce code à la fin de la vingteleven_theme_options_init () une fonction:
Accentsconagua
add_settings_field ('custom_sidebar', __ ('Custom sidebars', 'twentyeleven'), 'twentyeleven_settings_field_custom_sidebar', 'theme_options', 'general'); Ajoutez ensuite une valeur par défaut (un tableau vide) aux valeurs par défaut des options de thème, à la fin du twentyeleven_get_default_theme_options () une fonction:
$ default_theme_options = array ('color_scheme' => 'light', 'link_color' => twentyeleven_get_default_link_color ('light'), 'theme_layout' => 'content-sidebar', 'custom_sidebar' => array ()); Maintenant, nous allons créer la fonction de rappel qui gère l'affichage du paramètre.
Ajoutons quelques jQuery pour gérer des interactions telles que l’ajout et la suppression de barres latérales, qui sont essentiellement des éléments de liste contenant une entrée masquée. Nous allons également générer ces éléments de liste à partir des barres latérales déjà enregistrées..
function twentyeleven_settings_field_custom_sidebar () // Récupération des options de thème $ opts = vingteleven_get_theme_options (); // Un peu de jQuery pour gérer les interactions (ajouter / supprimer des barres latérales) $ output = ""; $ output. =""; $ output. =""; echo $ output;"; $ output. ="
"; // Affiche chaque barre latérale personnalisée if (isset ($ opts ['custom_sidebar']))) $ i = 0; foreach ($ opts ['custom_sidebar'] comme $ sidebar) $ output. ="
"; $ output. ="- ". $ sidebar." ".__ (" delete ", $ nommeme)."
"; $ i ++; $ output. ="
Finalement, ajoutez ce code dans le twentyeleven_theme_options_validate () fonction pour assainir et valider la saisie de formulaire:
if (isset ($ input ['custom_sidebar']))) $ output ['custom_sidebar'] = $ input ['custom_sidebar'];
À ce stade, vous devriez pouvoir gérer et enregistrer des barres latérales personnalisées dans votre thème. Par exemple, créons une nouvelle barre latérale personnalisée appelée "Ma barre latérale personnalisée". Votre page d'options de thème devrait ressembler à ceci:
Maintenant, nous sommes en mesure d'ajouter des barres latérales personnalisées, nous devons registre afin qu'ils puissent apparaître dans la page d'administration des widgets.
Dans le thème des vingt et onze ans, cela se fait dans le vingteleven_widgets_init () une fonction. Donc, à la fin de cette fonction, ajoutez ceci:
$ options = vingteleven_get_theme_options (); if (isset ($ options ['custom_sidebar'])) && sizeof ($ options ['custom_sidebar'])> 0) foreach ($ options ['custom_sidebar'] comme $ sidebar) register_sidebar (array ('name' => __ ($ sidebar, 'twentyeleven'), 'id' => generateSlug ($ sidebar, 45), 'before_widget' => '", 'before_title' => '',' after_title '=>'
',)); Nous récupérons les options de thème, vérifions qu’il existe au moins une barre latérale personnalisée et l’enregistrons. Nous utilisons une fonction rapide pour générer une limace hors du nom de la barre latérale à utiliser comme ID de la barre latérale.
function generateSlug ($ phrase, $ maxLength) $ resultat = strtolower ($ phrase); $ result = preg_replace ("/ [^ a-z0-9 \ s -] /", "", $ result); $ result = trim (preg_replace ("/ [\ s -] + /", "", $ result)); $ result = trim (substr ($ result, 0, $ maxLength)); $ result = preg_replace ("/ \ s /", "-", $ result); return $ result; Maintenant, allez à Apparence -> Widgets et vous devriez voir notre nouvelle barre latérale personnalisée.
Maintenant que nos barres latérales personnalisées sont disponibles, nous ajouterons une boîte méta pour afficher une liste de toutes les barres latérales disponibles dans le formulaire de modification de publication..
Si vous n'êtes pas familier avec les boîtes à méta, vous pouvez vous référer à ces liens:
add_meta_box sur le codex WordPressMaintenant creusons dans le code.
Premièrement, nous allons simplement ajouter nos méta-boîtes. Nous devons déclarer deux méta-boîtes, une pour les posts et une pour les pages. Nous devons également enregistrer deux hooks, un pour ajouter des méta-boîtes et l'autre pour les sauvegarder..
Alors ouvrez votre functions.php déposer et ajouter ceci:
/ * Définit la boîte personnalisée * / add_action ('add_meta_boxes', 'add_sidebar_metabox'); add_action ('save_post', 'save_sidebar_postdata'); / * Ajoute un champ à la colonne latérale des écrans d'édition de publication et de page * / function add_sidebar_metabox () add_meta_box ('custom_sidebar', __ ('Custom Sidebar', 'vingt-neuf'), 'custom_sidebar_callback', 'post', ' côté '); add_meta_box ('custom_sidebar', __ ('barre latérale personnalisée', 'vingt-neuf'), 'custom_sidebar_callback', 'page', 'side'); Maintenant, créons le custom_sidebar_callback fonction, qui imprimera le balisage des boîtes à méta.
Il y a plusieurs étapes clés dans cette fonction:
$ wp_registered_sidebars variable./ * Imprime le contenu de la boîte * / function custom_sidebar_callback ($ post) global $ wp_registered_sidebars; $ custom = get_post_custom ($ post-> ID); if (isset ($ custom ['custom_sidebar']))) $ val = $ custom ['custom_sidebar'] [0]; else $ val = "default"; // Utiliser nonce pour la vérification wp_nonce_field (plugin_basename (__FILE__), 'custom_sidebar_nonce'); // Les champs actuels pour la saisie de données $ output = ''; $ output. = ""; echo $ output;
Maintenant sauvons notre post méta. Encore une fois plusieurs étapes ici:
/ * Lorsque la publication est enregistrée, enregistre nos données personnalisées * / function save_sidebar_postdata ($ post_id) // vérifie s’il s’agit d’une routine de sauvegarde automatique. // Si c'est notre formulaire qui n'a pas été soumis, nous ne voulons donc rien faire si (défini ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return; // vérifie que cela vient de notre écran et avec l'autorisation appropriée, // parce que save_post peut être déclenché à d'autres moments if (! wp_verify_nonce ($ _POST ['custom_sidebar_nonce'], plugin_basename (__FILE__))) return; if (! current_user_can ('edit_page', $ post_id)) return; $ data = $ _POST ['custom_sidebar']; update_post_meta ($ post_id, "custom_sidebar", $ data); Vous devriez maintenant pouvoir voir cette case dans la page d'édition, dans la colonne de droite. Sinon, vérifiez que la zone de la barre latérale personnalisée est affichée dans le panneau d'options de l'écran supérieur..
Maintenant que tout est correctement configuré, il ne reste plus qu'à mettre à jour nos fichiers de modèles afin qu'ils puissent afficher des barres latérales personnalisées..
Créons une nouvelle page basée sur le modèle de barre latérale (disponible dans la boîte d'attributs de la page). Ce modèle repose sur le sidebar-page.php fichier. Éditez ce fichier et ajoutez ces lignes en haut (sous l'en-tête commenté du modèle):
$ options = get_post_custom (get_the_ID ()); if (isset ($ options ['custom_sidebar'])) $ sidebar_choice = $ options ['custom_sidebar'] [0]; else $ sidebar_choice = "default";
Nous récupérons les méta-données post actuelles pour obtenir la barre latérale choisie.
À commutateur entre une barre latérale personnalisée et celle par défaut, modifiez le get_sidebar () appeler au bas de ce même fichier à ceci:
if ($ sidebar_choice && $ sidebar_choice! = "default") get_sidebar ("custom"); else get_sidebar (); le get_sidebar ($ slug) appels pour sidebar-slug.php. Nous devons donc créer un fichier nommé sidebar-custom.php et ajoutez ceci à l'intérieur:
$ options = get_post_custom ($ post-> ID); $ sidebar_choice = $ options ['custom_sidebar'] [0]; ?>
Votre page doit maintenant afficher la barre latérale que vous avez choisie. Par exemple, j'ai ajouté deux widgets dans ma barre latérale personnalisée:
Je ne vous expliquerai pas comment appliquer cela aux publications car il s’agit exactement du même comportement, il vous suffit de mettre à jour le content-single.php fichier pour gérer les barres personnalisées.
C'est tout les gens! Maintenant vous pouvez utiliser encadrés illimités pour vos pages et vos posts. C’est une solution parmi d’autres, mais c’est un rapide et facile manière d'implémenter les barres latérales personnalisées, alors n'hésitez pas à laisser un commentaire, à partager vos idées et à donner votre avis!
