WordPress中如何为‘Read More’按钮添加含博客标题的Aria标签

原代码不生效的核心问题有两个：

1. $post_title是PHP后端变量，前端jQuery根本识别不了，直接写会导致aria-label变成无效的字符串
2. 没有针对每个按钮单独匹配对应的博客标题，所有按钮会被设置成同一个错误值

前端jQuery解决方案（标题在当前页面DOM中） #

如果博客标题和按钮在同一个卡片的DOM结构里，用下面的代码遍历每个按钮，单独获取对应标题：

jQuery(function($) {
  $('.et_pb_button').each(function() {
    // 找到当前按钮所在的博客卡片容器（请根据你的实际HTML结构调整这个选择器，比如.post/.blog-card）
    const postCard = $(this).closest('.et_pb_blog_post');
    // 找到卡片里的标题元素（同样要根据实际结构改，比如.entry-title/h2.title）
    const postTitle = postCard.find('.et_pb_post_title').text().trim();
    // 设置符合要求的aria-label
    $(this).attr('aria-label', `Read More On ${postTitle}`);
  });
});

关键调整点： #

• 必须根据你博客的实际HTML结构，修改closest('.et_pb_blog_post')和find('.et_pb_post_title')里的选择器，确保能准确找到每个按钮对应的标题
• trim()用来清除标题文本前后的空格，避免aria-label出现多余空白

后端渲染解决方案（标题不在当前DOM或更可靠的方式） #

如果前端没法直接获取标题（比如标题只在详情页），或者想要更稳定的实现，建议在后端输出按钮时直接生成aria-label，比如WordPress里的PHP代码：

<a href="<?php the_permalink(); ?>" class="et_pb_button" aria-label="Read More On <?php the_title_attribute(); ?>">Read More</a>

这种方式能确保aria-label的准确性，不会受前端DOM结构变化影响。

内容的提问来源于stack exchange，提问作者Axwell