Lorsque l’on blogue ou que l’on publie des actualités régulièrement, il est intéressant de pouvoir proposer un petit quelque chose à la fin de ses articles.

Parfois, on demande un partage sur les réseaux sociaux, parfois on propose des articles en relation. On peut aussi afficher des publicités ou faire bien d’autres choses.

Je ne vous le cache pas, il existe des extensions pour réaliser tout ça. Mais comment faire pour afficher vos propres ressources ?

C’est ce que nous allons voir avec ce snippet !

Sommaire

  1. Ajouter un bouton sous tous les articles de notre blog
    1. Afficher un contenu complémentaire aux articles d’une catégorie
      1. Comment ajouter un contenu avant un article
        1. Conclusion

          Imaginons que nous voulons…

          Ajouter un bouton sous tous les articles de notre blog

          Pour ce faire, copiez-collez le code suivant dans le fichier functions.php de votre thème enfant:

          // Ajouter du contenu après les articles

          add_filter('the_content', 'wpm_add_post_content');

          function wpm_add_post_content($content) { 
           
          	//Si on est sur un article
          	if(is_single()) { 

          		//On ajoute ce contenu. Notez le "." avant le "=" qui permet de concaténer ce texte après le contenu de l'article
          		$content .= '<div class="after-content">
          						<p>Ceci est mon bloc de texte après le contenu de mon article.</p>
          						<p><a href="#" class="bouton">En savoir plus</a></p>
          					</div>'; 
          	}
          	return $content;
          }

          On stylise un peu notre bloc avec du CSS en ciblant la classe after-content et bouton:

          .after-content {
          	background-color: #cecece;
          	padding: 15px!important;
          	text-align:center;
          	margin-top:30px;
          }

          .bouton {
          	border: 2px solid #666;
          	padding: 8px;
          	color: #666;
          	margin-bottom: 15px;
          }

          Nous sommes d’accord, le rendu est assez basique mais voici ce que ça nous donne :

          bloc perso article snippet wpmarmite

          Après libre à vous d’utiliser le CSS adéquat pour que cela concorde avec la charte graphique de votre site.

          Maintenant essayons d’aller un peu plus loin. Que faire pour…

          Afficher un contenu complémentaire aux articles d’une catégorie

          Je vous rassure, c’est assez simple. Nous allons reprendre le snippet d’origine et l’améliorer un peu. Voyez plutôt :

          // Ajouter du contenu après les articles d'une catégorie

          add_filter('the_content', 'wpm_add_post_content_cat');

          function wpm_add_post_content_cat($content) { 
           
          	//Si on est sur un article de la catégorie d'identifiant 'ma-categorie'
          	if(is_single() && in_category('ma-categorie')) { 

          		//On ajoute ce contenu. Notez le "." avant le "=" qui permet de concaténer ce texte après le contenu de l'article
          		$content .= '<div class="after-content">
          						<p>Ceci est mon bloc de texte après le contenu de mon article.</p>
          						<p><a href="#" class="bouton">En savoir plus</a></p>
          					</div>'; 
          	}
          	return $content;
          }

          Et comment faire pour afficher un contenu différent sous les articles de plusieurs catégories ?

          Là encore, on peut adapter notre snippet de cette manière :

          // Ajouter du contenu après les articles de certaines catégories
          add_filter('the_content', 'wpm_add_post_content_cats');

          function wpm_add_post_content_cats($content) { 
           
          	//Si on est sur un article
          	if(is_single()) { 
          		
          		// Pour les articles classés dans 'ma-categorie'
          		if(in_category('ma-categorie')){

          			// On ajoute ce contenu. Notez le "." avant le "=" qui permet de concaténer ce texte après le contenu de l'article
          			$content .= '<div class="after-content">
          							<p>Ceci est mon bloc de texte après le contenu de mon article.</p>
          							<p><a href="#" class="bouton">En savoir plus</a></p>
          						</div>'; 

          		}else if(in_category('Mon autre catégorie')){
          			// Pour les articles de la catégorie "Mon autre catégorie"
          			$content .= '<div class="after-content">
          							<p>Ceci est mon bloc de texte après le contenu des articles classés dans "Mon autre catégorie".</p>
          							<p><a href="#" class="bouton">En savoir plus</a></p>
          						</div>'; 

          		}else if(in_category(4)){
          			// Pour les articles de la catégorie n°4
          			$content .= '<div class="after-content">
          							<p>Ceci est mon bloc de texte après le contenu des articles classés dans la catégorie d'ID 4.</p>
          							<p><a href="#" class="bouton">En savoir plus</a></p>
          						</div>'; 
          		}else{
          			// Pour les articles des catégories restantes (cas par défaut)
          			$content .= '<div class="after-content">
          							<p>Ceci est mon bloc de texte après le contenu des articles classés dans la catégorie d'ID 4.</p>
          							<p><a href="#" class="bouton">En savoir plus</a></p>
          						</div>'; 
          		}

          	return $content;
          }

          Pour tester si un article appartient à une catégorie en particulier, le snippet utilise la fonction in_category(). Comme cela est expliqué dans le codex, on peut lui donner plusieurs paramètres :

          • L’identifiant texte (le slug) : ma-categorie ;
          • L’identifiant numérique (l’ID) : 4 ;
          • Le nom de la catégorie : Mon autre catégorie ;
          • Un tableau comprenant les éléments précédents : array('ma-categorie', 4, 'Mon autre catégorie') ;

          Dans le cas du tableau, la condition sera vérifiée si un article appartient à l’une des catégories présentes.

          Si vous avez envie d’afficher un contenu complémentaire en fonction d’une étiquette, c’est exactement la même chose sauf qu’il faut utiliser la fonction has_tag() au lieu de in_category().

          Avant de vous laisser, voyons…

          Comment ajouter un contenu avant un article

          Jusqu’à présent nous avons vu comment ajouter un bloc après les articles, voyons maintenant comment faire l’inverse.

          Après tout, cela peut s’avérer super pratique pour ajouter une bannière automatiquement sur vos articles (ou certains d’entre-eux si vous jouez avec les conditions).

          Comme d’habitude, cela se passe dans le fichier functions.php de votre thème enfant :

          // Ajouter du contenu avant les articles

          add_filter('the_content', 'wpm_add_post_content_before');

          function wpm_add_post_content_before($content) { 
           
          	//Si on est sur un article
          	if(is_single()) { 

          		//On ajoute notre contenu avant le contenu de l'article
          		$content = '<div class="before-content">
          						<p>Ceci est mon bloc de texte avant le contenu de mon article.</p>
          						<p><a href="#" class="bouton">En savoir plus</a></p>
          					</div>' . $content; 
          	}
          	return $content;
          }

          Dans ce snippet, on ajoute le code de notre encart au contenu que l’on veut afficher, puis on ajoute le contenu de l’article avant de le renvoyer. Vous voyez le principe ?

          Bien sûr, il faudra adapter le code CSS car j’ai changé le nom de la classe 😉

          Devenez un freelance WordPress accompli

          Trouvez les bons clients, vendez des sites rentables, et libérez-vous de vos contraintes​

          Découvrir la formation

          Conclusion

          En quelques lignes de code, il est possible d’ajouter du contenu après vos articles pour inciter vos lecteurs à poursuivre leur visite là où vous le souhaitez.

          Grâce aux fonctions de WordPress, on peut même afficher un contenu spécifique en fonction de la catégorie ou de l’étiquette de l’article. C’est tout bête, mais ça permet d’aider au mieux les visiteurs.

          À présent, c’est à vous de jouer avec votre site 🙂

          PS : À votre avis, qu’est-ce que la Marmite veut vous faire découvrir suite à la lecture de ce snippet ?