在WordPress中调用AJAX中的页面内容

时间：2013-03-21 作者：Cédric Charles

利用Wordpress，我制作了一个简单的索引页面，由于AJAX，它可以调用其他10个页面的内容。现在我需要把它放到Wordpress中，AJAX调用根本不起作用。

我已经创建了主页和其他10个页面。当用户到达我的网站时，主页上有一个菜单。此菜单的每个项目都有一个与10个页面中的1个页面相关的HREF链接（感谢get\\u permalink（page\\u id）；）。我的脚本获取HREF的值并尝试加载页面的内容。我用的是Wordpress，但它不在Wordpress内部。

菜单如下：

<ul class="nav">
    <li><a href="<?php echo get_permalink( 41 ); ?>" data-parallax><span class="accessibility">Règle #</span><span class="number">0</span><span class="accessibility"> -</span><span class="rule-label">La coparentalité</span></a></li>
    <li><a href="<?php echo get_permalink( 43 ); ?>" data-parallax><span class="accessibility">Règle #</span><span class="number">1</span><span class="accessibility"> -</span><span class="rule-label">N’obligez pas votre enfant à faire un choix</span></a></li>
    <li><a href="<?php echo get_permalink( 45 ); ?>" data-parallax><span class="accessibility">Règle #</span><span class="number">2</span><span class="accessibility"> -</span><span class="rule-label">Optez pour un discours positif</span></a></li>
    <li><a href="<?php echo get_permalink( 49 ); ?>" data-parallax><span class="accessibility">Règle #</span><span class="number">3</span><span class="accessibility"> -</span><span class="rule-label">Épargnez les détails à votre enfant</span></a></li>
    <li><a href="<?php echo get_permalink( 51 ); ?>" data-parallax><span class="accessibility">Règle #</span><span class="number">4</span><span class="accessibility"> -</span><span class="rule-label">Ne faites pas de votre enfant votre messager</span></a></li>
    <li><a href="<?php echo get_permalink( 53 ); ?>" data-parallax><span class="accessibility">Règle #</span><span class="number">5</span><span class="accessibility"> -</span><span class="rule-label">Détachez-vous de votre ex-conjoint</span></a></li>
    <li><a href="<?php echo get_permalink( 55 ); ?>" data-parallax><span class="accessibility">Règle #</span><span class="number">6</span><span class="accessibility"> -</span><span class="rule-label">Fixez des limites et des attentes pour vos enfants</span></a></li>
    <li><a href="<?php echo get_permalink( 57 ); ?>" data-parallax><span class="accessibility">Règle #</span><span class="number">7</span><span class="accessibility"> -</span><span class="rule-label">Restez ouvert à la communication</span></a></li>
    <li><a href="<?php echo get_permalink( 59 ); ?>" data-parallax><span class="accessibility">Règle #</span><span class="number">8</span><span class="accessibility"> -</span><span class="rule-label">Devenez adulte et responsable</span></a></li>
    <li><a href="<?php echo get_permalink( 61 ); ?>" data-parallax><span class="accessibility">Règle #</span><span class="number">9</span><span class="accessibility"> -</span><span class="rule-label">Mettez votre enfant en confiance et en sécurité</span></a></li>
    <li><a href="<?php echo get_permalink( 63 ); ?>" data-parallax><span class="accessibility">Règle #</span><span class="number">10</span><span class="accessibility"> -</span><span class="rule-label">Apprenez à rebondir !</span></a></li>
</ul>
在功能中。php，我有：

/************************************************************************/
/*  JS
/************************************************************************/

