AJAX调用中Simple Share Buttons插件短代码失效问题排查

我来帮你排查这个问题——AJAX加载的内容里分享按钮不显示，核心原因是Simple Share Buttons插件的前端初始化逻辑只在页面首次加载时执行，而通过AJAX动态插入的新文章DOM，插件并没有重新去初始化这些元素。另外你提到的wp_localize_script没生效，大概率是脚本加载顺序或变量引用的问题，咱们一步步解决：

1. 重新触发插件的前端初始化函数 #

大多数分享按钮插件都会提供一个全局初始化函数，用来渲染页面上的分享按钮。你需要在AJAX请求成功、新内容插入DOM之后，调用这个函数来初始化新添加的分享按钮。

具体修改你的JS代码： #

找到AJAX的success回调部分，插入新内容后添加初始化逻辑：

success:function(data){
    if( data ) {
        $('#true_loadmore').text('Load more').before(data);
        // 关键：调用插件的初始化函数，这里假设插件的初始化函数是ssba_init()
        // 你可以查看插件的JS文件，找到实际的函数名（比如ssba_load_buttons之类的）
        if (typeof ssba_init === 'function') {
            ssba_init();
        }
        current_page++;
        if (current_page == max_pages) $("#true_loadmore").remove();
    } else {
        $('#true_loadmore').remove();
    }
}

如果插件的初始化函数支持指定选择器，你可以只初始化新插入的文章，提升性能：

// 只初始化最后添加的那篇文章里的分享按钮
ssba_init('.article:last .share-links');

2. 确保插件的JS/CSS在AJAX场景下正常加载 #

有些插件会在短代码被调用时才加载对应的JS和CSS，但AJAX请求是后台接口，可能不会触发这些资源的加载。你需要在主题的functions.php里确保插件的资源全局加载：

function my_enqueue_ssba_resources() {
    // 替换成Simple Share Buttons实际注册的脚本和样式handle
    wp_enqueue_script('ssba-script');
    wp_enqueue_style('ssba-style');
}
add_action('wp_enqueue_scripts', 'my_enqueue_ssba_resources');

你可以通过查看插件的代码，找到它注册脚本时用的handle（比如在插件的主文件里找wp_enqueue_script的第一个参数）。

3. 替代方案：直接调用插件的PHP函数生成完整按钮 #

如果插件提供了直接生成分享按钮HTML的PHP函数，你可以绕过短代码，直接在AJAX加载的模板里调用这个函数，这样生成的是完整的可显示的HTML，不需要前端JS再处理：

// 替换原来的do_shortcode调用
<p class="share-links">
    <?php 
    // 假设插件的PHP函数是ssba_share_buttons()
    if (function_exists('ssba_share_buttons')) {
        ssba_share_buttons();
    }
    ?>
</p>

这个方法更可靠，因为不需要依赖前端初始化，直接输出完整的分享按钮结构。

4. 修复wp_localize_script未生效的问题 #

如果你用wp_localize_script是为了传递AJAX相关变量（比如ajaxurl、true_posts），要确保：

• 你的自定义脚本是通过wp_enqueue_script正确注册的
• wp_localize_script是在wp_enqueue_script之后调用的
• 前端JS里正确引用本地化的变量，而不是直接用全局变量

正确的示例代码： #

function my_enqueue_loadmore_script() {
    // 注册自定义的加载更多脚本
    wp_enqueue_script(
        'my-loadmore-script',
        get_template_directory_uri() . '/js/loadmore.js',
        array('jquery'), // 依赖jQuery
        '1.0',
        true // 在页脚加载
    );

    // 本地化脚本，传递变量到前端
    wp_localize_script('my-loadmore-script', 'LoadMoreVars', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'true_posts' => json_encode($your_query_args), // 你的查询参数
        'current_page' => 1,
        'max_pages' => $your_query->max_num_pages
    ));
}
add_action('wp_enqueue_scripts', 'my_enqueue_loadmore_script');

然后在JS里用LoadMoreVars.ajaxurl代替ajaxurl，这样变量就能正确获取到了。

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