Créer une page de partenaires WordPress sans plugin

Article rédigé par Mathieu Chartier

Publié par dans Programmation le 21 août 2014

4 Commentaires

Les sites de présentation (ou « sites vitrines » si vous préférez) nécessitent souvent une page qui liste les partenaires ou sponsors afin de faire partager aux visiteurs et clients potentiels les marques et les organismes (entreprises, associations…) qui nous accompagnent.

Nous allons tenter de créer une page pour « partenaires » entièrement personnalisable en CSS sans plugin WordPress pour se faciliter la vie. Il existe bien entendu des extensions qui répondent à ce besoin mais l’accumulation d’extension n’est pas toujours un gage de réussite car elles peuvent pomper pas mal de ressources. Quand nous pouvons nous en passer, il est préférable de le faire, cela évite de gaspiller des millisecondes par-ci par-là qui peuvent nuire aux visiteurs et aux conversions de prospects…

Vous pouvez télécharger tous les codes présentés dans cet article ici :

Créer une page Partenaires WordPress sans plugin

Qu’est-ce qu’une page « partenaires » ?

Sur WordPress (et dans les autres CMS), le reproche est que les pages sont toujours constituées en « titre + contenu », ce qui ne permet pas d’avoir une liberté totale pour réaliser ce type de listing de partenaires. En effet, ces pages « partenaires » sont souvent constituées du nom des partenaires (oui c’est mieux si le logo n’est pas évocateur… :D), d’un logo ou d’une image, d’un lien vers les sites liés voire d’une petite description. Bien sûr, tout cela est adapté à chaque site et besoin mais ce sont les ingrédients courants…

Ici, nous n’utiliserons donc pas les champs « titre + contenu » classiques bien qu’ils permettraient de lister les partenaires et sponsors sans difficultés. Toutefois, il faudrait avoir une bonne connaissance du CSS et de l’HTML pour concevoir des pages de toutes sortes. Nous allons plutôt user de malice et d’outils à notre disposition, à savoir les « Liens » proposés par WordPress, la galerie des médias et une dose de PHP (codex WordPress, pas d’inquiétude ! :D), tout cela accompagné d’un habillage en HTML et CSS que vous pourrez bien entendu modifier à votre guise…

Les avantages sont doubles ici :

  • nous utilisons des fonctionnalités natives de WordPress qui ne vont donc pas trop surcharger les ressources déjà puisées par le site web (sans passer par une nouvelle table dans la base de données, sans faire appel à des filtres automatiques, etc.) ;
  • nous pouvons ajouter autant de partenaires que nécessaire (voire adjoindre un système de pagination si nous en dénombrons beaucoup), leur nombre est illimité…

Et alors, quel est le code de la page partenaires façon WordPress ?

Plusieurs étapes sont à respecter pour obtenir la page partenaires. Rien de bien compliqué, je vous rassure, mais il ne faut oublier aucun élément.

  • Ajouter la ligne suivante dans le fichier functions.php (si elle n’existe pas) pour activer le module de liens de WordPress (parfois activé par défaut selon les versions et les thèmes) :

  • Créer la fonction PHP reliant les « Liens » de WordPress. Il suffit de l’ajouter dans le modèle de page de votre choix et de l’adapter au besoin. Ici, la fonctionnalité récupère même l’attribut « target » (cible du lien) et permet d’afficher une image neutre en cas d’absence de logo, un lien ou non, une description si besoin, etc.

  • Ajouter le code CSS personnalisé selon l’affichage prévu dans la fonction. Cette partie est totalement personnalisable, tout comme l’agencement des blocs dans la fonction précédente…

Utiliser la page partenaires pour WordPress

L’usage est assez simple, les Liens WordPress permettent d’ajouter un nom, une URL de logo, une URL de site ou encore une description (mais aussi d’autres informations) qui peuvent être récupérées par la fonction get_bookmarks() du CMS (il s’agit d’un tableau de données). Nous pouvons donc récupérer ce qui nous intéresse et créé une page partenaires spécifiques à l’aide d’un modèle de page (commentaires à mettre en haut de la page PHP pour créer le modèle, comme ici : <?php /* Template Name: Page partenaires */ ?>).

La seule problématique est relative aux images car le module de liens ne permet d’entrer que des URL, pas d’ajouter dynamiquement une image. Deux solutions s’offrent donc à vous :

  • Vous allez chercher le logo des partenaires sur d’autres sites en récupérant l’URL de l’image. Cela implique que le logo doit avoir un format correspondant à vos souhaits et vous empêche d’optimiser l’image.
  • Vous récupérez le logo (avec autorisation bien sûr), vous l’adaptez et l’optimisez puis l’ajouter via la galerie des médias. Ainsi, il ne reste qu’à recopier l’URL de l’image fournie dans la galerie…

Voilà, j’espère que cette petite astuce vous servira ou vous donnera des idées pour la suite. Rien de folichon ici mais j’étais dans mon mois « WordPress », je voulais vous en faire profiter afin de vous montrer le potentiel de ce CMS qui ne cesse de nous prouver qu’il dispose d’un étalage de fonctionnalités et de possibilités infinies sans pour autant dépendre de plugins externes…

Blog web d'Internet-Formation et Mathieu Chartier
Les 3 précédentes publications

Créer un widget de contact complet sur WordPress

Publié par Mathieu Chartier dans Programmation le 11 août 2014 - Aucun Commentaire

WordPress est rempli de bonnes intentions mais ne permet pas toujours d’obtenir ce que l’on cherche, il faut parfois mettre les mains dans le code pour créer des systèmes personnalisés à la hauteur de nos attentes. [...]

Bloquer la soumission d’un formulaire de recherche WordPress

Publié par Mathieu Chartier dans Programmation le 7 août 2014 - Aucun Commentaire

J’étais en train de mettre à jour mon extension WP-Advanced-Search (moteur de recherche avancé pour WordPress) lorsqu”il m’est passé par la tête l’idée de bloquer la soumission du formulaire de recherche natif de WordPress. [...]

Twitter Publicités (Ads) : premier test et retour d’expérience

Publié par Mathieu Chartier dans Webmarketing le 25 juillet 2014 - 8 Commentaires

Ouvert en grande pompe au marché français depuis le 16 juillet 2014, Twitter AdsTwitter Publicités dans la langue de Molière – se dévoile enfin à nous et attire toutes les convoitises. [...]