Hur man anpassar visningen av WordPress-arkiv i sidofältet

Nyligen arbetade vi på en kunds webbplatsdesign som krävde att vi skulle visa månadsarkiv som arrangerades av året i sidofältet. Det var nog väldigt enkelt för deras designer att mocka upp det i Photoshop, men det var lite komplicerat att uppnå i WordPress. Se bilden nedan:

Nu undrar du förmodligen varför det var svårt att få det till WordPress när wp_get_archives () listar arkiven varje månad med året bredvid det? Jo det beror på att den här klienten bara ville visa året en gång kvar. Det finns inget riktigt sätt att anpassa styling av wp_get_archives () -funktionen.

Vi tittade runt på nätet för lösningar och kom över ingenting. Denna fråga måste vara väldigt sällsynt men vi fann att Andrew Appleton hade samma problem, och han hade en lösning för det. Vi använde hans koder med en liten bit av modifikation.

Andras kod hade inte en gränsparameter för arkiven. Så att använda hans koder skulle innebära att du kommer att visa alla arkiv månad. Föreställ dig det för en blogg som är 5 år gammal. Så vi lade till en gränsparameter som gjorde det möjligt för oss att begränsa antalet månader som visas till 18 vid varje given tillfälle.

Så i grund och botten vad du behöver göra är att klistra in följande kod i ditt tema sidebar.php fil eller någon annan fil där du vill visa anpassade WordPress-arkiv:

 get_results ("SELECT DISTINCT MONTH (post_date) AS månad, år (post_date) som år, COUNT (id) som post_count FRÅN $ wpdb-> inlägg WHERE post_status = 'publicera' och post_date år, om ($ year_current! = $ year_prev) if ($ year_prev! = null) ?>  
/ "> år;?>
  
/ månad, 1, $ månad-> år))>>> månad, 1, $ månad-> år))?>
 = 18) break;  endforeach; ?> 

Obs! Om du vill ändra antalet visade månader måste du ändra rad 19 där det aktuella $ gränsvärdet är inställt på 18.

Vår CSS såg ut så här:

 .widget-arkiv padding: 0 0 40px 0; flyta till vänster; bredd: 235px; .widget-arkiv ul margin: 0; .widget-arkiv li margin: 0; padding: 0; .widget-arkiv li a border-left: 1px solid # d6d7d7; vaddering: 5px 0 3px 10px; marginal: 0 0 0 55px; display: block; li.archive-year float: left; font-family: Helvetica, Arial, san-serif; vaddering: 5px 0 3px 10px; färg: # ed1a1c; li.archive-år a färg: # ed1a1c; marginal: 0; gränsen: 0px; vaddering: 0; 

Så genom att göra det på så sätt fick vi det slutliga resultatet att se ut så här:

Om du nu vill visa antalet inlägg i varje månad, så behöver du lägga till den här koden någonstans mellan linje 12-16 i ovanstående kod:

POST_COUNT; ?>

Ett exempel på vad du kan göra med posträkningen och allt kan ses i bilden nedan:

Ovanstående bild togs från Andrew Applets webbplats eftersom det var den lösning han kom fram till från vilken vi härledde vår stil. Om du vill se css för hans stilar klickar du bara på länkens länk ovan.

Vet du om ett enklare sätt att åstadkomma detta? Ska du anpassa visningen av ditt WordPress-arkiv i nästa design? Vänligen dela dina tankar i kommentarfältet nedan.