
WordPress 侧边栏
最近,我们正在为客户进行网站设计,该网站要求我们在侧边栏中显示按年份排列的每月档案。对于他们的设计师来说,在 Photoshop 中模拟它可能真的很容易,但在 WordPress 中实现起来有点复杂。见下图:
最近,我们正在为客户设计网站,该网站要求我们在侧边栏中显示按年份组织的每月存档。对于他们的设计师来说,在 Photoshop 中模拟它可能真的很容易,但在 WordPress 中实现起来有点复杂。见下文:

Now you are probably wondering why it was tricky to get it into WordPress when wp_get_archives() list the archives monthly with the year next to it? Well that is because this client only wanted to show the year once on it’s left. There is no real way to customize the styling of the wp_get_archives() function.
现在,您可能想知道为什么当wp_get_archives()每月列出归档文件,并附上其下一年时,将其放入WordPress还是很棘手的吗? 嗯,这是因为该客户只想显示一次年份。 没有真正的方法来定制wp_get_archives()函数的样式。
We looked around the web for solutions and came across nothing. This issue has to be really rare however we found that 安德鲁·阿普尔顿 had the similar issue, and he had a fix for it. We used his codes with a small bits of modification.
我们在网上寻找解决方案,却一无所获。 这个问题确实很少见,但是我们发现安德鲁·阿普尔顿遇到了类似的问题,并且他对此进行了修复。 我们对他的代码进行了少量修改。
安德鲁的代码没有档案的限制参数。因此,使用他的代码意味着您将显示月份的所有档案。想象一下,对于一个已有 5 年历史的博客来说。因此,我们添加了一个限制参数,该参数允许我们将任何给定时间显示的月份数限制为 18。
安德鲁的代码对档案没有限制参数。因此,使用他的代码意味着您将显示所有存档的月份。想象一下对于一个已有 5 年历史的博客来说。因此,我们添加了一个限制参数,允许我们将任何给定时间显示的月份数限制为 18。
So basically what you need to do is paste the following code in your theme’s 侧边栏.php file or any other file where you want to display custom WordPress archives:
因此,基本上,您需要做的是将以下代码粘贴到主题的侧边栏.php文件或要显示自定义WordPress存档的任何其他文件中:
<?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; ?>
注意:如果要更改显示的月数,则需要更改第 19 行,其中当前 $limit 值设置为 18。
注意:如果要更改显示的月数,则需要更改第 19 行,其中当前 $limit 值设置为 18。
我们的 CSS 看起来有点像这样:
我们的 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;}
因此,通过这样做,我们的最终结果如下所示:
所以,这样,我们得到的最终结果如下所示:

现在,如果您想显示每个月的帖子数量,那么您需要在上述代码的第 12 - 16 行之间的任意位置添加这段代码:
现在,如果您想显示每月的帖子数量,您需要在上述代码的第 12 – 16 行之间的任意位置添加以下代码:
<?php echo $month->post_count; ?>
您可以使用帖子计数和所有内容进行操作的一个示例如下图所示:
下图显示了如何处理帖子数量和所有内容的示例:

The above picture was taken from 安德鲁·阿普尔顿的网站 because that was the solution he came up with from which we derived our style. If you want to see the css for his styles, then simply click on his website link above.
上图是从安德鲁·阿普尔顿的网站拍摄的,因为那是他提出的解决方案,我们从中得出了自己的风格。 如果您想查看他的样式的css,则只需单击上面的他的网站链接。
您知道有更简单的方法可以实现此目的吗?您会在下一个设计中自定义 WordPress 档案的显示吗?请在下面的评论框中分享您的想法。
你知道更简单的方法吗?您会在下一个设计中自定义 WordPress 档案的显示吗?请在下面的评论框中分享您的想法。
WordPress 侧边栏