Construire un plugin WordPress pour ajouter des biographies d'auteur à vos publications

De nombreux blogs populaires sont aujourd'hui écrits par plusieurs contributeurs. Aujourd'hui, nous allons créer un simple plugin WordPress qui nous permettra d'ajouter la biographie de l'auteur du post à la conclusion de chaque post, un peu comme vous le voyez sur Nettuts..

1. avoir une bio prêt

Si vous n'avez pas encore affiché les informations biographiques des auteurs, vous pouvez alors ajouter et modifier des informations biographiques en vous dirigeant vers le volet des utilisateurs depuis le tableau de bord WordPress, en sélectionnant un utilisateur et en complétant une courte biographie. Nous allons également ajouter un gravatar pour l'auteur. Veillez donc à définir une adresse électronique..

2. Créez les fichiers nécessaires

Nous devrons créer un seul fichier contenant les fonctionnalités de notre plugin. Lancez votre FTP de choix, et, dans le wp-content / plugins / dossier, créer un fichier appelé ntauthorbio.php. Pour que WordPress reconnaisse notre plugin, nous devons créer un commentaire d’en-tête rapide dans notre fichier, comme vous le faites en haut de style.css. Collez le code suivant dans votre fichier et, bien sûr, apportez les modifications nécessaires.

 / * Nom du plugin: Nettuts Bio du plugin URI: http://www.nettuts.com/ Description: Ce plugin ajoute une bio aux auteurs de son message Auteur: nettuts Version: 0.1 URI de l'auteur: http: //www.nettuts .com / * /

3. Fonctions et actions

Ensuite, nous allons créer la base de notre plugin. Collez ce qui suit après l'en-tête du commentaire d'ouverture.

 function author_bio_display ($ content) // c'est ici que nous allons afficher la bio function author_bio_style () // c'est là que nous allons styliser notre boîte function author_bio_settings () // c'est ici que nous allons afficher nos options d'admin function author_bio_admin_menu () // c'est ici que nous ajoutons notre plugin au menu d'admin add_action ('the_content', 'author_bio_display'); add_action ('admin_menu', 'author_bio_admin_menu'); add_action ('wp_head', 'author_bio_style');

"WordPress fournit des points d'ancrage pour permettre à votre plug-in de" se connecter "au reste de WordPress; c'est-à-dire d'appeler des fonctions de votre plugin à des heures précises et de le mettre ainsi en mouvement."

