• Passer à la navigation principale
  • Passer au contenu principal
  • Passer à la barre latérale principale
Wpcours

Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact
Accueil » plugins » Insérer les liens relatifs à l’intérieur de vos articles

Insérer les liens relatifs à l’intérieur de vos articles

Màj le 9 juin 2014

On a déjà publié un article sur  comment ajouter les articles relatifs (Related Post) à la fin de vos articles sous Wordpress ? Aujourd’hui on va aller un peu plus loin, on essayant d’insérer des liens en relation à l’intérieur de vos billets, c’est à dire un menu de liens d’articles au milieu de votre article .


La première chose à faire est de télécharger ce plugin Display Posts Shortcode. Cette extension vous permet d’afficher des liens vers d’autres articles à l’aide d’un petit code inséré dans vos billets.

Comment Insérer les liens relatifs à l’intérieur de vos billets

Configurer  Display Posts Shortcode

Après l’installation et l’activation du plugin , il faut marquer les articles que vous voulez afficher comme « Related Post » , on va faire appel à ces bielles dans notre article actuel avec un petit code, ce dernier ressemblera à ceci:

[display-posts tag="lemonchicken" image_size="thumbnail"]

Vous trouverez une liste de codes ici. Vous pouvez également trouver d’autres informations sur CSS dans ce même lien , etc

Maintenant on va mettre notre petit code (Shotcode) déjà crée précédemment dans une div appellée “lefttags” :

<div id="lefttags">
<strong>More Lemon Chicken Posts</strong>
[display-posts tag="lemonchicken" image_size="thumbnail"]
</div> 

Ensuite on va faire un peu de style, pour que nos articles relatifs soient alignés à gauche (et un peu d’espace à droite). Ajoutez ce code à votre feuille de style:

 #lefttags {
float: left;
padding: 0 10px 0 0;
}

Pour styler les liens et miniatures vous pouvez utilisez le code CSS suivant :

 .display-posts-listing .listing-item {
   clear: both;
   list-style:none;
   margin: 5px 0 0 0;
}
.display-posts-listing img {
   float: left;
   margin: 0 10px 10px 0;
   height: 50px;
   width: 50px;
}

Voici le résultat :
article-relatifs-dans-vos-articles

Et c’est tout, il ne reste que d’insérer vos code dans l’endroit souhaité dans vos billets sans oublier les div.


Plus de cours et exercices corrigés :

  • 4 meilleurs plugins gratuits de sondages pour WordPress
  • 6 meilleurs plugins gratuits d’entête et menu flottant pour Wordpress (2022)
  • 5 meilleurs plugins Wordpress pour Google AdSense 2022
  • Ajouter une PopUp d’abonnement Feedburner à votre blog
  • 6 meilleurs plugins gratuits de témoignage (Testimonial ) pour WordPress

Interactions du lecteur

Laisser un commentaire

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

Barre latérale principale

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de Wpcours et recevez des cours et exercices corrigés Gratuitement.

Articles récents

  • Limiter la longueur minimale et maximale ‎de vos commentaires sous Wordpress
  • Antispam Bee : meilleure configuration à faire
  • 7 outils numériques pour organiser votre travail
  • Top 4 meilleurs plugins RSVP gratuits pour WordPress
  • Comment utiliser des images WebP sur WordPress pour accélérer votre site

© 2022 ·Wpcours.com · Mentions · Contact