Utiliser un type de publication personnalisé pour votre contenu de barre latérale

Ce que vous allez créer

J'utilise souvent le widget texte pour ajouter du contenu personnalisé aux barres latérales des sites que je développe. Ce sont des widgets utiles car ils acceptent le texte et le HTML, donc si vous pouvez écrire du HTML, vous pouvez les utiliser pour ajouter tout type de contenu..

Cependant, si mes clients vont modifier la barre latérale et ne sont pas familiarisés avec le langage HTML, il leur est très facile de casser des choses, en particulier si j'ai inclus des images ou des liens..

Une solution simple consiste à remplacer les zones de widgets de votre thème par un type de publication personnalisé, à l'aide de WP_Query pour publier les messages de ce type de message personnalisé dans la barre latérale.

Vous faites cela en deux étapes:

Enregistrez un type de message personnalisé pour vos barres latérales.
Créez une fonction pour afficher le contenu de vos barres latérales et ajoutez-le à la sidebar.php déposer dans votre thème.

Nous allons également créer des barres latérales dans l’administrateur WordPress, vérifier leur apparence et leur attribuer un style..

Ce dont vous aurez besoin

Pour suivre ce didacticiel, vous aurez besoin de:

une installation de développement de WordPress
un éditeur de code

Pour ce faire, je vais créer un thème enfant de Twenty Fifteen, mais vous pouvez ajouter le code à votre propre thème ou utiliser un plug-in pour enregistrer le type de message et créer la fonction, puis ajouter la fonction. à votre thème sidebar.php fichier.

Créer un thème pour enfants

Si vous travaillez avec votre propre thème, vous pouvez ignorer cette partie, mais si vous partez de zéro, le moyen le plus simple d'essayer cette technique consiste à utiliser un thème enfant. Je vais créer un enfant du thème des vingt quinze.

Dans votre dossier de thèmes dans wp-content, Créez un dossier et nommez-le en fonction de votre thème. J'appelle le mien tutsplus-sidebar-custom-post-type.

Dans ce dossier, créez deux fichiers vides: style.css et functions.php. Faites une copie du sidebar.php fichier de Twenty Fifteen dans le thème de votre enfant. Vous modifierez cela plus tard et WordPress utilisera le fichier de modèle de votre thème enfant pour afficher la barre latérale, au lieu de celui de Twenty Fifteen..

Dans votre nouvelle feuille de style, ajoutez ce qui suit:

/ * Nom du thème: Tuts + Utiliser un type de message Cusotm pour la barre latérale URI du thème de contenu: http://rachelmccollin.co.uk/tutsplus-use-custom-post-type-for-sidebars/ Description: Thème prenant en charge les tuts + tutoriel sur l'utilisation un CPT pour les barres latérales. Thème de l'enfant pour le thème des vingt-quinze. Auteur: Rachel McCollin Auteur URI: http://rachelmccollin.co.uk/ Modèle: vingt-cinq ans Version: 1.0 * / @import url ("… /twentyfifteen/style.css");

Vous aurez besoin de modifier le thème et les détails de l'auteur car c'est votre thème, pas le mien, mais cela vous donne l'idée.

Activez maintenant votre nouveau thème pour votre site, via le Des thèmes écran dans l'admin WordPress.

Enregistrement du type de message personnalisé

L'étape suivante consiste à enregistrer le type de publication personnalisé pour les barres latérales. Vous le faites dans le fichier de fonctions de votre thème (ou si vous créez un plugin pour cela, créez un nouveau fichier dans votre dossier plugins dans wp-content).

Ouvrez le functions.php déposer dans votre thème et ajouter ce code:

function tutsplus_create_sidebar_post_type () $ labels = array ('name' => __ ('Barres latérales'), 'nom_s singulier' => __ ('Barre latérale'), 'add_new' => __ ('Nouvelle barre latérale -),' add_new_item ' => __ ('Ajouter une nouvelle barre latérale'), 'edit_item' => __ ('Modifier la barre latérale'), 'new_item' => __ ('Nouvelle barre latérale'), 'view_item' => __ ('Vue latérale' '), 'search_items' => __ ('Barres latérales de recherche'), 'not_found' => __ ('Aucune barre latérale trouvée'), 'not_found_in_trash' => __ ('Aucune barre latérale trouvée dans la corbeille'),); $ args = array ('labels' => $ labels, 'has_archive' => false, 'public' => true, 'hierarchical' => false, 'supports' => array ('titre', 'éditeur', ' extrait ',' champs personnalisés ',' vignette ',' attributs de page '),); register_post_type ('sidebar_post', $ args);  add_action ('init', 'tutsplus_create_sidebar_post_type');

Cela enregistre le sidebar_post type de message personnalisé. Notez que je l'ai délibérément appelé sidebar_post et pas barre latérale. C’est parce que beaucoup de thèmes utilisent déjà la .barre latérale classe pour leur barre latérale, ce qui pourrait entraîner un conflit avec les classes CSS générées par le post_class () balise de modèle lorsque nous venons de créer une boucle plus tard.

Maintenant, si vous actualisez vos écrans d’administrateur, vous verrez le type de message personnalisé affiché:

Ajoutez maintenant quelques barres latérales de la même manière que vous ajouteriez un message normal. Voici les miens:

Une de mes barres latérales consiste en rien qu'une image sélectionnée. C'est délibéré, car la boucle que je vais créer va générer des images en vedette.

Création d'une fonction pour afficher les barres latérales

Pour le moment, vos barres latérales ne s'affichent pas sur votre site, car vous ne les avez pas ajoutées à votre thème. Donc, la prochaine étape consiste à écrire une fonction qui utilise WP_Query pour afficher les messages de la barre latérale.

Créer la fonction