Ci-dessus, nous avons créé quatre fonctions dont notre plugin aura besoin pour fonctionner correctement. Chaque fonction a un objectif spécifique (comme indiqué ci-dessus) et est également liée à une action spécifique (à part author_bio_settings, qui sera appelé d'une autre fonction.

Lors du développement de plugins, il est important de comprendre ce qu'est un "hook". Un hook est un endroit dans le cycle en cours où nous pouvons nous connecter à WordPress et appeler nos fonctions. Par exemple, le crochet utilisé ci-dessus, pour author_bio_display, est le contenu; cela signifie que lorsque WordPress utilise le contenu (utilisé pour afficher le contenu principal d'un article / d'une page), il appellera d'abord la fonction que nous lui avons donnée.

• le contenu - le contenu de la page / post est affiché
• admin_menu - appelé lorsque la barre latérale du tableau de bord de l'administrateur est créée
• wp_head - nous permet d'ajouter du code aux balises head de la page. C'est pourquoi vous incluez wp_head () lors de la conception de vos thèmes.

4. La fonction d'affichage

La fonction la plus importante de notre plugin est la fonction d’affichage, qui gérera le processus d’affichage des informations après le contenu. Avant de commencer, il est important de noter que cette fonction accepte un paramètre, appelé $ contenu. Cela signifie que le contenu de la page / du message est transmis à notre fonction. Nous pouvons ensuite ajouter notre biographie de l'auteur..

Commençons par une simple déclaration if / else.

 function author_bio_display ($ content) // c'est ici que nous allons afficher la bio si (is_single () || is_page ()) $ bio_box = // placeholder; retourne $ contenu. $ bio_box;  else return $ content; 

Ci-dessus, nous vérifions si le contenu est affiché sur un seul post en utilisant est célibataire(), ou une page utilisant is_page (). Si l'un ou l'autre retourne vrai, nous pouvons poster notre boîte qui sera placée dans le $ bio_box variable. Sinon, si nous sommes sur une page différente, telle que les archives ou la page de couverture, nous devrions simplement renvoyer le contenu intact..

Maintenant, nous devons ajouter notre code pour que la boîte apparaisse, changez votre $ bio_box pour correspondre au code suivant.

 $ bio_box = '
 ".get_avatar (get_the_author_meta ('user_email'), '80'). ' '.get_the_author_meta (' display_name ').' 
'.get_the_author_meta (' description ').'
 
 
';

Le style, bien sûr, peut être modifié ultérieurement pour répondre à vos propres goûts, mais pour le moment, nous utiliserons une simple boîte, et nous ajouterons un peu de CSS pour le style sous peu.

Nous utilisons quelques fonctions ci-dessus pour récupérer nos données requises. get_avatar () est une fonction intégrée à WordPress qui renvoie le gravatar d’un utilisateur, s’il en a un, en fonction de son courrier électronique. Nous passons le get_avatar () fonction deux paramètres; l'email de l'auteur, et une taille pour l'image (80px * 80px dans notre cas).

La fonction get_the_author_metapeut récupérer toute information sur un utilisateur WordPress enregistré. Vous trouverez une liste complète des éléments que vous pouvez retourner sur WordPress Codex..

Si nous exécutons maintenant notre plugin, nous devrions voir quelque chose qui ressemble à ceci:

Ce n'est pas la plus jolie biographie, mais nous avons maintenant les fonctionnalités de base que nous recherchons. Si vous rencontrez toujours des problèmes, assurez-vous que l'auteur de l'article / la page a une biographie et / ou un gravatar, et s'assurer que le plugin a été activé dans la section plugins du tableau de bord. Parlons un peu les choses.

5. Le rendre joli

Si vous êtes un designer, voici votre chance de faire ce que vous voulez! Mon code ci-dessous est juste suffisant pour rendre notre boîte propre et simple. Pour donner un exemple d'utilisation de wp_head (), insérons le code CSS de cette zone dans la balise head de notre document. Cependant, vous pouvez aussi simplement placer ceci dans votre feuille de style.

Cette fonction author_bio_style () doit renvoyer un simple bloc de CSS.

 function author_bio_style () // c'est ici que nous allons styliser notre boîte echo ''; 

Le code ci-dessus ne nécessite pas beaucoup d'explications; CSS n'entre pas dans le cadre de ce didacticiel. Généralement, nous créons simplement une boîte avec une bordure et faisons flotter l'image à gauche. Enfin, nous ajoutons un séparateur pour nous assurer que la boîte est suffisamment grande pour contenir l'image et le texte. Vous pouvez également utiliser le hack de clearfix, ou même un débordement: hidden pour obtenir cet effet. En fin de compte, cela dépendra de votre mise en page spécifique.

Votre nouvelle boîte à crocs devrait ressembler au mien à présent; voir ci-dessous.

6. Créer une page de paramètres

Avant de terminer, voyons comment ajouter une page de paramètres dans le tableau de bord de notre plug-in. La plupart des plugins s'appuient sur une sorte de section de paramètres pour offrir un peu plus de flexibilité sans que l'utilisateur n'ait à éditer de code..

Nous pouvons ajouter de nombreuses options. tels que, où la boîte apparaît (en haut ou en bas), les couleurs utilisées, excluent certains utilisateurs, etc. Pour ce tutoriel, j'ai choisi de spécifier si le plugin peut apparaître uniquement sur les pages, uniquement les publications, ou les deux. Espérons que cela suffira à vous montrer les ficelles du métier. À ce stade, vous pouvez étendre les fonctionnalités comme bon vous semble.

Faire la page

Nous devons configurer une page dans le tableau de bord de l'administrateur. Pour ce faire, nous devons dire à WordPress quoi faire lorsque le admin_menu action déclenche. Pour compenser, nous allons éditer notre author_bio_admin_menu () pour ressembler au code ci-dessous:

 function author_bio_admin_menu () // nous ajoutons ici notre plug-in au menu administrateur add_options_page ('Auteur Bio', 'Auteur Bio', 9, nom de base (__ FILE__), 'author_bio_settings'); 

Le code ci-dessus crée une page d'options dans le tableau de bord et transmet les paramètres suivants:

• Nom du menu - Auteur Bio
• Titre de la page - Auteur Bio
• Privilège d'accès - 9 - ou uniquement accès administrateur
• Manipuler
• La fonction requise - author_bio_settings ()

Nous devons ensuite fournir à la page du contenu. Depuis que nous avons appelé author_bio_settings () lors de la création de la page, c'est la fonction que nous allons utiliser pour afficher notre formulaire d'options et mettre à jour la base de données.

La fonction de paramétrage

En termes simples, cette fonction doit afficher un formulaire avec les options. Il doit également vérifier si le formulaire a été soumis et, le cas échéant, stocker les nouvelles valeurs dans la base de données. Tout d'abord, concentrons-nous sur la création du formulaire.

 function author_bio_settings () // c’est là que nous allons afficher nos options d’administrateur $ options ['page'] = get_option ('bio_on_page'); $ options ['post'] = get_option ('bio_on_post'); écho ' 
 ". $ message." 

 
Paramètres bio de l'auteur
 
  
Quand afficher la biographie de l'auteur
  Des pages
  Des postes
 
  
 
'; 

Nous commençons par saisir quelques options de la base de données. Bien sûr, nous n’avons pas encore de méthode pour les configurer, elles seront donc vides pour le moment. Ensuite, nous affichons le formulaire, qui est déjà stylé par le tableau de bord CSS de WordPress. Vous remarquerez que nous affichons une variable (actuellement non définie) appelée $ message; ceci afin que nous puissions avertir l'utilisateur lorsque nous mettons à jour les paramètres s'il a réussi.

Nous imprimons nos options à la fin du code de case à cocher. Si l'utilisateur active une option, nous devons la stocker dans la base de données sous la forme "cochée" afin de cocher la case. Les fonctions que nous utilisons pour obtenir et définir les options sont get_option () et update_option () respectivement. La fonction get nécessite le nom de l'option (il est donc important d'être unique), et l'option de mise à jour nécessite le nom de l'option et la nouvelle valeur. Si la fonction de mise à jour ne trouve pas l'option, elle en crée simplement une nouvelle..

Jusqu'à présent, votre page devrait ressembler à:

Ajoutons maintenant notre code pour prendre les valeurs envoyées par le formulaire et mettre à jour les options de la base de données. Le formulaire contient une valeur cachée, appelée action, qui est mis à «mettre à jour». Nous vérifierons si cette valeur est définie et, le cas échéant, nous mettons à jour nos options. Ce code doit être placé en haut de notre autor_bio_settings () une fonction.

 if ($ _POST ['action'] == 'update') $ _POST ['show_pages'] == 'on'? update_option ('bio_on_page', 'vérifié'): update_option ('bio_on_page', "); $ _POST ['show_posts'] == 'sur'? update_option ('bio_on_post', 'vérifié'): update_option ('bio_on_post', "); $ message = '
Options sauvegardées
'; 

Si le formulaire a été soumis, nous utilisons l'opérateur ternaire (si vous n'êtes pas sûr de leur fonctionnement, recherchez-les - ils constituent un simple formulaire if / else) pour vérifier si les cases à cocher sont cochées ou non. Si tel est le cas, nous définissons l'option comme "cochée;" sinon, nous le mettons en blanc. Enfin, nous définissons le message affiché sur une boîte de dialogue réussie, déjà stylée par WordPress..

Changer la sortie

Maintenant, nous devrions pouvoir définir des options et les voir changer dans notre page d’options; Cependant, les fonctionnalités de notre plugin ne seront pas encore modifiées, car nous ne le lui avons pas dit. La dernière étape de notre projet consiste donc à faire en sorte que la fonction d’affichage réagisse à ces options. Dans notre author_bio_display () fonction, ajoutez le code suivant au début afin d’obtenir les options précédemment définies.

 $ options ['page'] = get_option ('bio_on_page'); $ options ['post'] = get_option ('bio_on_post');

Maintenant que nous avons ces valeurs, nous n'avons besoin d'exécuter le code d'affichage que si l'option est définie. Pour ce faire, nous modifions notre déclaration if en conséquence..

 if ((is_single () && $ options ['post']) || (is_page () && $ options ['page']))

Ici, nous avons mis en œuvre deux conditions qui, si elles sont remplies, entraîneront l’affichage de notre boîte. Pas trop dur, non? Voici notre plugin complet:

  ".get_avatar (get_the_author_meta (" user_email ")," 80 ")." ".get_the_author_meta (" display_name ")." 
".get_the_author_meta (" description ")."