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.
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 : < ?php et ?>. 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 ='<img src="' . $sThumbUrl . '" width="60" height="60" alt="" title="" />';
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"); ?>
Salut,
Moi j’ai beau rentré le code dans le fichier function.php et single.php je fais un tour sur mon blog, rien ne change..
Pourrai tu m’éclairer stp ?
J’ai voulu également affiché le nombre de fois qu’un article est vu en entrant un bout de code mais la aussi rien n’a changé.
Merci pour ce code, ca va me rendre un grand service ;)
Merci pour la portion de code ça marche du tonnerre je viens de le mettre en place sur mon blog super !
Bon ben j’ai essayé plusieurs réglages mais c’est lié entre le fichier related.php ET functions.php. C’est à en perdre la tête ! Si une âme charitable peut m’aider dans ma démarche je suis preneur.
Rectification : C’est mon fichier related.php qui me bug mon interface d’administration
Bonjour,
Excellent article et très facile à mettre en place, cependant j’ai un conflit avec ma page functions.php.
Quand je rajoute ton morceau de code je n’ai plus accès à mon interface d’administration, le problème c’est que je ne m’y connais pas du tout.
Pourrais-tu me donner un ptit coup de main ? je travaille en local mais je peux envoyer mon fichier functions.php par mail si ça peux faciliter.
:) Salut Val, 2 remarques:
1)regardes ta phrase « 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« , elle prête à confusion (le mot article 2 fois de suite, tu te réfère aux catégories, alors qu’il s’agit des tags – si j’ai bien compris ta démarche.
2)Je n’utilise que les catégories, j’ai donc modifier en conséquence ton code (Cf. plus bas), ça marche très bien, thubnails et tout, sauf que le code me tire à chaque fois les 2 mêmes articles, quelque soit le nombre d’articles demandé (je teste pour l’instant en Local, avec EasyPhp
3) Késaco?
Tu as bien mit « < ?php getpostgk_img($post->ID); ?> » dans le loop des articles similaires ?
Je doit te préciser que le code utilise les tags et les miniatures des images enregistré dans chaque article.
Pour ce qui est de « ID); ?> » je le met dans le single.php ?
Pour ce qui est des articles aucun n’est tagué. est-il possible qu’il ce base plutôt sur les mots contenu dans les titres ?
Je viens d’enlever tous ce qu’il y avais dans fonction.php à part ton code. Et toujours le même problème.
Pour ma part je n’arrive pas à le mettre en fonction.
Quand j’insère le première gros code dans fonction.php le blog ne fonctionne plus et me sort une erreur :
Warning: Cannot modify header information – headers already sent by (output started at /homepages/45/d205945162/htdocs/pow/wp-content/themes/pow/functions.php:78) in /homepages/45/d205945162/htdocs/pow/wp-includes/pluggable.php on line 850
Salut !
Tu as quoi d’autre dans ton fichier « functions » ?
Je pense qu’il y a un conflit avec une extension…
Alors d’après ce que je comprend il y as du code pour un widget: ya une ligne de com : // WP-sapphire Pages Box
Je viens de désactiver une extension qui ne me servais pas « Clic Tag » et il n’y a plus de problème. Par contre je ne vois pas d’image en bas de mon post.
merci pour ces précisions !
Je me doutait bien du Orderby mais je ne sais pas quoi mettre pour qu’ils s’affichent dans l’ordre de mon 2e plugin (similar post)
pour le code PHP que tu me donnes, je dois l’intégrer dans related.php je suppose ? comment mettre une image « défaut » quand aucun « screen » n’est trouvé ?
vu que tu parle de plugin de gestion image, as tu une idée pour que je remplisse la partie « screen » contenant une url d’une image depuis Live Writer ? J’ai un doute sur la faisabilité car en général la partie Screen attend un URL (et Live Writer entre des URL temporaire jusqu’a envoi de l’article)
Enfin tu me parles de : sixième question, de quoi parles tu ?
Merci de ton aide c’est sympa de ta part :)
Je me suis trompé ^^ Je voulais dire « Pour ta quatrième question »…
Concernant la fonction orderby, il te suffit de supprimer l’attribut pour avoir un ordre normal.
Le code que je t’ai donné doit remplacer le code suivant :
< a href="" rel="bookmark" title="Lire l'article : < ?php the_title_attribute(); ?>">< ?php getpostgk_img($post->ID); ?>< /a>Pour mettre une image par défaut, je n’en est aucune idée. Le plugin sert avant tout a personnalisé l’affichage des images de tes articles. Tout est automatique. Il te suffit simplement de suivre les codes php donné dans la partie « Paramètres ».
Tu peux choisir différentes options, une pour chaque image ou plusieurs combinaisons pour un max de personnalisation
pour info j’observe un soucis. Avec ton code ce n’est pas les articles similaires mais les articles random qui s’affichent !
Salut,
En fait le code en lui-même affiche les articles similaires, mais d’une façon aléatoire. Tu peux modifier la variable « orderby ».
Pour afficher t’es images personnalisés « screen », il faudrait complèter ce code pour afficher la miniature si aucune variable « screen » n’est trouvé.
< ?php
$values = get_post_custom_values("screen");
if (isset($values[0])) {
?>
< ?php $values = get_post_custom_values("screen"); echo $values[0]; ?>
< ?php } ?>
Pour re dimensionner t’es images tu peux utiliser le plugin « Regenerate Thumbnails. Tu pourras, mettre la taille des miniatures en 120x120px
Pour l’étape trois, je te conseille également le plugin « WP Smart Image (fr) » Il te permet de gérer les miniatures de ton blog.
Et pour t’a sixième question, il te suffit de mettre la fonction « title » de wordpress dans la boucle. Remplace le loop par celui-ci
< ?php the_title(); ?>
< a href="" rel="bookmark" title="Lire l'article : < ?php the_title_attribute(); ?>">< ?php getpostgk_img($post->ID); ?>
Salut Valentin ! Super site encore au passage, j’aime trouver de joli plugin continu ainsi !
Bon j’ai une question pour toi en espérant que tu saches me répondre.
J’utilise déjà un code dans mes articles pour générer des miniatures que j’appel « screen »
J’ai testé ton code cela marche bien mais j’ai besoin maintenant d’un coup de pouce :
1/ Comment utiliser mes images « screen » ?
2/ Comment redimensionner les images à 120×120 par exemple ?
3/ comment afficher l’image avec un « alt » qui donne le nom de l’article ?
4/ comment afficher les 5 images suivit des 5 titres des articles juste en dessous ?
Merci d’avance !
Hello Valentin,
Merci pour ce morceau de code bien joli et efficace, il fonctionne parfaitement. Pour exemple, je l’ai mis en place ici : http://economiemagazine.fr/actualites/boissons-energisantes-la-prochain-revolution (bas de page)
Bonne continuation à Geekeries, toujours aussi plaisant à lire. :cool:
En effet j’ai bien renseigné le fichier « functions.php !
En fait qu’en j’enlève ça de « single.php » : getpostgk_img($post->ID); Je n’ai plus d’erreur mais rien qui s’affiche !
Merci pour la rapidité de réponse :)
Vérifie bien que la fonction « getpostgk_img » est bien entre les < ?php et ?> du fichier fonctions.php. Si tout est bon : la fonction dans le bon fichier, et si tu appel bien le nom de la fonction dans ton single.php tout devrait fonctionner… :/
Tiens moi au courant si tu a une erreur, copie la dans ton prochain commentaire par exemple
Bonjour,
Voilà mon problème, j’ai ce message d’erreur :
Fatal error: Call to undefined function getpostgk_img() in /home/site1817/web/www/wp-content/themes/……/articles_similaires.php on line 19
J’ai l’impression qu’il ne peut pas récupérer l’image !
Salut fred, tu a bien mit le premier (gros) bout de code dans le fichier « functions.php » de ton thème ?
Oui mais il ne prend que les derniers en relations, il n’y a pas possibilité d’afficher tout les articles en relations aléatoirement ?
D’accord, je n’y avais pas pensé et je doit dire que c’est vraiment pas mal ! Surtout pour faire baisser le taux de rebond ! Vu que les articles sont aléatoire à chaque visite !
La fonction est à jour et permet maintenant d’afficher les articles similaires aléatoirement et selon les tags suivit d’une image ;) Sans plugin ;)
Ca marche nickel maintenant :)
J’espère que ça en aidera d’autres, en tout cas votre blog est génial ;)
A ou autre chose, si tu retrouves ton CSS de ton exemple, fait m’en part ^^ il m’intéresse :) (je suis nul de chez nul pour le css :s)
@Batou : La fonction affiche les articles similaires en fonction des tags.
Oui je sais bien mais les articles affichés sont toujours les derniers articles de la même catégorie, mais tous mes articles dans une catégorie ont un tag en commun donc c’est pour ça je ne comprends pas trop il m’affiche les derniers articles avec les tags en communs :s
C’est le but non ? Afficher les articles en relation avec le post actuel…
Oui enfin je n’ai rien changé à avant et les images apparaissaient avant mais plus maintenant. Je n’ai aucun code d’erreur et j’ai bien recopié le code. Je n’ai pas pris la méthode de l’include mais celle où j’ai mit directement le code php dans le fichier single.php . (j’ai deux images part articles une de 125×125 et une autre de 500×375)
Voilà, tout est opérationnel. La fonction marche à merveille. Désolé, l’erreur est humaine ;)
Merci , tout à fait, l’erreur est humaine :)
Par contre il y a toujours le problème de l’ordre, il m’affiche toujours
les derniers articles de la catégorie :s
Arf :/
Ca ne m’affiche plus aucune images :s
What is the problem Doctor Valentin ? ^^
Je viens de tester le code, et ça marche nickel. Tu es sûr d’avoir joint des images à tes articles ?
Bonjour,
je rencontre un problème avec ce code. Cela ne m’affiche pas les articles similaires mais les derniers articles de la même catégorie. Comment rendre les articles similaires aléatoires ?
Merci d’avance :)
Cordialement Batou
Code mis jour :)
Je suis du même avis que Valentin : bcp plus propre et plus rapide à exécuter.
Voici un exemple : http://blog.super-bebe.fr/meres-porteuses-france-debat-societe/
Je préfère de loin « Similar Post » et « Post Plugin Library » qui restent avant tout les meilleurs plugins pour afficher des liens similaires. Malgré qu’ils ne soient pas rendus « compatibles » avec WP 2.7.*, je suis entièrement satisfait de ces plugins.
En espérant que WP intègre ces fonctionnalités dans ses prochaines versions, tout comme la possibilité d’insérer ses smileys au-dessus de la zone des commentaires sans être obligé par une extension.
Personnellement, je préfère, et de loin, d’installer ce code. Beaucoup plus propre que les plugins ;)
Mon commentaire est à supprimer désolé. Je viens de voir le pb avec les
Merci Valentin
Pour avoir l’image, le titre et un extrait, voici dc le code :lol:
post_content);
$excerpt = getWords($mycontent, 45);
$a_title = $excerpt . "..."; ?>
<a rel="nofollow" href="" title=" ">ID); ?>
<a href="">
Super ! Excellente astuce. C’était la grosse galère pour avoir ce résultat avec des plugs in qui ne fonctionnaient pas vraiment sur WP.
Par contre j’ai une petite question : serait-il possible d’ajouter le titre de l’article lié en dessous des images ?
Est-ce que ça serait abuser de te demander ton css ? (juste pour l’utiliser comme base)
Bonne continuation et félicitations
Pour le CSS, je l’ai plus désolé, mais il suffit de mettre dans la classe de t’a div .img, un margin, pour espacer les images.
Pour le titre de l’article c’est très simple :
< ?php if ( get_the_title() ) { the_title(); } else { echo "Aucun nom d'article"; } ?>Sympa, il me reste lus qu’à intégrer des images à mes posts ;)
Très utile ! ça rend toute de suite plus attrayante cette liste de lien relatif … hormis que moi aussi j’ai la plupart de mes illustrations d’hébergée sur le net et non sur mon serveur (pas une place illimité).
Du coup, je vais essayer d’uploader une miniature à chaque fois mais, si quelqu’un avait la solution pour le faire en champs personnalisés je suis preneur :P
Merci pour cette astuce en tout cas, y a toujours plein de geekeries intéressantes ici :)
Merci pour ton article ;)
Ca marche bien et c’est beaucoup plus sympa d’afficher des petites miniatures qu’une liste de liens dans la même catégorie. Et le tout sans
plugin !
merci, çà marche « pas mal » chez moi..
vais m’en servir je crois
bon en fait, çà marche parfaitement.merci bien
Est-il possible de l’appliquer aux images postées « ailleurs » ?
Car chez moi en général les photos de mes articles sont hébergées sur FlickR..
Merci
Hum, non ce n’est pas possible… il faut alors utiliser les champs personnalisé, mais c’est une autre histoire. Tu peux par exemple uploader vite fait une image dans ton article, sans pour autant l’afficher dans l’article…. En effet, le code récupère l’image stocké dans la bibliothèque de l’article.
Merci pour la précédente réponse sur le problème de colonne !
Là je suis parvenu à mettre une bordure autour de mes miniatures, mais je ne parviens pas à trouver comment ajouter un espace entre l’image et la bordure, donnant ce rendu « polaroid » (comme sur la bannière). Est ce avec du cellpading ou du genre ou pas du tout ?
Essaye de mettre un « margin » ou au pire, un « margin-right ». Cela devrait marcher ;)
Moi qui cherche un bon plugin pour les articles similaires. Merci pour l’astuce que je vais tester très vite…
Je mets de coté, car je sens que je vais l’intégrer sur le thème en travaux ;) Merçi