SYS 棚户区

为 WordPress 文章标题添加 html 标签

sys2016-09-18 23:193 条评论网络百科html, WordPress

WordPress 的文章标题一般用 the_title() 输出，显示的内容就是在撰写文章时的标题栏填入的文字。如果想给标题添加高亮，直接用 <span> 标签定义颜色样式就可以了。可能一般情况下没什么大碍，不过其实这么做就是个后患无穷的坑，不一定在其他什么地方也使用 the_title() 输出标题的时候就会出现问题。例如在文章缩略图的位置如果给图片 <img> 标签的 alt 或者 title 属性也添加了 <?php the_title(); ?> 值，那么就可能出现图片错位或者在 hover 图片时弹出带 html 代码的标题框。

今天发现一种用自定义字段功能解决这个问题的方法，在这里记录一下。话说 WordPress 的自定义字段功能还是很零活的，它把字段的名称和值以 meta_key 和 meta_value 的形式成对写入 wp_postmeta 数据表中，再将它与 WordPress 的 get_post_meta() 函数配合使用取出这对数据，就能方便地实现许多功能。这里正是使用自定义字段实现为文章标题添加 html 代码的。

首先在 functions.php 中添加下面的代码：

function custom_the_title() {
	$custom_title = get_post_meta( get_the_ID(), 'custom_title', true );
	$post_title = $custom_title ? $custom_title : get_the_title();
	echo $post_title;
}

然后在需要需要给标题添加 html 代码的文章里增加自定义字段，名称为“custom_title”，值为带有 html 标签的文章标题，如：

【WordPress主题】<span style="color: #f00;">Twenty Seventeen</span>

再在模版文件中输出文章标题的位置使用 custom_the_title() 函数代替原 the_title() 函数就搞定了，其他不在前台屏幕打印出标题的 the_title() 则不需要替换。

本文参考了这篇文章。最后，我们再来复习下 get_post_meta()：

用法

get_post_meta( int $post_id, string $key = '', bool $single = false )

参数

$post_id
（整数）（必须）文章 ID。

$key
（字符串）（可选）要获取的 meta 数据键名，如果留空则获取所有的 meta 数据。
默认值：”

$single
（真伪值）（可选）如果为真，则只返回指定 meta_key 的首个值，否则以数组形式返回该 meta_key 所有值。如果 meta_key 未指定，则此参数无效。
默认值：false