Un widget généalogique dans vos articles WordPress

Ecrit par

Brigitte Billard

Publié le

Temps de lecture : 4 minutes


Dernièrement, Colleen Greene proposait à ses lecteurs le code qu’elle a mis en place sur son blog WordPress pour donner un aperçu de l’ancêtre dont elle parle en fin de l’article qui lui est consacré.

Voici à quoi ressemble ce petit résumé, qu’elle appelle « instantané » :

Instantané généalogique sur un article de Colleen Greene
Instantané généalogique sur un article de Colleen Greene

Y sont indiqués le nom de l’ancêtre à qui l’article est consacré, le nom de ses parents, de son conjoint, son lien de parenté avec l’auteur de l’article, et l’arbre descendant. Ces noms sont présentés sous forme de lien, et si vous cliquez sur un des liens, vous accédez à tous les articles consacrés à cette personne.

Quand j’ai lu cet article, j’ai tout de suite eu envie d’installer ça sur mon blog. Je trouve cette fonctionnalité vraiment pratique et conviviale, et comme Colleen avait partagé son code avec tous ses lecteurs, j’ai repris son travail, l’ai traduit et adapté à ma sauce pour le mettre en place.

C’est avec son acccord que je vous propose ici ce que j’ai mis en place sur le blog.

snapshot_5

Voici par exemple à quoi ressemble un des instantanés que j’ai déjà implémenté.

Mon adaptation de l'instantané créé par Colleen
Mon adaptation de l’instantané créé par Colleen

Il n’y a de lien que lorsque j’ai déjà consacré au moins un article à une des personnes mentionnées.

Vous voulez vous aussi mettre en place ce type de widget sur votre site WordPress ? Voici les étapes à suivre.

  • Tout d’abord, ce tutoriel ne s’applique que si vous hébergez votre blog sur une plateforme indépendante, genre un serveur infomaniak ou ovh sur lequel vous avez installé votre propre version de WordPress.
  • La première étape est de créer les ancêtres que vous souhaitez utiliser dans votre aperçu dans une des taxonomies de WordPress. Une taxonomie, c’est un moyen pour regrouper des choses de même nature. Dans WordPress, les tags et les catégories sont des taxonomies. J’utilise un plugin pour pouvoir gérer sur mon site plusieurs types de taxonomies, autres que les catégories et les tags : les branches de mon arbre sur ce blog, les lieux de décès, les unités, les villages de naissances, les mois de décès sur Vouille1418.com. J’ai choisi le plugin CPT UI que je trouve assez simple et j’ai créé un nouveau type de regroupement, que j’ai appelé Ancêtres.

snapshot_3

J’y crée les ancêtres pour lesquels je veux réaliser cet aperçu en indiquant le numéro de Sosa de mon arbre, pour m’y retrouver entre mes ancêtres homonymes. Cela va ensuite me permettre de créer le lien que j’utiliserai pour regrouper à l’écran tous les articles mentionnant un des ancêtres indiqués, sous la forme [monsite/taxonomie/ancêtre] soit par exemple pour Anne Crelot [www.chroniquesdantan.com/ancetre/anne-crelot-sosa-2767)]

  • Dans l’article que vous voulez consacrer à cet ancêtre, pensez à indiquer son identifiant dans la case de taxonomie correspondante, sinon le lien ne se fera pas.

snapshot_

  • Voici le code html correspondant à l’aperçu ci dessus, à insérer dans votre article – enfin, pas tel quel, en remplaçant toutes les informations personnelles que j’ai laissées pour vous aider à déchiffrer le code, si vous n’êtes pas un pro du code.
<!-- ***** Genealogy Snapshot Box template code, added to ancestor blog posts ***** --> <!-- Start copying into raw HTML editor --> <div class="snapshot-box"> <h5>Aperçu généalogique</h5> <em>Nom:</em> <a href="https://www.chroniquesdantan.com/ancetre/anne-crelot-sosa-2767" target="_blank">Anne Crelot</a><br /> <em>Parents:</em> Jacques Crelot et Barbe Moreau<br /> <em>Epoux:</em> Mathurin Goret<br /> <em>Lien de parenté:</em> Aïeule de mon mari à la 11ème génération<br/> <em><strong>Arbre descendant:</strong></em> <ol> <li><a href="https://www.chroniquesdantan.com/ancetre/anne-crelot-sosa-2767" target="_blank">Anne Crelot</a></li> <li><a href="https://www.chroniquesdantan.com/ancetre/anne-angelique-goret-sosa-1383" target="_blank">Anne Angélique Goret</a></li> <li>Marie Thérèse Lebois Duclos et <a href="https://www.chroniquesdantan.com/ancetre/catherine-lebois-duclos-sosa-691" target="_blank">Catherine Lebois Duclos</a></li> <li>Thérèse Devienne et Angélique Landes</li> <li>Françoise Berard et Denis Bonaventure Pelletier de Chambure</li> <li>Alexandre Louis Claude Pelletier de Chambure</li> <li>Louise Arnoldine Pelletier de Chambure</li> <li><a href="https://www.chroniquesdantan.com/ancetre/marie-jeanne-jung-sosa-21" target="_blank">Marie Jeanne Jung</a></li> <li>Daniel Karcher</li> <li><a href="https://www.chroniquesdantan.com/ancetre/christiane-karcher-sosa-5" target="_blank">Christiane Karcher</a></li> <li>mon mari</li> </ol> </div> <!-- End copying into raw HTML editor -->
  • Dans le fichier style.css de votre thème WordPress, vous allez maintenant devoir ajouter du code, pour formater votre widget et lui donner l’apparence qui convient à votre blog.
    Voici quels sont les ajouts et modifications que j’ai faits