De nouveau dans votre fichier de fonctions, ajoutez ce qui suit:

function tutsplus_sidebars () $ args = array ('post_type' => 'sidebar_post'); $ query = new WP_query ($ args); if ($ query-> have_posts ()) ?> have_posts ()): $ query-> the_post (); / * démarre la boucle * /?>

Jetons un coup d'oeil à travers ce code pour identifier ce qu'il fait:

Tout d'abord, il crée une fonction appelée tutsplus_sidebars (), que nous ajouterons plus tard à la sidebar.php fichier.
À l'intérieur de cette fonction, il définit les arguments de WP_Query, à savoir que le type de poste est sidebar_post.
Il vérifie que la requête retourne des publications et si oui, démarre une boucle.
Il ouvre un de côté élément utilisant l identité() et post_class () générer un identifiant et des classes en CSS.
Il ajoute un h3 élément avec le titre du post dedans.
Il vérifie si le message a une image sélectionnée et si oui, le sort.
Il affiche le contenu de la publication dans un section élément.
Il ferme le de côté élément, termine la boucle et utilise rewind_posts () réinitialiser la requête.

Maintenant, sauvegardez votre fichier de fonctions.

Ajout de la fonction au fichier modèle de la barre latérale

La fonction que vous venez d'écrire n'est attachée à aucun crochet, donc WordPress n'a aucun moyen de l'exécuter. Au lieu de cela, vous devez l'appeler dans votre sidebar.php fichier.

Ouvrez le sidebar.php déposer dans votre thème. Si vous travaillez avec un enfant du thème Vingt quinze, ce sera la copie que vous avez faite précédemment..

Si vous souhaitez que votre barre latérale ne soit composée que de ses publications et d'aucun widget, supprimez le code permettant de générer des widgets. Si vous souhaitez conserver les widgets, laissez-le dans.

Dans mon cas, je vais supprimer les widgets du fichier de la barre latérale de Twenty Fifteen, je supprime donc les lignes suivantes:

Ajoutez maintenant votre fonction pour afficher les barres latérales. Dans Twenty Fifteen, je l’ajoute tout à la fin de la sidebar.php fichier, après le fin si; ligne. Dans votre thème, vous pouvez l'ajouter où vous voulez la sortie des barres latérales:

Maintenant, jetez un oeil sur votre site. Les barres latérales seront affichées:

Ils ont encore besoin de style, nous y reviendrons bientôt. Mais d'abord, ranger les zones de widgets.

Désinscrire la zone du widget

Si vous travaillez avec un thème enfant et que vous ne souhaitez pas du tout utiliser de widgets dans votre barre latérale, vous éviterez toute confusion si vous supprimiez les zones de widget de votre thème enfant. Cela signifie qu'ils ne s'afficheront pas dans l'écran d'administration de Widgets. Si vous laissez une zone de widget enregistrée, les utilisateurs peuvent y ajouter des widgets et être déconcertés s'ils ne se présentent pas sur le site..

Si vous travaillez avec votre propre thème, il vous suffit de supprimer le code qui a enregistré ces widgets (ou de ne pas ajouter de zones de widget pour commencer). Mais si vous utilisez un thème enfant, vous ne pouvez pas modifier le thème parent. Vous devez donc utiliser le unregister_sidebar () fonction pour supprimer la ou les zones de widget dans votre barre latérale.

Dans le thème de votre enfant functions.php fichier, ajoutez ceci:

fonction tutsplus_unregister_sidebar_widget_area () unregister_sidebar ('sidebar-1');  add_action ('widgets_init', 'tutsplus_unregister_sidebar_widget_area', 15);

Cela désenregistre le sidebar-1 zone de widget, qui est l'ID de la zone de widget que j'ai retirée de la sidebar.php fichier. Notez que lors de l’attachement de la fonction à la widgets_init crochet d'action, j'ai ajouté une priorité de 15 pour s’assurer que cette fonction est exécutée après celle qui enregistre la barre latérale en premier lieu, qui a la priorité par défaut de dix.

Maintenant, mon écran d'administration Widgets n'affiche aucune zone de widget:

Styliser les barres latérales

Pour le moment, mes barres latérales ne s'alignent pas bien avec le contenu des autres barres latérales, comme l'indique la feuille de style Twenty Fifteen. Si vous utilisez votre propre thème, il est possible que vous ne rencontriez pas ce problème ou que vous rencontriez des problèmes différents que vous devez résoudre avec le style..

Pour résoudre le problème avec Twenty Fifteen, il vous suffit d'ajouter une ligne de code CSS. Ouvrez la feuille de style de votre thème enfant et ajoutez ceci:

.poteau latéral marge: 0 20%;

Maintenant, sauvegardez votre feuille de style et revoyez votre site:

C'est mieux! Maintenant les barres latérales affichent correctement.

Résumé

L'utilisation d'un type de publication personnalisé pour le contenu de votre barre latérale peut simplifier considérablement la tâche si les personnes qui modifient le site ne connaissent pas le code. Utiliser les publications de cette manière signifie qu’ils peuvent utiliser les écrans d’administrateur WordPress normaux pour créer des barres latérales, puis les afficher sur le site..

Si vous aimez, vous pouvez ajouter à cette technique en ajoutant des arguments supplémentaires dans WP_Query. Vous pourriez peut-être créer une taxonomie pour vos publications dans l'encadré latéral et les publications en sortie par taxonomie, ou générer un contenu différent (par exemple, inclure ou omettre le titre ou l'image sélectionnée) en fonction de la taxonomie (ou mieux, des métadonnées de publication). Ou vous pouvez ajouter un argument pour que les messages soient triés par menu_order et ajouter que lors de l'enregistrement de votre type de message.

Code