利用高级自定义字段插件 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>';
}
?>

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

红色副标题和文章更新时间.jpg

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

添加副标题教程

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

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

添加副标题1 (1).jpg

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

添加副标题2.jpg

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

 <h1 class="article-title"><?php the_title(); ?> <font color="#FF5E52"><?php if (get_field('sub_title')){echo ''.get_field('sub_title').'';}?></font></h1>

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

<h3 itemprop="name headline"><a itemprop="url" rel="bookmark" href="<?php the_permalink();?>" title="<?php the_title();?>" target="<?php echo $post_target;?>"><?php echo $sign;?><?php the_title();?> <font color="#FF5E52"><?php if (get_field('sub_title')){echo ''.get_field('sub_title').'';}?></font></a></h3>

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

添加更新时间教程

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

添加更新时间 (1).jpg

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

<?php if (get_field('update_time')){echo '<svg class="icon" aria-hidden="true"><use xlink:href="#icontime"></use></svg> 更新时间:'.get_field('update_time').'';}?>

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

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

0

评论0

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

社交账号快速登录

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