将当前页面的子页面插件放入js文件

时间：2017-02-28 作者：CaraMar

我正在使用如下自定义查询查询当前页面上的所有子页面。

<?php
$args = array(
    \'post_type\'      => \'page\',
    \'posts_per_page\' => -1,
    \'post_parent\'    => $post->ID,
    \'order\'          => \'ASC\',
    \'orderby\'        => \'menu_order\'
    );
$subservice = new WP_Query( $args );
if ( $subservice->have_posts() ) : ?>
<?php while ( $subservice->have_posts() ) : $subservice->the_post();?>
如何将这些子页面中的所有slug都放入javascript函数中？

我正在初始化jQuery插件，如下所示：

$(\'#pagepiling\').pagepiling({
  sectionSelector: \'.box\',
  anchors: [\'intro\', \'section2\',\'section3\'],
  menu: \'#menu\'
)};
也就是说anchors 选项应显示当前页面中的子页面段塞。

谢谢你的帮助！卡拉

2 个回复
最合适的回答,由SO网友:Paul \'Sparrow Hawk\' Biron 整理而成

我刚刚找到了一种更干净的方法。。。感谢WPSE的另一个问题How do I add a php statement to a jQuery string.

我从来没有听说过wp_localize_script() 直到读到这个问题的答案（我喜欢WPSE：-）。

PHP

add_action (\'wp_enqueue_scripts\', \'localize_js\') ;

function
localize_js ()
{
    global $post ;

    $args = array(
        \'post_type\'      => \'page\',
        \'posts_per_page\' => -1,
        \'post_parent\'    => $post->ID,
        \'order\'          => \'ASC\',
        \'orderby\'        => \'menu_order\'
        );
    $subservice = new WP_Query( $args );
    $slugs = array () ;

    while ( $subservice->have_posts() ) {
        $subservice->the_post();
        $slugs[] = $post->post_name ;
        }

    wp_reset_postdata () ;

    wp_enqueue_script (\'my_script\', plugins_url (\'js/my_script.js\', __FILE__), array (), false, true) ;
    // wp_localize_script() will handle the outputing of the relevant JS global decl
    wp_localize_script (\'my_script\', \'my_slugs\', array (\'slugs\' => $slugs)) ;

    return ;
}
JS，my\\u脚本。js公司
$(\'#pagepiling\').pagepiling({
    sectionSelector: \'.box\',
    anchors: my_slugs.slugs,
    menu: \'#menu\'
)};

SO网友:Paul \'Sparrow Hawk\' Biron

当我需要这样的东西时wp_print_styles 并将我需要的任何值输出为JS globals、ala、，

PHP

add_action (\'wp_print_styles\', \'output_js\') ;

function
output_js ()
{
    $args = array(
        \'post_type\'      => \'page\',
        \'posts_per_page\' => -1,
        \'post_parent\'    => $post->ID,
        \'order\'          => \'ASC\',
        \'orderby\'        => \'menu_order\'
        );
    $subservice = new WP_Query( $args );
    $slugs = array () ;
    global $post ;
    while ( $subservice->have_posts() ) {
        $subservice->the_post();
        $slugs[] = $post->post_name ;
        }

    $slugs = implode ("\', \'", $slugs) ;

    $js = <<<EOF
<style type=\'text/javascript\'>
    var my_slugs = [\'$slugs\'] ;
</style>
EOF;

    echo $js ;

    wp_reset_postdata () ;

    return ;
}

JS

$(\'#pagepiling\').pagepiling({
    sectionSelector: \'.box\',
    anchors: my_slugs
    menu: \'#menu\'
)};
您也可以通过ajax来实现，但这样做的成本更高。

标签： functions   javascript   slug   小码农  

相关推荐

GET_PAGE_TEMPLATE_SLUG返回错误路径

我目前遇到了一个非常奇怪的问题，我找不到任何理由。我有一个在所有服务器上都能正常工作的主题。现在，我有一个客户对此有问题。问题是函数get\\u page\\u template\\u slug（）返回主题文件夹名称。例如：主题/模板主页。php它应该只是模板主页。没有主题文件夹名称的php。怎么会这样？希望有人能帮我。