Dans ce tutoriel «Divi Related Posts», je vais vous montrer comment afficher des articles similaires sous vos articles de blog.

Malheureusement, Divi n’offre pas la possibilité d’afficher des articles similaires sous un article de blog par défaut. Mais ne vous inquiétez pas: il existe différentes solutions. Le meilleur moyen (pour moi) est de coller un petit extrait de code, puis d’afficher automatiquement des articles similaires par catégorie ou par mot-clé. La bonne chose est que vous n’avez pas besoin d’un plugin pour cela et cela ne ralentit pas le site. Je vais vous montrer exactement comment faire cela dans un instant.

Mais commençons par les options les plus simples pour tous ceux qui ne veulent rien programmer.

Articles liés à Divi avec le « Module Blog »

Quiconque crée ses publications avec le Divi Pagebuilder peut facilement le faire Module BLOG insérer sous le message. Sélectionnez ici le nombre de contributions à afficher et entrez la catégorie souhaitée. Fini.

L’avantage de cette méthode est que vous n’avez rien à installer et que vous pouvez démarrer immédiatement. L’inconvénient est que, d’une part, vous devez créer tous les articles avec le constructeur de pages. D’autre part, vous devez sélectionner manuellement les catégories pour chaque publication.

Articles liés à Divi utilisant des plugins WordPress

Si vous voulez que ce soit un peu plus confortable, installez une extension pour Divi. Il existe déjà de nombreuses solutions ici, grâce auxquelles vous pouvez ensuite insérer des «Articles connexes» assez confortables sous vos articles. Voici une sélection des solutions les plus populaires:

Une bonne solution en particulier pour le thème Divi est Développer Divi. Ici, vous disposez de nombreux outils supplémentaires, y compris la possibilité d’insérer des articles similaires sous l’article.

-> Développer Divi

Un plugin très connu pour WordPress est Related Posts. Ici, vous pouvez afficher des liens et des liens avec des images correspondant à l’auteur ou à la catégorie sous l’article.

-> Articles connexes

Top chien est en sécurité Un autre plugin pour les articles connexes. J’ai aimé l’utiliser pendant longtemps. Surtout, vous pouvez afficher la sélection ici par catégorie ou par tag / mot-clé. Le point fort pour moi est que le plugin vérifie si l’article a été classé dans plusieurs catégories ou si plusieurs mots-clés ont été attribués. dans ce cas, les articles avec le plus grand chevauchement sont affichés.

-> Un autre plugin pour les articles connexes

Articles liés à Divi sans plugin

D’accord, arrivons maintenant à la meilleure solution pour moi. Nous ajustons un peu notre blog puis listons automatiquement les articles par tag (ou catégorie). Commençons par la sortie par jour / mot-clé. Dans cette vidéo, je décris chaque étape en détail:

Étape 1: Copiez Single.php

Nous devons d’abord copier le fichier single.php dans notre thème enfant. Vous pouvez également modifier le fichier directement, mais les modifications seront perdues lors d’une mise à jour du thème. Si vous avez acheté votre thème chez Designers Inn, vous avez déjà un thème enfant actif. Sinon, vous pouvez le créer vous-même. ici j’ai des instructions pour vous: -> Créer un thème enfant.

Vous pouvez trouver le fichier dans le dossier wp-content / themes / THEMENAME / single.php

Étape 2: Où les messages associés doivent-ils être affichés?

Ouvrez maintenant le fichier single.php et recherchez l’endroit où vous souhaitez afficher vos publications similaires. Cela pourrait être en dessous des commentaires. pour ce faire, marquez le point entre

et en attendant; ?>.

