Récemment, nous travaillions sur la conception du site d’un client qui nous obligeait à afficher des archives mensuelles classées par année dans la barre latérale. Il était probablement très facile pour leur concepteur de le modéliser dans Photoshop, mais c’était un peu compliqué à réaliser dans WordPress. Voir l’image ci-dessous :
Maintenant, vous vous demandez probablement pourquoi il était difficile de l’intégrer dans WordPress lorsque wp_get_archives() lister les archives mensuellement avec l’année à côté ? Eh bien, c’est parce que ce client ne voulait montrer l’année qu’une fois qu’il lui restait. Il n’y a pas vraiment de moyen de personnaliser le style de la fonction wp_get_archives().
Nous avons cherché des solutions sur le Web et n’avons rien trouvé. Ce problème doit être vraiment rare, mais nous avons constaté que Andrew Appleton avait le même problème, et il avait une solution pour cela. Nous avons utilisé ses codes avec quelques petites modifications.
Le code d’Andrew n’avait pas de paramètre de limite pour les archives. Donc, utiliser ses codes signifierait que vous afficherez toutes les archives du mois. Imaginez ça pour un blog qui a 5 ans. Nous avons donc ajouté un paramètre limit qui nous permettait de limiter le nombre de mois affichés à 18 à un moment donné.
Donc, en gros, ce que vous devez faire est de coller le code suivant dans votre thème barre latérale.php fichier ou tout autre fichier dans lequel vous souhaitez afficher des archives WordPress personnalisées :
<?php
global $wpdb;
$limit = 0;
$year_prev = null;
$months = $wpdb->get_results("SELECT DISTINCT MONTH( post_date ) AS month , YEAR( post_date ) AS year, COUNT( id ) as post_count FROM $wpdb->posts WHERE post_status="publish" and post_date <= now( ) and post_type="post" GROUP BY month , year ORDER BY post_date DESC");
foreach($months as $month) :
$year_current = $month->year;
if ($year_current != $year_prev){
if ($year_prev != null){?>
<?php } ?>
<li class="archive-year"><a href="<?php bloginfo('url') ?>/<?php echo $month->year; ?>/"><?php echo $month->year; ?></a></li>
<?php } ?>
<li><a href="<?php bloginfo('url') ?>/<?php echo $month->year; ?>/<?php echo date("m", mktime(0, 0, 0, $month->month, 1, $month->year)) ?>"><span class="archive-month"><?php echo date_i18n("F", mktime(0, 0, 0, $month->month, 1, $month->year)) ?></span></a></li>
<?php $year_prev = $year_current;
if(++$limit >= 18) { break; }
endforeach; ?>
Remarque : Si vous souhaitez modifier le nombre de mois affichés, vous devez modifier la ligne 19 où la valeur limite actuelle de $ est définie sur 18.
Notre CSS ressemblait un peu à ceci :
.widget-archive{padding: 0 0 40px 0; float: left; width: 235px;}
.widget-archive ul {margin: 0;}
.widget-archive li {margin: 0; padding: 0;}
.widget-archive li a{ border-left: 1px solid #d6d7d7; padding: 5px 0 3px 10px; margin: 0 0 0 55px; display: block;}
li.archive-year{float: left; font-family: Helvetica, Arial, san-serif; padding: 5px 0 3px 10px; color:#ed1a1c;}
li.archive-year a{color:#ed1a1c; margin: 0; border: 0px; padding: 0;}
Donc, en procédant de cette façon, nous avons eu le résultat final pour ressembler à ceci :
Maintenant, si vous souhaitez afficher le nombre de publications chaque mois, vous devez ajouter ce morceau de code n’importe où entre les lignes 12 et 16 du code ci-dessus :
<?php echo $month->post_count; ?>
Un exemple de ce que vous pouvez faire avec le nombre de messages et tout peut être vu dans l’image ci-dessous :
La photo ci-dessus a été prise de Le site d’Andrew Appleton parce que c’est la solution qu’il a trouvée à partir de laquelle nous avons dérivé notre style. Si vous voulez voir le css de ses styles, cliquez simplement sur le lien de son site Web ci-dessus.
Connaissez-vous un moyen plus simple d’y parvenir? Personnaliserez-vous l’affichage de vos archives WordPress dans le prochain design ? S’il vous plaît partager vos pensées dans la zone de commentaire ci-dessous.
