Créer une page de partenaires WordPress sans plugin

Mathieu Chartier CMS (WordPress...) 6 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 :

Télécharger “Page Partenaires WordPress”Partenaires.zip – Téléchargé 1679 fois – 5,73 Ko

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) :
add_filter('pre_option_link_manager_enabled', '__return_true');
  • 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.
<?php
// Récupération des liens
$bookmarks = get_bookmarks();

// Boucle pour chaque lien trouvé
foreach($bookmarks as $bookmark) {
	// Formatage du résultat
	$partenaires = '<div class="bloc-partenaire">'."\n";
	
	// Ajout de l'image à gauche (en fonction des liens, etc.)
	if(!empty($bookmark->link_image)) {
		if(!empty($bookmark->link_url) && $bookmark->link_url != "#") {
			$partenaires.= '<div class="img"><a href="'.$bookmark->link_url.'" target="'.$bookmark->link_target.'"><img src="'.$bookmark->link_image.'" alt="'.$bookmark->link_description.'"/></a></div>'."\n";
		} else {
			$partenaires.= '<div class="img"><img src="'.$bookmark->link_image.'" alt="'.$bookmark->link_description.'"/></div>'."\n";
		}
	} else {
		$partenaires.= '<div class="img"><img src="'.get_template_directory_uri().'/img/inconnu.png" alt="'.$bookmark->link_description.'"/></div>'."\n";
	}
	
	// Bloc de droite (contenant le nom et la description du lien)
	$partenaires.= '<div class="partenaire">'."\n";
		// Nom du lien
		if(!empty($bookmark->link_name)) {
			$partenaires.= '<h3>'.$bookmark->link_name.'</h3>'."\n";
		}
		
		// Ajout de l'URL du partenaire
		if(!empty($bookmark->link_url) && $bookmark->link_url != "#") {
			$partenaires.= '<p class="url">&raquo; <a href="'.$bookmark->link_url.'" target="'.$bookmark->link_target.'">'.$bookmark->link_url.'</a></p>'."\n";
		}
		
		// Ajout de la description du lien
		if(!empty($bookmark->link_description)) {
			$partenaires.= '<p class="desc">'.$bookmark->link_description.'</p>'."\n";
		}
	$partenaires.= '</div>'."\n";
	
	// Effacement du "float" en CSS (si présent !)
	$partenaires.= '<div class="clear"></div>'."\n";
	
	// Fermeture du bloc complet
	$partenaires.= '</div>'."\n";
	
	// Affichage du résultat
	echo $partenaires;
}
?>
  • 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…
#partenaires li {list-style:none;}
#partenaires .bloc-partenaire {margin-bottom:1em; font-size:.9em;}
#partenaires .bloc-partenaire:last-child {margin-bottom:0 !important;}
#partenaires .img img {max-height:7.8em; vertical-align:middle; overflow:hidden;}
#partenaires .img {width:25%; height:8em; line-height:7.8em; text-align:center; float:left; margin-right:.7em; border:1px solid #ccc; padding:2px;}
#partenaires .bloc-partenaire h3 {margin:.3em 0;}
#partenaires .bloc-partenaire .url a, #partenaires .bloc-partenaire .url {color:#ccc; font-size:.9em; font-style:italic;}
#partenaires .bloc-partenaire .desc {font-size:.8em; margin-top:.5em;}

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…

6 commentaires

  • Bonjour,
    Cette création de page partenaire peut-elle donc être faite sans connaissance technique particulière. Ou bien ce critère est toujours requis dans ces genres d'intervention même sans utilisation de plugin wordpress?

    • Bonjour,
      Si vous recopiez globalement ce qui est écrit dans l'article, vous aurez le même type de page que moi (seul le CSS pourra causer quelques "problèmes" visuels selon votre CSS existant, etc.). Disons que j'ai essayé de tout faire pour simplifier la tâche au maximum mais il est vrai qu'avoir des connaissances au moins en HTML-CSS serait un plus pour personnaliser davantage l'affichage final...

  • Bonjour,
    Et bien, selon vous, créer une page wordpress sans plugin est-elle toujours la solution la plus simple et avantageuse? Aussi quelle différence constatera-t-on visiblement une fois qu'on se rend sur une page wordpress sans plugin et une autre avec plugin?

    • Bonjour,
      Je n'ai pas dit que c'était la solution la plus simple, surtout que ce n'est pas le cas au fond, il est bien plus facile d'installer un plugin externe. En revanche, c'est plus avantageux sur plusieurs points : d'une part vous avez la liberté d'adapter le code à votre besoin et de l'optimiser parfaitement et d'autre part nous avons remarqué avec le temps que l'accumulation de plugins WordPress ralentissait généralement les sites web.
      C'est pour cette raison que la création d'une page wordpress sans plugin peut s'avérer plus optimisée mais en revanche, cela demande un peu plus de connaissances techniques...

  • Jurilegal dit :

    Merci pour le code, ça fonctionne parfaitement. Par contre, est-ce risqué de faire une page partenaire en y insérant des liens de partenaires?
    J'ai vu que Google pénalisait cela..

    • Bonjour,
      Google sanctionne les listes abusives de liens mais pas forcément les liens de partenaires ou autres, attention aux amalgames que certaines internautes avancent à ce sujet... Ce qui est dangereux, c'est de constituer des listes de liens très longues sans contenu autour, ce qui pourrait s'apparenter aux "fermes de liens" (ou farm links) combattues par Google, mais sincèrement, ces cas doivent être très rares...

  • Déposer un commentaire

    Répondre à référencement naturel Annuler la réponse

    L'adresse de messagerie ne sera pas publiée.* Champs obligatoires