WordPress插件未在自定义查询页面入队脚本/样式问题

问题回顾 #

你使用的这款AJAX加载更多插件在归档页、搜索页都能正常工作，但在自定义页面（比如page-customname.php）完全失效。排查后发现插件的脚本和样式没被入队，而且分页逻辑无法识别自定义查询的页码信息。

你的自定义页面里有这样的简化版自定义查询：

<?php 
// Define custom query parameters
$the_query = new WP_Query( array( 
    'post_type' => 'post', 
    'post_status' => 'publish', 
    'category_name' => 'stories', 
    'paged' => get_query_var('paged')
));
while ( $the_query->have_posts() ) : $the_query->the_post();
    echo 'loop stuff';
endwhile; 
wp_reset_postdata();
?>

插件的核心初始化函数代码如下：

function pbd_alp_init() { 
    global $wp_query; 

    // Add code to index pages. 
    if( !is_singular() ) { 
        // Queue JS and CSS 
        wp_enqueue_script( 'pbd-alp-load-posts', plugin_dir_url( __FILE__ ) . 'js/load-posts.js', array('jquery'), '1.0', true ); 
        wp_enqueue_style( 'pbd-alp-style', plugin_dir_url( __FILE__ ) . 'css/style.css', false, '1.0', 'all' ); 

        // What page are we on? And what is the pages limit? 
        $max = $wp_query->max_num_pages; 
        $paged = ( get_query_var('paged') > 1 ) ? get_query_var('paged') : 1; 

        // Add some parameters for the JS. 
        wp_localize_script( 'pbd-alp-load-posts', 'pbd_alp', array( 
            'startPage' => $paged, 
            'maxPages' => $max, 
            'nextLink' => next_posts($max, false) 
        ) ); 
    } 
} 
add_action('template_redirect', 'pbd_alp_init');

问题根源 #

1. 页面判断逻辑限制：插件里的!is_singular()条件会排除所有单页面（包括自定义页面）——自定义页面属于is_singular()返回true的类型，所以脚本和样式根本不会被加载到自定义页面上。
2. 查询对象不匹配：插件依赖全局的$wp_query来获取分页参数，但你的自定义页面用的是独立的$the_query查询对象，插件无法获取到自定义查询的总页数和当前页码，导致AJAX逻辑直接失效。

修复方案 #

1. 调整插件的页面加载条件 #

把插件中的!is_singular()替换成更合适的判断，让自定义页面也能触发脚本和样式的加载：

• 如果想让插件在除首页外的所有页面生效：!is_home()
• 如果只想针对特定自定义页面生效（比如page-customname.php）：(is_archive() || is_search() || is_page_template('page-customname.php'))

2. 让插件识别自定义查询的分页参数 #

你提到的重新实例化$wp_query可行，但更优雅的方式是在自定义页面中临时将自定义查询赋值给全局$wp_query，这样插件就能正确获取分页信息。修改你的自定义页面查询代码：

<?php 
// Define custom query parameters
$the_query = new WP_Query( array( 
    'post_type' => 'post', 
    'post_status' => 'publish', 
    'category_name' => 'stories', 
    'paged' => get_query_var('paged') ?: 1
));

// 临时替换全局$query，让插件能获取正确的分页数据
global $wp_query;
$temp_query = $wp_query;
$wp_query = $the_query;

while ( $the_query->have_posts() ) : $the_query->the_post();
    echo 'loop stuff';
endwhile; 

// 恢复全局$query
$wp_query = $temp_query;
wp_reset_postdata();
?>

3. 修改插件初始化函数 #

调整后的插件函数代码如下，既解决页面加载条件，又确保能获取正确的查询对象：

function pbd_alp_init() { 
    global $wp_query; 

    // 修改条件：允许归档、搜索、自定义页面加载插件资源
    if( is_archive() || is_search() || is_page_template('page-customname.php') ) { 
        // Queue JS and CSS 
        wp_enqueue_script( 'pbd-alp-load-posts', plugin_dir_url( __FILE__ ) . 'js/load-posts.js', array('jquery'), '1.0', true ); 
        wp_enqueue_style( 'pbd-alp-style', plugin_dir_url( __FILE__ ) . 'css/style.css', false, '1.0', 'all' ); 

        // 获取当前查询的分页参数
        $max = $wp_query->max_num_pages; 
        $paged = ( get_query_var('paged') > 1 ) ? get_query_var('paged') : 1; 

        // Add some parameters for the JS. 
        wp_localize_script( 'pbd-alp-load-posts', 'pbd_alp', array( 
            'startPage' => $paged, 
            'maxPages' => $max, 
            'nextLink' => next_posts($max, false) 
        ) ); 
    } 
} 
add_action('template_redirect', 'pbd_alp_init');

验证效果 #

完成上述修改后，刷新你的自定义页面，应该能看到插件的CSS样式生效，点击加载更多按钮也能正确加载下一页的内容了。

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