网站之前使用过 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>”这段代码，自用代码分享：
<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 那样，直接点选日期了，具体设置可参考下图：
上边提到了，后台设置好以后这时在前端并不会显示，我们还需要添加调用代码。这个代码我们还是添加到 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