Vous êtes ici : Accueil | Snippets WordPress | Articles | Ajouter un contenu personnalisé à la fin de chaque article

Ajouter un contenu personnalisé à la fin de chaque article

article snippet

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 !

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 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 😉

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 ?

Vous débutez ? Procurez-vous le Kit du Freelance WordPress

Trouver les bons clients, leur vendre des prestations et bien communiquer avec eux n'est pas inné. Évitez les galères et gagnez du temps en vous formant aux côtés de ces 7 professionnels.

Commencer maintenant

    Laisser un commentaire

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

    La Marmite ne peut malheureusement pas fournir de support. Merci d'en tenir compte dans votre commentaire 😉

    Si vous ne lui en voulez pas, donnez-lui un j'aime sur Facebook :



    1a4d235e8fc2d0b6b80ebf001ddce851OOOOOOOOOOOO
    25 Partages
    Partagez11
    Tweetez6
    Partagez8