利用高级自定义字段插件 Advanced Custom Fields 为文章添加红色副标题和最后更新时间

本站之前使用的主题是DUX,这款主题挺强大的,并且有一些比较贴心实用的小功能,比如微分类(该目录下文章会全文展示,类似“说说”或者“微博”,参考本站“微分享”)、红色副标题等等。不过DUX主题太火了,破解版泛滥,很多网站都在用这款主题。这导致好多的网站看起来都是一个模子刻出来的,实在让人无感乏味。加上本站一直在用Erphpdown插件,为了更好的使用体验就改用Modown主题了。可换主题后,依然想着使用dux的小功能,“微博”功能还好说,网上可以参考的教程较多,实现“红色副标题”的教程却非常难找。不知道是不是因为这个需要太小众了呢?好在找到点儿有用的线索,即通过自定义字段来实现。恰好Modown主题自带了Advanced Custom Fields (以下简称“ACF”)插件,就想着试试看。

通过管理后台设置好字段组,并且在文章添加好字段内容发布后,才发现前端并不显示。于是,就从网上搜索ACF的相关教程看看怎么用,是不是哪里操作有误。让人无语的是,网上给的教程貌似都是转载的同一篇文章,看着介绍挺详细,给出了管理后台中新建字段组的说明和一些代码。然而云里雾里地看到最后,也没看到说这些代码到底该咋用(估计是小编水平太菜了吧)。后来研究了半天才明白,其实概括起来就一句话:想让添加的字段在哪里显示,就把代码放到主题模板的相应位置即可。下面这段代码,可以输出(显示)文本或者图片,一般来说用它就够了。想要更详细介绍,可以到官网看看

<?php
if (get_field('字段名称')) {
	echo '<p>输出文本字段:'.get_field('字段名称').'</p>';
}

if (get_field('字段名称')) {
	echo '<p>输出图像字段:<img src="'.get_field('字段名称').'" /></p>';
}
?>

通过自定义字段添加红色副标题和文章更新时间后的效果参见下图:

那么如何通过ACF插件来实现呢?以下以Modown主题为例,先说说如何为文章添加副标题(第二标题)

添加副标题教程

首先,在后台“字段”处,新建字段组,顾名思义,字段组里可以包括N多个字段。而字段组可以看做一个分类,比如我们可以把修改文章的字段,全放到“修改文章”字段组,把修改页面的字段,放到“修改页面”字段组。总之,这个字段组名字不重要,主要是为了方便自己识别。

新建好字段组以后,我们就可以根据需要,添加字段了。由于添加副标题,只是简单的文本内容,因此可以参考下图进行设置:

通过上图设置发布以后,当我们在编辑器写文章时,就能看到“副标题”字段框了。

不过这时我们填写副标题后发布文章,前端并不会显示,还需要通过代码调用添加的字段才可以。由于副标题是显示在文章标题右侧,因此我们要找到文章标题所在的模板添加调用代码。Modown主题的话,我们在post-header.php 文件中修改。文章标题为一级标题,即“h1”,因此我们修改“<h1> </h1>”这段代码,自用代码分享:

此隐藏内容查看价格9立即支付
充值说明:付款后若网页一直无变化,可刷新看看。有问题请联系客服QQ&微信1828868518

不过在post-header.php中修改后,副标题只会在文章所在页面显示,如果我们想要在文章列表(或者站内搜索结果)中显示的话,还需要在content-list.php文件中添加调用代码,这里我们需要修改<h3></h3>这段代码,自用代码分享:

此隐藏内容查看价格9立即支付
充值说明:付款后若网页一直无变化,可刷新看看。有问题请联系客服QQ&微信1828868518

至此添加副标题就搞定了,下面我们说一下如何添加文章更新时间。

添加更新时间教程

添加文章更新时间也可以按照上方说明操作,不过如果还是通过“文本”这个字段类型来实现的话,我们每次都要手动输入日期,比较麻烦。那么,我们通过“日期选择”这个字段类型,就可以像日历APP那样,直接点选日期了,具体设置可参考下图:

上边提到了,后台设置好以后这时在前端并不会显示,我们还需要添加调用代码。这个代码我们还是添加到post-header.php文件中,位置位于文章发布时间代码下方(即另起一行),自用代码分享:

此隐藏内容查看价格9立即支付
充值说明:付款后若网页一直无变化,可刷新看看。有问题请联系客服QQ&微信1828868518

添加好代码以后,就可以看到效果了。以后更新文章后,可以根据需要添加修改时间。不过小编在添加时间时,发现前端显示时间是前一天的日期(昨天的日期),有可能跟ACF为国外插件,时区不同存在时间差有关。不过也没啥影响,毕竟这个更新时间只是为了让读者知道,这篇文章不过时,也就不差这一天了。如果想跟实际时间相符,我们可以选择第二天的日期(明天的日期)。

好了,教程到这里就要结束了。其实难点在于找到需要添加代码的文件和代码位置,这个小编在上方都已说明,并且亲测成功。但保险起见,建议最好在宝塔面板的“文件”管理中修改,这样添加代码后如果网站出现问题,可以随时通过“Ctrl+Z”组合键撤销操作。

0

评论0

没有账号? 注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码