Comment ajouter WordPress Related Posts Without Plugins

L'un des gros avantages d'utiliser WordPress sont les plugins. Les plugins WordPress couvrent presque tout ce que vous pouvez imaginer, de l'extension de votre blog à un système de gestion de contenu, en passant par l'ajout de fonctionnalités astucieuses et l'optimisation de votre blog pour les moteurs de recherche - les possibilités sont infinies (et n'oublions pas tous les différents thèmes qui existent)..

Mais en utilisant trop de plug-ins, vous risquez de saturer votre blog WordPress et, au pire, de le "casser". Il existe de nombreux exemples de plugins incompatibles entre eux, ainsi que des plugins ralentissant votre blog..

Certaines des catégories de plugins WordPress les plus populaires sont basées sur l’ajout de “Articles Similaires” sur un blog. Puisque WordPress n’a rien de standard pour cela, tout le monde doit utiliser une sorte de plugin pour afficher les messages liés sur son site..

Cet article vous apprendra comment ajouter des publications associées avec des miniatures sur votre blog sans plug-ins, en gardant le tout simple, léger et accessible. Commençons!

Mais d'abord, pourquoi éviter les plugins?

Il y a un certain nombre de raisons pour lesquelles vous devriez toujours essayer d'utiliser le code et les services intégrés de WordPress, plutôt qu'un plugin. L'avantage principal est que vous n'avez pas besoin de faire appel à une tierce partie (le développeur du plugin) pour que votre blog fonctionne. Il existe de nombreux cas d'abandon de plugins populaires par leurs développeurs, laissant d'innombrables propriétaires de sites bloqués par des logiciels obsolètes et potentiellement vulnérables..

Une autre raison est que vous ne courez pas le risque d'utiliser un plugin gonflé qui puisse ralentir votre site ou, pire, contenir un morceau de code malveillant, bien que cela soit rare, à condition que vous obteniez vos plugins dans le répertoire officiel WordPress..

Mise en route: publications connexes avec des vignettes

Cette fonctionnalité, comme la plupart des autres publications, est conçue pour être placée sur votre page d'article principale (single.php), mais vous pouvez l'utiliser presque n'importe où, tant que vous la conservez dans la boucle WordPress. Afin d’obtenir les articles liés, nous utiliserons les étiquettes d’attributs attribuées aux articles individuels..

Vignettes

WordPress propose maintenant un système de vignettes intégré, dont nous aurons besoin ici. Pour l'activer, ajoutez ce code à votre fichier functions.php dans votre dossier de thèmes (dans la plupart des cas, il y est déjà)..

 add_theme_support ('post-vignettes');

Vous pouvez également définir la largeur et la hauteur des vignettes en ajoutant une autre ligne au code:

 add_theme_support ('post-vignettes'); set_post_thumbnail_size (100, 50, vrai);

Important: Lors de l'ajout d'images à des publications, pour créer une vignette, vous devez, dans le panneau de téléchargement des images, sélectionner “Utiliser comme image sélectionnée”. Cela va créer la vignette pour le post.

Le code

  Articles Similaires
 ID); if ($ tags) $ tag_ids = array (); foreach ($ tags comme $ individual_tag) $ tag_ids [] = $ individual_tag-> term_id; $ args = array ('tag__in' => $ tag_ids, 'post__not_in' => array ($ post-> ID), 'posts_per_page' => 4, // Nombre de messages liés à afficher. 'caller_get_posts' => 1) ; $ my_query = new wp_query ($ args); while ($ my_query-> have_posts ()) $ my_query-> the_post (); ?>

Le morceau de code the_post_thumbnail (tableau (150,100) définit la taille de la vignette qui sera affichée, dans ce cas, largeur 150px, hauteur 100px.

Le CSS

Nous avons deux classes divs ici, “.Articles Similaires”, qui est le conteneur global div, et “.connexe” qui est la vignette individuelle et le lien au sein des .relatedposts. Nous supposerons que la largeur de la publication est le 640px standard. Le CSS:

 .relatedposts width: 640px; marge: 0 0 20 x 0; float: gauche; taille de police: 12px; .relatedposts h3 taille de police: 20px; marge: 0 0 5 px 0;  .relatedthumb margin: 0 1px 0 1px; float: gauche;  .relatedthumb img margin: 0 0 3px 0; padding: 0; .relatedthumb a color: # 333; texte-décoration: aucun; bloc de visualisation; rembourrage: 4px; width: 150px; .relatedthumb a: hover background-color: #ddd; couleur: # 000;

Le CSS ci-dessus rendra les vignettes de messages avec une largeur de 150 pixels, ce qui signifie que nous aurons besoin de 4 vignettes pour remplir la largeur de 640 pixels de la publication (y compris la marge entre elles). Vous pouvez régler cela comme vous le souhaitez. si vous voulez 5 vignettes, vous aurez besoin d'une largeur d'environ 100 pixels .relatedthumb.

Important: Veillez à définir la largeur des vignettes générées dans vos paramètres de média WordPress afin qu'elles correspondent à celles que vous avez définies dans CSS. De plus, il doit correspondre à la taille spécifiée dans le code php: the_post_thumbnail (tableau (150,100).

Exemple

Les articles liés devraient ressembler à ceci, comme cela a été utilisé par le blog de jeu DigitalBattle (qui utilise la technique exacte décrite dans cet article):

Techniques similaires

Ce n'est pas la seule façon de faire des posts liés sans plugins - il y a beaucoup de techniques et de guides qui vous montrent comment ajouter des posts sans plugins, en voici quelques-uns:

Articles liés avec des vignettes dans WordPress sans plugin (TechWalz)
Comment: publications liées avec des vignettes dans WordPress sans plugins (WPBeginner)
Comment ajouter des publications associées avec vignette sans plugin (WPCode)

Conclusions

Nous pouvons faire beaucoup avec les fonctionnalités intégrées offertes par WordPress, et dans de nombreux cas, nous n’avons pas besoin de recourir à des plugins tiers pour faire le travail. La prochaine fois que vous aurez besoin d'un plugin pour votre blog WordPress, voyez si vous pouvez obtenir la même fonctionnalité sans le plugin. Creusez, cherchez une alternative sur le Web. Vous serez surpris de voir combien il est possible avec WordPress out of the box.