在WordPress中添加文章中图片的alt属性是非常推荐的做法,原因如下:
-
提高可访问性:Alt属性为视觉障碍用户提供了图片内容的文本替代,帮助他们理解图片传达的信息。
-
搜索引擎优化(SEO):搜索引擎会读取图片的alt文本来理解图片内容,并可能将其作为搜索结果排名的一个因素。
-
遵守法规:在某些国家和地区,为网站内容提供足够的可访问性是法律规定的,不遵守可能会面临法律责任。
-
提高用户体验:即使对于视力正常的用户,当图片由于某种原因无法加载时,alt文本可以提供图片的描述,增强用户体验。
-
更好的图片识别:某些图片识别工具和服务会使用alt文本来识别和分类图片。
-
避免内容重复:在多张图片表达相似内容的情况下,alt文本可以帮助区分它们。
-
提高内容的可用性:在某些情况下,用户可能会禁用图片加载以节省数据或提高页面加载速度,alt文本可以提供图片的关键信息。
WordPress提供了多种方法来自动添加alt属性,包括使用插件和代码,本着尽量不用插件的前提,参考嗨主题(https://haitheme.com)的实现方法,我们通过添加代码到主题的functions.php
文件中来实现自动添加alt属性。如果您需要在文章末尾自动添加特定的后缀,由于和自动添加alt属性使用的是同一个钩子,所以在就一起实现了,以下是一种实现代码:
/**
* 自动添加文章中图片的alt属性和文章后缀
*/
if (!function_exists('hai_the_content')) {
function hai_the_content($content) {
global $post;
// 查找文章内容中的<img>标签,如果标签没有alt属性或者alt属性为空,它会为标签添加alt属性,属性值是文章的标题加上图片的序号
if (preg_match_all("/<img\s[^>]*src=(\"??)([^\" >]*?)\\1[^>]*>/iU", $content, $matches, PREG_SET_ORDER)) {
$alt = $post->post_title . '的配图%s-' . get_option('blogname');
$images = $flag = array();
foreach ($matches as $index => $item) {
$idx = $index > 1 ? $index : '';
$img = preg_replace("/alt=[\"'][\"']/i", 'alt="' . sprintf($alt, $idx) . '"', $item[0]);
if ($item[0] !== $img) {
$flag[] = $item[0];
$images[] = $img;
}
}
$content = str_replace($flag, $images, $content);
}
// 添加文章后缀
$suffix = 'page' === $post->post_type
? '这是%3$s的【<strong>%1$s</strong>】页面,更多请查看<a href="%2$s">%3$s</a>的其它相关内容!'
: '以上就是<strong>%1$s</strong>的详细内容,更多请关注<a href="%2$s">%3$s</a>其它相关文章!';
return $content . '<p>' . sprintf($suffix, $post->post_title, home_url('/'), get_option('blogname')) . '</p>';
}
add_filter('the_content', 'hai_the_content');
}
图片的alt属性不仅对提升网站的SEO表现至关重要,也对提高用户体验和网站可访问性发挥着重要作用。因此,为图片添加准确、描述性强的alt属性是SEO优化和网站设计中不可忽视的一环,也是遵循最佳实践和可能的法律要求。