利用高级自定义字段插件 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>”这段代码，自用代码分享：

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

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

添加更新时间教程

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

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

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

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