小工具      在线工具  汉语词典  dos游戏  css  js  c++  java

wordpress 边栏_如何自定义边栏中的WordPress存档显示

python,php,java,css,wordpress 额外说明

收录于:18天前

WordPress 侧边栏

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

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

Custom Archives Display in WordPress Sidebar

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

因此,通过这样做,我们的最终结果如下所示:

所以,这样,我们得到的最终结果如下所示:

Custom Archives Display in WordPress Sidebar

现在,如果您想显示每个月的帖子数量,那么您需要在上述代码的第 12 - 16 行之间的任意位置添加这段代码:

现在,如果您想显示每月的帖子数量,您需要在上述代码的第 12 – 16 行之间的任意位置添加以下代码:

<?php echo $month->post_count; ?>

您可以使用帖子计数和所有内容进行操作的一个示例如下图所示:

下图显示了如何处理帖子数量和所有内容的示例:

Custom WordPress Archives Display with 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 档案的显示吗?请在下面的评论框中分享您的想法。

翻译自: https://www.wpbeginner.com/wp-themes/how-to-customize-the-display-of-wordpress-archives-in-your-sidebar/

WordPress 侧边栏

. . .

相关推荐

额外说明

从零开始的知识图谱生活,构建一个百科知识图谱,完成基于Deepdive的知识抽取、基于ES的简单语义搜索、基于 REfO 的简单KBQA

项目设计集合(人工智能方向):助力新人快速实战掌握技能、自主完成项目设计升级,提升自身的硬实力(不仅限NLP、知识图谱、计算机视觉等领域):汇总有意义的项目设计集合,助力新人快速实战掌握技能,助力用户更好利用 CSDN 平台,自主完成项目设计升级,提升自

额外说明

TP5+商城小程序——模块、路由、获取请求参数

QQ 1274510382 Wechat JNZ_aming 商业互捧 QQ群538250800 技术搞事 QQ群599020441 技术合作 QQ群152889761 加入我们 QQ群649347320 纪年科技aming 网络安全 ,深度学习,嵌入式

额外说明

Android——发展,就业,结构,环境,反编译,简单入门

QQ 1285575001 Wechat M010527 技术交流 QQ群599020441 纪年科技aming 2001—09----11(移动互联网)----13----15—2020 开源底层更改 -eg 推送 就业 就业岗位 所有行业 都有饱和趋

额外说明

Unity实战篇 | unity接入QQ登录 详细过程——Android篇

文章目录 -前言 -Unity接入QQ登录 -准备工具 第1️⃣步:获取QQ登录的原生SDK,并在开放平台申请应用 第2️⃣步:配置Android端的环境和代码 创建应用 接入Unity的classes.jar包 和 QQ SDK中的jar 编写QQ登录

额外说明

【Python零基础到入门】Python专栏简介

-前言 本文章是【Python零基础到入门】专栏的一个简单介绍 目前网上的Python学习文章 和 视频 等资源有很多 本专栏的 目的 是针对之前只听说过Python但是没有经过系统学习的小伙伴 所以该系列的文章核心目的就是让我们能够快速学习Python

额外说明

机器学习 第五节 第三课

[toc] 数据合并之 merge merge: 按照指定的列把数据按照一定的方式合并到一起. 执行结果:

额外说明

华为云云服务器评测 宝塔+nginx 同时部署Springboot、Vue项目

系列文章目录 华为云云服务器评测 第一章 [linux实战] 华为云耀云服务器L实例 Java、node环境配置 华为云云服务器评测 第二章 [linux实战] Unbutnu添加SSH Key、启动Springboot项目 华为云云服务器评测 第三章

额外说明

KafKa - SpringBoot 集成 Kafka 及 消息的顺序性

一、Kafka Kafka是由Apache软件基金会开发的一个开源流处理平台,由Scala和Java编写。Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者在网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是在现代网络

额外说明

Android R: 记一次修复AOSP的Desktop(桌面模式)或者External Display(扩展投屏)点击最大化按钮,跳出其他应用App问题

Android R: 记一次修复AOSP的Desktop(桌面模式)或者External Display(扩展投屏)点击最大化按钮,跳出其他应用App问题 原因分析: 抓取点击设置App的最大化按钮,窗口慢慢放大时的当时的log log_click_Mi

额外说明

MXNet对AlexNet模型的构建与实现(与LeNet的对比)

        2012年Alex Krizhevsky(论文第一作者),Ilya Sutskever(OpenAI研发主管),Geoffrey E. Hinton(深度学习之父)的一篇划时代的论文,英文版地址:ImageNet Classificati

ads via 小工具