Utiliser les codes courts et les champs personnalisés de WordPress pour les notes de bas de page

En termes de conception et de développement Web, les tâches que vous pouvez réaliser avec WordPress sont presque illimitées. Vous pouvez utiliser un agrégateur de nouvelles, créer une plateforme de financement participatif, vendre des billets pour le premier concert de votre groupe, afficher vos œuvres dans une galerie virtuelle, etc..

Vous pouvez également créer un clone Wikipédia et imiter ses fonctionnalités, telles qu'une section "table des matières" ou des références croisées. Dans ce tutoriel, nous allons utiliser des codes abrégés et des champs personnalisés afin de créer une section "Notes de bas de page" fonctionnelle..

Introduction aux notes de bas de page

J'ai été contacté par un professeur d'université qui souhaitait publier certains de ses articles en ligne. Il avait ce petit … Edu.tr/~hisname/ page d'accueil et a décidé qu'il était temps de transférer le contenu sur un "vrai" site Web et il a entendu que WordPress serait le bon choix à utiliser comme système de gestion de contenu.

Comme vous le savez, les articles scientifiques peuvent inclure de nombreux commentaires, citations et références externes, généralement appelés notes de bas de page. Lorsqu'il a déclaré qu'il souhaitait que ses articles soient plus interactifs, j'ai immédiatement pensé à une fonctionnalité similaire dans Wikipedia et j'ai commencé à rechercher des plugins offrant ce type de service..

Bien que j'en ai trouvé un, parmi beaucoup d'autres, j'ai pensé que ce serait un bon exercice si je tentais de créer mon propre plugin pour ajouter des notes de bas de page. C'est précisément ce que j'ai fait et je vais suivre le processus tout au long du reste de cet article..

Construire notre plugin Notes de bas de page

Le processus de création de notre plugin sera relativement facile, même pour les développeurs débutants. Nous allons:

créer notre fichier plugin
construire notre shortcode,
coder notre fonction de pied de page
écrivez une autre fonction qui ajoute les notes de bas de page au contenu de l'article en l'accrochant à le contenu.

Morceau de gâteau à droite?

Si vous êtes un débutant désireux d’apprendre les bases du développement de plugins WordPress, ce tutoriel contient la quantité suffisante d’informations pour vous aider à démarrer. Et si vous êtes un peu plus avancé, ce tutoriel peut vous donner de bonnes idées.

1. Créer le fichier de plugin

Si vous êtes familier avec les plugins (comme pour construire ou voir le code source de l'un), sachez que nous devons démarrer les fichiers principaux de notre plugin avec les informations d'en-tête suivantes:

Les lignes sont toutes explicites, je ne vais donc pas entrer dans les détails en vous disant que la version représente le numéro de version de votre plugin.

Bien que je puisse donner quelques conseils:

La seule ligne requise est la ligne "Nom du plugin"; le reste est optionnel (mais très utile).
Vous pouvez utiliser du code HTML simple dans la ligne "Description".
Il existe d’autres "noms d’en-tête" que vous pouvez trouver sur la page "En-tête de fichier" du Codex..

Maintenant que nous en avons terminé avec les en-têtes, passons à l'étape où nous construisons notre shortcode!

2. Créer le shortcode

Si vous lisez mes anciens tutoriels, vous vous souviendrez que je amour l'API Shortcode. En tant que tel, c'est ma partie préférée.

Comme indiqué précédemment, notre shortcode aura pour but d'afficher le numéro de notre note de bas de page, que vous pouvez spécifier en tant que paramètre. Puisqu'il ne s'agit que de quelques lignes de code simples, écrivons le code maintenant et passons juste après:

 '1'), $ atts)); revenir '^{['. $ id. ']}';  add_shortcode ('ref', 'footnotes_sc'); ?>

Comme vous pouvez le constater, le code est vraiment très simple. Voici ce qu'il fait:

Nous avons créé une fonction nommée notes_sc,
Nous avons créé un seul paramètre nommé identifiant (avec une valeur par défaut de "1") et transformé en une variable avec le extrait() une fonction,
nous revenir une simple chaîne avec un lien vers la note de bas de page correspondante,
Et enfin, nous avons défini un shortcode nommé [ref] et accroché notre notes de bas de page_sc () fonctionner à elle.

À partir de maintenant; chaque fois que nous utilisons le [ref] shortcode (où X est l’ID de la note de bas de page), WordPress imprimera le numéro de référence tel que ^[1].

3. Création de la fonction de note de bas de page

Pour créer des notes de bas de page, nous devons utiliser les "champs personnalisés" de WordPress. La fonction ci-dessous n'est pas un "code avancé", mais comme elle est un peu longue, nous pourrions aussi bien la documenter étape par étape. Et c'est parti:

 $ get_post_meta);  // si $ footnotes_array n'est PAS vide… if (count ($ footnotes_array)> 0) //… démarrez la variable $ output avec un DIV… $ output = ''; //… utilise les valeurs par défaut des arguments de notre fonction $ output. = '<' . $titletag . '>'. $ titre. ''; $ output. = '<' . $listtag . '>'; // liste les notes de bas de page avec les ID de référence correspondants pour chaque ($ footnotes_array as $ note de bas de page) foreach ($ note de bas de page en tant que $ ref_id => $ footnote_content) $ output. = ''. $ footnote_content. '
';  // ferme les balises HTML $ output. = ''; $ output. = '
';  // et retourne la variable $ output s'il s'agit d'un article ou d'une page unique if (is_singular ()) return $ output;

En bref; nous avons enregistré notre poste méta dans un tableau, rempli le $ sortie variable en transformant les notes de bas de page en une liste HTML et renvoyée $ sortie. Facile comme une tarte.

Utilisation de notre plugin Notes de bas de page

Utiliser le plugin est assez simple: si vous ajoutez des champs personnalisés nommés ref-1, ref-2, réf-3 et ainsi de suite, une section "Notes de bas de page" apparaîtra juste après votre article. Et nous avons déjà expliqué comment utiliser le shortcode, c'est tout ce que vous avez à faire..

Emballer

Maintenant que nous avons une fonction qui renvoie une liste HTML des notes de bas de page, il est temps d'ajouter cette liste sous nos articles.!

 C’est probablement la partie la plus facile de notre code puisque nous n’appelons notre fonction précédente que pour ajouter sa sortie après le contenu de la publication, puis lier cette nouvelle fonction à la nouvelle. le contenu filtre.
 Si vous ne souhaitez pas ajouter automatiquement la section "Notes de bas de page" sous le contenu, continuez et supprimez ces lignes. Au lieu de cela, vous devrez utiliser un tout petit peu de code dans votre thème, comme  à l'endroit où vous souhaitez afficher les notes de bas de page de l'article. Vous pouvez également changer les arguments par défaut de la fonction.
 Conclusion
 En fin de compte, le professeur a vraiment aimé ce que j'ai fait avec la fonctionnalité "Notes de bas de page" et je pense qu'il utilise toujours le site Web que j'ai créé - il utilise sa page d'accueil depuis plus de 10 ans et utilisera probablement WordPress plus longtemps. J'espère que ça vous a plu aussi. Si vous voulez accéder au code complet, vous pouvez le trouver ici.
 Avez-vous quelque chose à ajouter? S'il vous plaît partagez vos pensées avec nous en commentant ci-dessous. Et si vous avez aimé ce tutoriel, n'oubliez pas de le partager avec vos amis!



		
			
	   
	




Code