* pour donner un style précis à l’aperçu

/* ***** Genealogy Snapshot Box styling, added to child theme custom style sheet style.css ***** */
.snapshot-box {
background:#f5f5f5;
border:2px solid #999999;
position:relative;
margin:2px 0px 10px 0px;
overflow:hidden; padding:1em;
}
/* ***** End Genealogy Snapshot Box styling ***** */

* j’ai aussi adapté la balise ‘h5’

 {
	font-family: 'Verdana', sans-serif;
	font-size: 1.4rem;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 20px;
}
  • La dernière étape va vous permettre de gérer une bibliothèque de ces aperçus, que vous insérerez non en mettant directement du code à la fin de l’article, mais en insérant un Shortcode qui sera ensuite automatiquement mis à jour quand vous mettrez à jour la bibliothèque en question. Cette étape est à mon sens indispensable, parce que vous n’allez bien sûr pas créer dès maintenant tous les aperçus pour tous vos ancêtres. Si on reprend l’exemple d’Anne Crelot, je n’ai encore pas créé d’aperçu pour Daniel Karcher, le grand père de mon mari. Il n’y a donc pas de lien dans la fiche d’Anne Crelot. Quand je vais créer l’aperçu pour Daniel – parce que ca arrivera bien à un moment – il n’est pas question que je reprenne tous mes articles pour aller les corriger à la main. Voilà pourquoi j’utilise une bibliothèque de tous les aperçus que je crée, et quand je mets à jour la fiche d’un de mes ancêtres dans la bibliothèque, la mise à jour est répercurtée sur tout le blog, partout où cette fiche est utilisée. Pour gérer cette bibliothèque, j’utilise le plugin Post Snippets.

snapshot_6

Je ne suis pas une pro des tutoriels WordPress, alors si quelque chose n’est pas clair, ou si vous avez une question, n’hésitez pas à me la poser dans les commentaires.


6 réponses à “Un widget généalogique dans vos articles WordPress”

  1. Très bonne idée, vous avez une sacrée passion, bonne continuation pour vos prochains projets.

  2. Bonjour, bon billet 🙂 Cela semble très clair, cependant quand on est sur WordPress.com, il faut payer pour pouvoir éditer les feuilles de style dont je n’ai aucune utilité. Pas très pratique et ce n’est pas vraiment un « Widget »…

    Il est plus facile d’implémenter du code sur Généanet que sur WordPress (version commerciale en ligne).

    1. Brigitte

      bonjour et merci du commentaire
      effectivement, c’est pour ca que je précise que ca ne fonctionne pas sur wordpress.com

  3. Javais lu l’article de Colleen Greene voilà quelques semaines, mais je n’ai eu ni le temps ni le courage de me lancer… Vivement la retraite ! 😉

  4. Il va falloir que je ressorte mon anglais pour aller lire le tutoriel concernant wordpress.com. Merci beaucoup en tout cas je trouve cela super 🙂

  5. Pfiou ! là, tu m’épates…

Répondre à ElsasserWurtzle Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.


Continuez votre lecture

À propos de l’auteur :

Actualité

Mes services

Parlons ADN

Catégories

Rechercher

Archives

Membre de

Hébergement

Ce blog est hébergé depuis 2012 chez Infomaniak. Utilisez ce lien pour héberger vos blogs ou votre cloud sur leurs serveurs


Testez
MyHeritage

Abonnez-vous
au blog

Ne ratez plus nos mises à jour, inscrivez vous et vous recevrez un mail par semaine reprenant les derniers articles publiés sur le blog

Nous ne spammons pas ! Consultez notre politique de confidentialité pour plus d’informations.