Voici une petite astuces bien sympathique qui permettra à vos visiteurs de changer le mode d’affichage des articles de la page d’accueil de votre blog. Cette option est plutôt simple à mettre en place, et permet de gérer deux modes d’affichages. Ces modes peuvent varier selon les goûts, vous pouvez par exemple afficher les articles suivit d’une vignette de l’article correspondant et afficher un extrait de l’article, ou bien créer des vignettes (portfolio) avec les informations nécessaires tels que le titre, le nombre de commentaire, la date. Toutefois, il vous faudra un certain niveau dans le développement web pour bien adapter ce système a votre blog.
Ce système est présent sur ce blog depuis hier, et vous permet d’afficher deux modes de vu des articles : un affichage normal et un affichage par vignettes suivi d’un court extrait de l’article. Utilisant la fonction présenté dans cet article, il est donc très simple d’afficher une vignette correspondant à l’article. Cependant, certains articles n’en contiennent pas. Cet article vous montrera donc comment changer la vue principale de votre blog, mais également comment afficher les miniatures de vos articles suivi d’un extrait. Si l’un de vos articles n’a pas d’image, il vous suffit de renseigner celle par défaut dans la fonction suivante.
La fonction pour afficher les miniatures
Voici la fonction à ajouter dans votre fichier « functions.php« . Pour modifier la taille de l’image il vous suffit de modifier les balises « width » et « hight ». La dernière ligne de cette fonction permet d’afficher une image si l’article n’en a pas. C’est le cas quand on re-utilise une image d’un autre article, l’image n’est donc pas joint à l’article. Il vous suffit de modifier l’url. Ce code est utile, seulement si vous souhaitez afficher vos articles sous forme de vignette…
[php]
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;
}
else
{
echo »;
}
}
[/php]
Le module « Changer de vue » !
Voici maintenant le début de la modification de votre thème : nous vous conseillons de faire des sauvegardes de vos fichiers, car vous allez travailler directement sur votre fichier « index.php ». D’abord, il faut insérer le code suivant aux premières lignes de votre fichier « index.php ». Nous allons ouvrir une session pour votre visiteurs et lui permettre de switcher entre les différents modes d’affichages. Vous devez renseigner l’url de votre blog à la ligne 19 et 24. Nous déclarons « get_header » pour afficher le haut de votre blog, si vous affichez, comme moi, le header puis la sidebar il suffit d’ajouter « get_sidebar » après la fonction header.
[php]
[/php]
Juste avant le commencement des « div » de vos articles, insérez ce code. Celui-ci permet de créer le premier mode d’affichage, la version 0 ou la version normal du blog.
[php]
Afficher la version modifiée !’;
{ while(have_posts()) : the_post();
?>
[/php]
Après ces quelques lignes de code, il vous suffit de coller l’affichage basique de votre blog, ou d’en créer un autre. Libre à vous de créer une nouvelle structure. Voilà, la première partie est fini… maintenant nous allons créer la deuxième en ajoutant ce bout de code. Ce code permet d’afficher le deuxième mode d’affichage s’il est sélection dans la section. En d’autres termes, si vous avez cliqué sur le lien activant cet affichage.
[php]
Afficher la version Normal !
[/php]
Maintenant il vous suffit de mettre le code que vous souhaitez. Je vous donne un exemple. Si vous souhaitez par exemple afficher, comme sur ce blog, une vignette et un extrait de l’article il vous suffit d’intégrer ces quelques lignes dans les divs qui construisent l’architecture de vos articles. La première ligne correspond à l’image, la deuxième correspond à l’extrait de l’article et la troisième permet de faire un lien direct vers l’article. Vous pouvez également faire le lien sur l’image. La dernière ferme la boucle définitivement.
[php]
ID); ?>
Publié à l'origine le : 8 juin 2009 @ 8 h 21 min
