WordPress页面注入字母分隔器遇'The'前缀分类异常问题

问题背景 #

我们在WordPress页面的默认Query Loop中注入字母分隔器，避免为每个字母/数字单独创建Query Loop。当前代码可运行，但存在bug：若某字母分组的首篇帖子标题以"The"开头，整个组的帖子会被忽略，直到出现不以"The"开头的帖子（例如《The Lake》被错误分到K组，《Lake Effect》在L组）。

由于是文学期刊列表，不能移除标题中的"The"，已通过设置不含"The"的Post Title实现正确排序，同时用ACF字段full_name显示带"The"的完整期刊名。

现有代码问题分析 #

当前JS代码直接从前端显示的标题（即full_name的内容）提取首字母，但排序逻辑是基于不含"The"的Post Title，导致分组逻辑与排序逻辑不一致。此外，代码中的条件判断会跳过所有带"The"的帖子的分组处理，进而引发分组缺失的问题。

现有实现代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$( document ).ready(function() {
  
var alpha1="";
    $(".pubgrid.gb-query-loop-wrapper>div").each(function(){
        var alpha = $(this).find("a").html().substr(0,1).toLowerCase();
        var alpha2 = $(this).find("a").html().substr(0,3).toLowerCase();
        var alpha3 = $(this).find("a").html().substr(0,4).toLowerCase();

        if(isNaN(alpha) && alpha3!="the&" && alpha3!="the " && alpha2!="the&" && alpha2!="the ")
        {
            if(alpha!=alpha1)
            {
                jQuery(this).prepend( '<div style="width:100%; display:block; clear:both; text-align:center;"><a id="'+alpha+'"></a><p><span style="font-size: 18pt;">'+alpha+'</span></p><hr class="redline"><p><a href="#top" data-uk-smooth-scroll="" target="_self">top of page</a></p></div>' );
            }
            console.log(alpha);
            alpha1 = alpha;
        }
    });
});
</script>

解决方案 #

核心思路是让分组逻辑与排序逻辑保持一致：将用于排序的不含"The"的Post Title传递到前端，以此为依据生成字母分隔器，同时实现数字统一分组。

步骤1：传递排序用标题到前端 #

在Query Loop的帖子项容器中添加自定义data-sort-title属性，存储不含"The"的Post Title：

• 如果使用可视化编辑器（如GenerateBlocks），可直接给Query Loop的Item div添加自定义属性，键为data-sort-title，值选择动态内容中的「Post Title」
• 或通过主题钩子添加（在functions.php中插入）：

add_action('generateblocks_after_loop_item', function() {
    echo ' data-sort-title="' . esc_attr(get_the_title()) . '"';
});

步骤2：修改JS代码实现正确分组 #

更新JS代码，从data-sort-title获取排序用标题，处理数字分组，并移除冗余的"The"判断：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$( document ).ready(function() {
  var currentGroup = "";
  $(".pubgrid.gb-query-loop-wrapper>div").each(function(){
    // 获取排序用标题并格式化
    var sortTitle = $(this).data('sort-title').toLowerCase().trim();
    
    // 额外处理：以防排序用标题仍含"The "前缀
    if (sortTitle.startsWith('the ')) {
      sortTitle = sortTitle.substring(4);
    }

    // 确定分组键：数字归为0-9组，否则取首字母
    var firstChar = sortTitle.substr(0, 1);
    var groupKey = !isNaN(firstChar) ? "0-9" : firstChar.toLowerCase();

    // 当进入新分组时插入分隔器
    if (groupKey !== currentGroup) {
      $(this).prepend(`<div style="width:100%; display:block; clear:both; text-align:center;"><a id="${groupKey}"></a><p><span style="font-size: 18pt;">${groupKey.toUpperCase()}</span></p><hr class="redline"><p><a href="#top" data-uk-smooth-scroll="" target="_self">top of page</a></p></div>`);
      currentGroup = groupKey;
    }
  });
});
</script>

代码修改说明 #

• 从data-sort-title获取排序用标题，确保分组逻辑与排序逻辑一致
• 新增数字分组：所有以数字开头的帖子统一归到「0-9」组
• 简化逻辑：移除原代码中复杂的"The"字符串判断，仅保留冗余处理以防万一
• 变量名更清晰，提升代码可读性

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