1、添加figcaption

在WordPress的图像插入功能中，如果你为插入的图像添加了描述或标题，该描述或标题可能会自动作为 <figcaption> 输出。在编辑文章或页面时，你可以选择使用这种方式来展示图像及其相关信息，使内容更加清晰易懂。

lincol29是自动上传本地的文章，使用 typora 编写文章时，直接使用以下代码即可

<figcaption class="wp-element-caption">httpsok官网主界面</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属性