如何自定義邊欄中的WordPress存檔顯示


最近,我們正在進行客戶的網站設計,要求我們在側邊欄中顯示按年份排列的每月存檔。 對於他們的設計師來說,在Photoshop中對其進行模擬可能真的很容易,但是在WordPress中實現起來有點複雜。 參見下圖:

WordPress邊欄中的自定義檔案顯示

現在,您可能想知道為什麼當wp_get_archives()每月列出存檔,並附上年份時,將其放入WordPress卻很棘手? 那是因為該客戶只想顯示一次年份。 沒有真正的方法來定制wp_get_archives()函數的樣式。

我們在網上尋找解決方案,卻一無所獲。 這個問題確實很少見,但是我們發現安德魯·阿普爾頓(Andrew Appleton)也有類似的問題,並且他有解決方法。 我們對他的代碼進行了少量修改。

Andrew的代碼沒有存檔的limit參數。 因此,使用他的代碼將意味著您將顯示所有存檔月份。 想像一下,對於一個擁有5年曆史的博客而言。 因此,我們添加了一個limit參數,該參數允許我們在任何給定時間將顯示的月份數限制為18個。

所以基本上您需要做的是將以下代碼粘貼到主題的 sidebar.php 文件或要在其中顯示自定義WordPress存檔的任何其他文件:

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){?>
		
		
	
	
  • /year; ?>/">year; ?>
  • /year; ?>/month, 1, $month->year)) ?>">month, 1, $month->year)) ?>
  • = 18) { break; } endforeach; ?>

    注意:如果要更改顯示的月數,則需要更改第19行,其中當前的$ limit值設置為18。

    我們的CSS看起來像這樣:

    .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;}
    

    因此,通過這種方式,我們得到的最終結果如下所示:

    WordPress邊欄中的自定義檔案顯示

    現在,如果要顯示每個月的帖子數,則需要在上述代碼的第12 – 16行之間的任何位置添加以下代碼:

    post_count; ?>

    下圖顯示瞭如何處理帖子數以及如何處理一切的一個示例:

    自定義WordPress存檔顯示的帖子數

    上圖是從安德魯·阿普爾頓的網站上拍攝的,因為那是他想出的解決方案,我們從中得出了自己的風格。 如果您想查看他的樣式的css,則只需單擊上面的他的網站鏈接。

    您知道更簡單的方法嗎? 您會在下一個設計中自定義WordPress存檔的顯示嗎? 請在下面的評論框中分享您的想法。