Communauté
Rejoignez la communauté Geekeries sur Google+ › Découvrez mag.geekeries.fr
Afficher les articles similaires en image et sans plugin !

Afficher les articles similaires en image et sans plugin !

Publié par Valentin dans Développement web
Modifié le 30 mars 2013 à 13:00.

Voici une petite astuce qui vous permet d’afficher en bas de chaque articles ou pages les miniatures des articles traitant du même sujet ; un module « Articles similaires ». Ce module est particulièrement utilisé pour optimiser le trafic d’un blog, pour atteindre le visiteur afin qu’il soit capté et ainsi faciliter la naviguation dans le contenu de votre blog. En y ajoutant une image, ce principe peut être multiplié par 10.

Ce module fonctionne grâce à un bout de code que je vous avais publié ici ;
Lire : Afficher les miniatures des articles de votre blog. Ce code récupère la première image que vous avez envoyée sur votre serveur pour illustrer votre article ou votre page. Cependant, il faudra configurer la taille des miniatures dans les réglages de WordPress.

La bonne méthode

Pour afficher les articles similaires en image, il vous suffit de coller le code suivant, là où vous souhaitez apparaitre ce nouveau module. Une fonctionnalités regroupant beaucoup de lignes de codes, mais cela vous permet, selon les mots-clefs de vos articles d’afficher les relations. Nous avons ajoutés une fonctionnalité pour afficher l’image de présentation des articles. Entièrement personnalisable, il vous suffit de modifier la présentation pour avoir le résultat voulu.

<?php
  $backup = $post;  //Sauvegarde des objets
  $tags = wp_get_post_tags($post->ID);
  $tagIDs = array();
  if ($tags) {
  $tagcount = count($tags);
  for ($i = 0; $i < $tagcount; $i++) {
  $tagIDs[$i] = $tags[$i]->term_id;
}
  $args=array(
  'tag__in' => $tagIDs,
  'post__not_in' => array($post->ID),
  'showposts'=>4,
  'orderby'=>rand
);
  $my_query = new WP_Query($args);
  if( $my_query->have_posts() ) {
  while ($my_query->have_posts()) : $my_query->the_post();
?>
<?php
  global $post;
  $args = array(
  'post_type' => 'attachment',
  'post_mime_type' => 'image',
  'numberposts' => 1,
  'orderby' => 'menu_order',
  'order' => 'ASC',
  'post_parent' => $post->ID
);
  $images = get_posts($args);
?>
<?php // 4. Loop through the images and show them
  if($images)
{
  foreach($images as $image)
{
  echo wp_get_attachment_image($image->ID, $size='medium');
      }
}
  else
      {
  echo '';
}
?>
	<p>
		<a href="<?php the_permalink() ?>" title="Liens vers <?php the_title_attribute(); ?>">
			<?php the_title(); ?>
		</a>
	</p>

L’ancienne méthode

Tout d’abord, il faut créer la fonction présentée dans l’article que je cite plus haut. Cette fonction est à ajouter dans le fichier « functions.php » de votre thème entre les balise habituelle de PHP : . Il n’y a pas grand-chose à modifier, a moins que vous préfériez personnaliser a votre sauce l’affichage de l’image ou rajouté des fonctions ! Si c’est le cas n’hésitez pas à partager ! Cette fonction ne sert qu’à récupérer la dernière image de l’article concerné. Par la suite nous allons appeler la fonction pour simplement afficher l’image des articles similaires.

function getpostgk_img($postId) {
$iPostID = $postId;
$arrImages =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $iPostID );
if($arrImages) {
$arrKeys = array_keys($arrImages);
foreach($arrImages as $oImage) {
$arrNewImages[] = $oImage;
}
for($i = 0; $i < sizeof($arrNewImages) - 1; $i++) {
for($j = 0; $j < sizeof($arrNewImages) - 1; $j++) {
if((int)$arrNewImages[$j]->menu_order > (int)$arrNewImages[$j + 1]->menu_order) {
$oTemp = $arrNewImages[$j];
$arrNewImages[$j] = $arrNewImages[$j + 1];
$arrNewImages[$j + 1] = $oTemp;
}
}
}
$arrKeys = array();
foreach($arrNewImages as $oNewImage) {
$arrKeys[] = $oNewImage->ID;
}
$iNum = $arrKeys[0];
$sThumbUrl = wp_get_attachment_thumb_url($iNum);
$sImgString ='';
echo $sImgString;
}
}

Commençons maintenant la modification de votre thème. Principalement, ce module est utilisé dans la page d’article ou de pages de WordPress, c’est-à-dire « single.php« . Le code est à placer dans la boucle de wordpress, pour la récupération de l’ID de l’article l’article et ainsi généré la liste des articles similaires grâces aux catégories. Pour une optimisation de votre fichier PHP je vous conseille quand même de créer un nouveau fichier PHP dans le dossier de votre thème.

Ce fichier contiendra le code PHP et ainsi il sera beaucoup plus simple d’appeler le module n’importe où sur votre blog. Le code qui vous permet d’appeler un fichier de votre dossier thème se trouve à la fin de l’article. Par la suite, vous pouvez personnaliser l’affichage des images, changer les liens, etc. Par défaut, le titre du lien de l’image contient un petit extrait de l’article concerné, précédé du titre de l’article. Mais, maintenant voici la petite astuce du jour !

<?php
$backup = $post;
$tags = wp_get_post_tags($post->ID);
$tagIDs = array();
if ($tags) {
$tagcount = count($tags);
for ($i = 0; $i < $tagcount; $i++) {
$tagIDs[$i] = $tags[$i]->term_id;
}
$args=array(
'tag__in' => $tagIDs,
'post__not_in' => array($post->ID),
'showposts'=>5,
'orderby'=>rand
);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Lire l'article : <?php the_title_attribute(); ?>"><?php getpostgk_img($post->ID); ?></a>
<?php endwhile;  } }  $post = $backup; wp_reset_query(); ?>

Comme dit plus haut, voici une petite astuce pour inclure un fichier de votre dossier thème dans single.php ou n’importe qu’elle autre fichier. Si par exemple le fichier contenant le code précédant s’appelle « related.php », nous allons utiliser cette fonction. (Uniquement pour ceux qui veulent un code propre)

<?php include (TEMPLATEPATH . "/related.php"); ?>