1、添加figcaption
在WordPress的图像插入功能中,如果你为插入的图像添加了描述或标题,该描述或标题可能会自动作为 <figcaption>
输出。在编辑文章或页面时,你可以选择使用这种方式来展示图像及其相关信息,使内容更加清晰易懂。
lincol29
是自动上传本地的文章,使用 typora 编写文章时,直接使用以下代码即可
<figcaption class="wp-element-caption">httpsok官网主界面</figcaption>
使用 figcaption 描述的图片
2、添加图像alt和title
但此描述并未编入图片中,应该对 seo 没有效果。如果想做好 seo,可以在图片 img 里面加入 alt 属性,这对于搜索引擎识别图片内容非常有帮助。
lincol29
是在 wordpress 中修改图片上传的代码,将 alt 和 title 属性更改为文章的标题
如何在wordpress中自动给图片添加title和alt属性呢?
需要通过修改主题的function.php代码。达到发布文章时自动为图片添加title和alt属性的目的。
//给文章的图片添加title和alt属性,lincol29发布于2024/8/14
function add_image_alt_title_tags($content) {
global $post;
$post_title = $post->post_title;
$pattern = '/<img\s+([^>]*)\/?>/i'; // 更精确的匹配<img>标签的正则表达式
preg_match_all($pattern, $content, $matches, PREG_SET_ORDER);
$index = 1; // 图片序号计数器
foreach ($matches as $match) {
$img_tag = $match[0];
$attributes = $match[1];
// 检查是否已经有 alt 属性,并且值为 "img"
if (preg_match('/\balt=["\']\s*img\s*["\']/', $attributes)) {
// 替换 alt 和 title 属性为文章标题 + 图片序号
$replacement = preg_replace('/\balt=["\']\s*img\s*["\']/', 'alt="' . esc_attr($post_title) . ' ' . $index . '" title="' . esc_attr($post_title) . ' ' . $index . '"', $attributes);
$index++; // 增加图片序号
} elseif (!preg_match('/\balt=["\']/', $attributes)) {
// 如果没有 alt 属性,则添加文章标题 + 图片序号
$replacement = rtrim($attributes, ' />'); // 去掉末尾可能存在的空格和斜杠
$replacement .= ' alt="' . esc_attr($post_title) . ' ' . $index . '" title="' . esc_attr($post_title) . ' ' . $index . '" />';
$index++; // 增加图片序号
} else {
// 如果有 alt 属性但不是 "img",保持原样
$replacement = $attributes;
}
// 替换原来的<img>标签为新的<img>标签
$content = str_replace($img_tag, '<img ' . $replacement, $content);
}
return $content;
}
`add_filter('the_content', 'add_image_alt_title_tags');
`
2.1、自动上传图片后的alt和title属性
使用 上述php代码自动上传图片后的alt和title属性