Je voudrais afficher mes contributions au-dessus des contributions. j’ajoute donc le code au-dessus de la sortie PHP comments_open (dans la capture d’écran, j’ai marqué la position en bleu.

Étape 3: insérer le code

Ensuite, ajoutez le code PHP suivant où vous le souhaitez:

-> DIVI Related Posts PHP TAG

<!--RELATED POSTS BY TAG -->	
<div class="myrelatedposts">
<?php
  $orig_post = $post;
  global $post;
  $tags = wp_get_post_tags($post->ID);

  if ($tags) {
  $tag_ids = array();
  foreach($tags as $individual_tag) 
  $tag_ids[] = $individual_tag->term_id;
           
  $args=array(
      'tag__in' => $tag_ids,
      'post__not_in' => array($post->ID),
      'posts_per_page'=>6, // Number of related posts.
      'caller_get_posts'=>1
       );
 
      $my_query = new wp_query( $args );
      while( $my_query->have_posts() ) {
      $my_query->the_post();
      ?>

    <div class="myrelatedthumb">
      <a rel="bookmark" href="https://designers-inn.de/divi-related-posts-ohne-plugin/<?php the_permalink() ?>">
      <div class="myrelatedthumbimage"> 
      <?php the_post_thumbnail(array(300,300)); ?>
      </div>
      <div class="myrelatedthumbtitle"> 
      <?php the_title(); ?>
      </div>
      </a>
    </div>
 
        <?php }
        }
        $post = $orig_post;
        wp_reset_query();
        ?>
</div>	
<!--ENDE RELATED POSTS -->	

La brève explication suivante. J’ai mis le code dans un conteneur DIV avec la classe (myrelatedposts) afin que vous puissiez facilement formater la nouvelle section.

<div class="myrelatedposts"> 
<?php $orig_post = $post; global $post; 
$tags = wp_get_post_tags($post->ID); 
if ($tags) { $tag_ids = array(); 
foreach($tags as $individual_tag) 
$tag_ids[] = $individual_tag->term_id;

Dans la section suivante, vous déterminez le nombre de contributions que vous souhaitez afficher. Dans cet exemple, c’est 3. Pour 6 messages, changez simplement le nombre 3 en 6.

$args=array( 
'tag__in' => $tag_ids, 
'post__not_in' => array($post->ID), 
'posts_per_page'=>3, // Number of related posts to display. 
'caller_get_posts'=>1 );

D’accord, vient maintenant un code qui est moins excitant pour vous.

$my_query = new wp_query( $args ); 
while( $my_query->have_posts() ) { $my_query->the_post(); ?>

Vient maintenant la présentation des contributions individuelles. Vous pouvez formater la combinaison image / texte une fois. Utilisez la classe «myrelatedthumb» pour cela. Vous pouvez également personnaliser l’image de prévisualisation (classe «myrelatedthumbimage») et le titre (classe «myrelatedthumbtitle»).

<div class="myrelatedthumb"> 
<a rel="bookmark" href="https://designers-inn.de/divi-related-posts-ohne-plugin/<?php the_permalink() ?>">
<div class="myrelatedthumbimage"> 
<?php the_post_thumbnail(array(300,300)); ?>
</div>
<div class="myrelatedthumbtitle"> <?php the_title(); ?></div> </a> 
</div>

C’était fondamentalement ça. Maintenant, il n’y a que les dernières lignes:

<?php } } $post = $orig_post; wp_reset_query(); ?> 
</div> <!--ENDE RELATED POSTS -->

Étape 4: Ajustez le CSS des articles similaires

Maintenant que j’ai tout emballé dans des classes individuelles, nous pouvons également formater tous les éléments. Allez donc dans votre thème dans votre tableau de bord WordPress> dans votre éditeur de thème> dans le fichier style.css

Ajoutez le code CSS suivant ici après l’en-tête (les deux premiers / *… * /) ou à la toute fin.

-> Télécharger DIVI Related Posts CSS

Encore une fois, l’explication suivante: Tout d’abord, j’ai défini un arrière-plan pour toute la section. J’ai également ajouté un espace sous cette section afin que les articles ne collent pas directement aux commentaires.

.myrelatedposts { 
background: #f5f4f1; 
padding-bottom: 50px; 
}

Tout d’abord, le titre doit être affiché. Ici, je donne l’espace pleine largeur et ajuste l’espacement pour mon blog.

.myrelatedpostheading { 
width: 100%; 
padding: 50px 50px 50px 0px; 
}

Maintenant, j’ai fixé les contributions individuelles à environ 31% car je souhaite publier 3 articles côte à côte. Je n’utilise pas 33% parce que nous voulons avoir un peu d’espace entre les articles.

.single .myrelatedposts .myrelatedthumb { 
display:inline-block; 
width: 30.96%; 
}

Maintenant, je m’occupe de l’élément image / texte individuel. Je voudrais avoir un fond blanc avec moi, un peu d’espace à droite et tous les éléments doivent être alignés en haut.

.myrelatedthumb { 
background: #ffffff; 
margin-right: 2%; 
vertical-align: top; 
}

Il est temps de modifier les vignettes. N’oubliez pas que vous devez inclure une image en vedette dans votre message afin qu’elle puisse être affichée plus tard.

Pour moi, l’image doit utiliser 100% de la largeur et rester dans la boîte blanche sans bordure:

.myrelatedthumbimage { 
width: 100%; 
padding: 0px; 
}

Enfin, je formate le titre en fonction de mes besoins. La police doit être de 15 px et légèrement plus claire, la hauteur de la ligne peut être de 1,5, la couleur noire et l’espace autour de 20 px.

J’ai également défini la hauteur minimale à 130px. Cette hauteur correspond à 4 lignes dans ma mise en page, pour que les cases aient toujours la même hauteur.

.myrelatedthumbtitle { 
font-size: 15px; 
font-weight: 300; 
line-height: 1.5em; 
color: #000000; 
padding: 20px; 
min-height: 130px; 
}

Fini 🙂

Parfait. Fait. Cela signifie que les articles similaires sont maintenant affichés en fonction des balises de votre article. N’oubliez pas que vous devez également attribuer des balises / mots-clés pour que quelque chose puisse être affiché. Vous définissez les mots-clés ainsi que la catégorie directement dans votre article:

Facultatif: Sortie des publications liées à Divi par catégorie

Si vous préférez publier vos messages en fonction des catégories, vous pouvez suivre les instructions ci-dessus 1: 1. La seule différence est que vous devez maintenant copier le code suivant dans votre fichier single.php:

DIVI Related Posts Catégorie PHP

Le code ne change pas beaucoup. Ici uniquement par souci d’exhaustivité.

<!--RELATED POSTS BY CATEGORY -->
<div class="myrelatedposts">
<?php
// Default arguments
$args = array(
'posts_per_page' => 6, // How many items
'post__not_in' => array( get_the_ID() ), // Exclude current post
'no_found_rows' => true, // no pagination to speed up query
);

// current post category and add tax_query
$cats = wp_get_post_terms( get_the_ID(), 'category' );
$cats_ids = array();
foreach( $cats as $wpex_related_cat ) {
$cats_ids[] = $wpex_related_cat->term_id;
}
if ( ! empty( $cats_ids ) ) {
$args['category__in'] = $cats_ids;
}

// Query posts
$wpex_query = new wp_query( $args );

// Loop through posts
foreach($wpex_query->posts as $post) : setup_postdata($post); ?>

<div class="myrelatedthumb">
<a rel="bookmark" href="https://designers-inn.de/divi-related-posts-ohne-plugin/<?php the_permalink() ?>">
<div class="myrelatedthumbimage"> 
<?php the_post_thumbnail(array(300,300)); ?>
</div>
<div class="myrelatedthumbtitle"> <?php the_title(); ?>
</div>
</a>
</div>

<?php
// End loop
endforeach;

// Reset post data
wp_reset_postdata(); ?>

</div>
<!--ENDE RELATED POSTS -->

Conclusion: publier des articles similaires sous Divi

Ce n’est pas si difficile de mettre des articles similaires sous un article WordPress. Si vous utilisez le Divi Pagebuilder, vous pouvez le faire via le module BLOG ou via un plugin Divi. Alternativement, vous pouvez également utiliser un plugin WordPress. Ma solution est la manière manuelle. C’est un peu plus encombrant, mais la page s’exécute plus rapidement et nous n’ajoutons que ce dont nous avons vraiment besoin plus tard au code, de sorte que la page fonctionne plus stable et est moins sujette aux conflits.

Si le tutoriel vous a aidé, laissez un commentaire et partagez le message avec vos amis! Je te remercie!



Source link

Recent Posts