function load_my_scripts() {

    //Include one of my custom javascript files
    wp_register_script(\'scrollTo\', get_stylesheet_directory_uri().\'/js/jquery.scrollTo-min.js\', array(\'jquery\'), filemtime( get_stylesheet_directory().\'/js/jquery.scrollTo-min.js\'), true );
    wp_register_script(\'seo-parallax\', get_stylesheet_directory_uri().\'/js/jquery.seo-parallax.js\', array(\'jquery\'), filemtime( get_stylesheet_directory().\'/js/jquery.seo-parallax.js\'), true );
    wp_register_script(\'myscript\', get_stylesheet_directory_uri().\'/js/scripts.js\', array(\'jquery\'), filemtime( get_stylesheet_directory().\'/js/scripts.js\'), true );

    wp_enqueue_script(\'scrollTo\');
    wp_enqueue_script(\'seo-parallax\');
    wp_enqueue_script(\'myscript\');
}
add_action(\'wp_enqueue_scripts\', \'load_my_scripts\');
在jquery中。seo视差，我有：

(function( $ ) {
  $.fn.SEOParallax = function() {
        var container_id = "content"; // the id of the container (must be the same on each page)
        var container = $("#"+container_id); // the container where the content will be put in
        var pages = $("a[data-parallax]"); // every content that should be injected
        var number = 0;
        // console.log(number);
        $(container).html("");
        pages.each(function(page){
            var page = $(this);

            var url = $(this).attr("href");
            console.log(url);
            // Remove the current content
            $.get(url, function(data) {
                // console.log(url);
                var code = $(data);
                code.each(function() {
                    if($(this).attr("id") == container_id){
                        subcontainer = $("<span id=\'rule-photo-"+number+"-anchor\' class=\'rule-anchor\'></span>")
                        $(subcontainer).appendTo($(container));
                        $($(this).html()).insertAfter($(subcontainer));
                        $(page).attr("href", "#rule-photo-"+number+"-anchor");
                        number += 1;

                    } 
                })
            });
        });
            // wrap the content and include it in the page

        // end
  };
})( jQuery );
在脚本中。js，我有：

;( function($) {
    $( "body" ).SEOParallax();

    $( "body" ).delegate( "a", "click", function() {
        $( \'html, body\' ).animate( {
            scrollTop: $( $( this ).attr( "href" ) ).offset().top
        }, 1200 );
        return false;
    } );
} )( jQuery || {} );
因此，通常情况下，加载页面时，seo视差脚本会获取导航中的11个链接，清空当前页面的#内容，并在每个页面的#内容中添加内容。在chrome上，内容的顺序不好。通常y必须按以下顺序放置内容：0-1-2-3-4-5-6-7-8-9-10。但是，它是随机放置的（例如：1-4-0-9-6-10-2-5-8-3-7）。

UPDATE :我打过电话<?php var_dump($GLOBALS[\'wp_query\']) ?> 就在之前<?php get_footer(); ?>, 以下是我所拥有的：

object(WP_Query)#23 (47) { ["query_vars"]=> array(55) { ["error"]=> string(0) "" ["m"]=> int(0) ["p"]=> string(2) "41" ["post_parent"]=> string(0) "" ["subpost"]=> string(0) "" ["subpost_id"]=> string(0) "" ["attachment"]=> string(0) "" ["attachment_id"]=> int(0) ["name"]=> string(0) "" ["static"]=> string(0) "" ["pagename"]=> string(0) "" ["page_id"]=> string(2) "41" ["second"]=> string(0) "" ["minute"]=> string(0) "" ["hour"]=> string(0) "" ["day"]=> int(0) ["monthnum"]=> int(0) ["year"]=> int(0) ["w"]=> int(0) ["category_name"]=> string(0) "" ["tag"]=> string(0) "" ["cat"]=> string(0) "" ["tag_id"]=> string(0) "" ["author_name"]=> string(0) "" ["feed"]=> string(0) "" ["tb"]=> string(0) "" ["paged"]=> int(0) ["comments_popup"]=> string(0) "" ["meta_key"]=> string(0) "" ["meta_value"]=> string(0) "" ["preview"]=> string(0) "" ["s"]=> string(0) "" ["sentence"]=> string(0) "" ["fields"]=> string(0) "" ["category__in"]=> array(0) { } ["category__not_in"]=> array(0) { } ["category__and"]=> array(0) { } ["post__in"]=> array(0) { } ["post__not_in"]=> array(0) { } ["tag__in"]=> array(0) { } ["tag__not_in"]=> array(0) { } ["tag__and"]=> array(0) { } ["tag_slug__in"]=> array(0) { } ["tag_slug__and"]=> array(0) { } ["ignore_sticky_posts"]=> bool(false) ["suppress_filters"]=> bool(false) ["cache_results"]=> bool(false) ["update_post_term_cache"]=> bool(true) ["update_post_meta_cache"]=> bool(true) ["post_type"]=> string(0) "" ["posts_per_page"]=> int(10) ["nopaging"]=> bool(false) ["comments_per_page"]=> string(2) "50" ["no_found_rows"]=> bool(false) ["order"]=> string(4) "DESC" } ["tax_query"]=> object(WP_Tax_Query)#43 (2) { ["queries"]=> array(0) { } ["relation"]=> string(3) "AND" } ["meta_query"]=> object(WP_Meta_Query)#42 (2) { ["queries"]=> array(0) { } ["relation"]=> NULL } ["post_count"]=> int(1) ["current_post"]=> int(-1) ["in_the_loop"]=> bool(false) ["comment_count"]=> int(0) ["current_comment"]=> int(-1) ["found_posts"]=> int(0) ["max_num_pages"]=> int(0) ["max_num_comment_pages"]=> int(0) ["is_single"]=> bool(false) ["is_preview"]=> bool(false) ["is_page"]=> bool(true) ["is_archive"]=> bool(false) ["is_date"]=> bool(false) ["is_year"]=> bool(false) ["is_month"]=> bool(false) ["is_day"]=> bool(false) ["is_time"]=> bool(false) ["is_author"]=> bool(false) ["is_category"]=> bool(false) ["is_tag"]=> bool(false) ["is_tax"]=> bool(false) ["is_search"]=> bool(false) ["is_feed"]=> bool(false) ["is_comment_feed"]=> bool(false) ["is_trackback"]=> bool(false) ["is_home"]=> bool(false) ["is_404"]=> bool(false) ["is_comments_popup"]=> bool(false) ["is_paged"]=> bool(false) ["is_admin"]=> bool(false) ["is_attachment"]=> bool(false) ["is_singular"]=> bool(true) ["is_robots"]=> bool(false) ["is_posts_page"]=> bool(false) ["is_post_type_archive"]=> bool(false) ["query_vars_hash"]=> string(32) "8f15f3752a526b936a323e2a33ace1e5" ["query_vars_changed"]=> bool(false) ["thumbnails_cached"]=> bool(false) ["query"]=> array(0) { } ["request"]=> string(143) "SELECT wp_4_posts.* FROM wp_4_posts WHERE 1=1 AND wp_4_posts.ID = 41 AND wp_4_posts.post_type = \'page\' ORDER BY wp_4_posts.post_date DESC " ["posts"]=> &array(1) { [0]=> object(stdClass)#62 (25) { ["ID"]=> int(41) ["post_author"]=> string(1) "7" ["post_date"]=> string(19) "2013-03-20 11:06:49" ["post_date_gmt"]=> string(19) "2013-03-20 11:06:49" ["post_content"]=> string(0) "" ["post_title"]=> string(38) "La coparentalité, comment ça marche?" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(34) "la-coparentalite-comment-ca-marche" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2013-03-20 14:29:31" ["post_modified_gmt"]=> string(19) "2013-03-20 14:29:31" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(43) "http://miniguide.wp.2houses.com/?page_id=41" ["menu_order"]=> int(0) ["post_type"]=> string(4) "page" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["ancestors"]=> array(0) { } ["filter"]=> string(3) "raw" } } ["post"]=> object(stdClass)#62 (25) { ["ID"]=> int(41) ["post_author"]=> string(1) "7" ["post_date"]=> string(19) "2013-03-20 11:06:49" ["post_date_gmt"]=> string(19) "2013-03-20 11:06:49" ["post_content"]=> string(0) "" ["post_title"]=> string(38) "La coparentalité, comment ça marche?" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(34) "la-coparentalite-comment-ca-marche" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2013-03-20 14:29:31" ["post_modified_gmt"]=> string(19) "2013-03-20 14:29:31" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(43) "http://miniguide.wp.2houses.com/?page_id=41" ["menu_order"]=> int(0) ["post_type"]=> string(4) "page" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["ancestors"]=> array(0) { } ["filter"]=> string(3) "raw" } ["queried_object"]=> object(stdClass)#62 (25) { ["ID"]=> int(41) ["post_author"]=> string(1) "7" ["post_date"]=> string(19) "2013-03-20 11:06:49" ["post_date_gmt"]=> string(19) "2013-03-20 11:06:49" ["post_content"]=> string(0) "" ["post_title"]=> string(38) "La coparentalité, comment ça marche?" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(6) "closed" ["post_password"]=> string(0) "" ["post_name"]=> string(34) "la-coparentalite-comment-ca-marche" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2013-03-20 14:29:31" ["post_modified_gmt"]=> string(19) "2013-03-20 14:29:31" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(43) "http://miniguide.wp.2houses.com/?page_id=41" ["menu_order"]=> int(0) ["post_type"]=> string(4) "page" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["ancestors"]=> array(0) { } ["filter"]=> string(3) "raw" } ["queried_object_id"]=> int(41) }
问题出在哪里？谢谢你

2 个回复
SO网友:kaiser

我在评论中已经提到there\'re preferred ways to load your scripts. 最重要的是定义依赖项和使用适当的挂钩。

以下部分不会像这样工作：

$(document).ready(function() {
    $("body").SEOParallax();

    $("body").delegate("a", "click", function() {
        $(\'html, body\').animate({
            scrollTop: $($(this).attr("href")).offset().top
        }, 1200);
        return false;
    });
});
TheWordPress Javascript Coding Standards by Tom McFarlin 向您展示正确的操作方法-避免使用无冲突模式：

;( function ($) {
    // ...
} ( jQuery ) );
这是一个自调用并立即执行的函数，注入jQuery 作为第一个参数，命名为$ 内部函数本身的范围。现在您可以安全使用$ 而不是jQuery.

因此，您的脚本应该如下所示：

;( function($) {
    $( "body" ).SEOParallax();

    $( "body" ).delegate( "a", "click", function() {
        $( \'html, body\' ).animate( {
            scrollTop: $( $( this ).attr( "href" ) ).offset().top
        }, 1200 );
        return false;
    } );
} )( jQuery || {} );
我还应该指出，你不应该使用.delegate() 不再来自jQuery的报价：

“从jQuery 1.7开始.on() 方法可代替.delegate()“”

但这是另一个讨论的一部分，最好转到StackOverflow。

SO网友:Marc Dingena

你可以考虑使用djax, 这是动态的pjax （和pjax 使用pushState成为ajax）。

pjax （并通过扩展djax) 允许您在页面上设置存在于所有其他页面中的容器，例如<div id="content">. 您只需向其中添加一个类，该类也在插件的JavaScript中定义。例如：<div id="content" class="dynamic">.

该插件现在尝试加载请求URL的HTML，查找具有dynamic 类并用获取的结果替换该元素的当前页面内容。

djax 是一个pjax-专门为WordPress设计的修改，我正在http://www.tjoonz.com （如果要查看工作示例）。

结束
标签： pages   jquery   ajax   小码农  

相关推荐

JQuery加载不带模板的php-php文件

我即将开始编写一个php文件，该文件将返回一个JSON数组，用作JQuery自动完成源。我想创建我的源。不使用WordPress模板加载的php文件。当前/包括/来源。php包含：<?php echo \"hello world\"; ?> 但如果我去http://www.mywordpress.com/includes/source.php 相反，我得到了模板化的404页。我如何避免这种情况？编辑作为对评论的回应，以下是我的htaccess文件：# BEGIN Wo