web-dev-qa-db-ja.com

でページのコンテンツを呼び出す AJAX Wordpressで

Wordpressから、私はAJAXのおかげで他の10ページのコンテンツを呼び出す簡単なインデックスページを作りました。今度はこれをWordpressに入れる必要があり、AJAX呼び出しはまったく機能しません。

ホームページと他の10ページを作成しました。ユーザーが私のWebサイトにアクセスすると、ホームページにメニューが表示されます。このメニューの各項目には、10ページのうちの1ページに関連するHREFとのリンクがあります（get_permalink（page_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>

Function.phpでは、私はそれを持っています：

/******************************************** ***************************/
/* JS 
/******* ******************************************************** ***************/
 
 function load_my_scripts（）{
 
 //自分のカスタムJavaScriptファイルの1つを含める
 wp_register_script（ 'scrollTo'、get_stylesheet_directory_uri（）。 '/ js/jquery.scrollTo-min.js'、配列（ 'jquery'）、ファイルタイム（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'、配列（ '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-parallaxでは、それがあります。

(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 );

Scripts.jsでは、私はそれを持っています：

;（function（$）{
 $（ "body"）.SEOParallax（）; 
 
 $（ "body"）.delegate（ "a" 、 "クリック"、function（）{
 $（ 'html、body'）.animate（{
 scrollTop：$（$（this）.attr（ "href"））.offset（ ）.top 
}、1200）; 
 falseを返す; 
}）; 
}）（jQuery || {}）;

そのため、通常、ページがロードされると、seo-parallaxスクリプトは現在のページの#contentを空にして各ページの#contentにコンテンツを追加する、ナビゲーション内の11個のリンクを取得します。クロムでは、内容は順調ではありません。通常、yは次の順序でコンテンツを配置する必要があります：0-1-2-3-4-5-6-7-8-9-10。しかし代わりに、それはランダムに配置されています（例：1-4-0-9-6-10-2-5-8-3-7）。

更新： <?php var_dump($GLOBALS['wp_query']) ?>の前に<?php get_footer(); ?> justeを呼び出しました。

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) }

問題はどこだ ？ありがとうございます

pagesjqueryajax
2
Cédric Charles

あなたのスクリプトをロードするための好ましい方法があります 。最も重要なのは、依存関係を定義し、適切なフックを使うことです。

次の部分はこのようには動作しません。

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

    $("body").delegate("a", "click", function() {
        $('html, body').animate({
            scrollTop: $($(this).attr("href")).offset().top
        }, 1200);
        return false;
    });
});

Tom McFarlinによる WordPress Javascriptコーディング標準 それを行う正しい方法を示します - 競合しないモードの必要性を回避します。

;( function ($) {
    // ...
} ( jQuery ) );

これは、最初の引数としてjQueryをインジェクトし、すぐに実行する関数です。これは、$insideという関数自体のスコープです。これで、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に移ったもう一つの議論の一部です。

3
kaiser

動的なdjaxである pjax の使用を検討することができます（そして pjax pushStateを使用したajax）。

pjax（および拡張子djax）を使用すると、他のすべてのページに存在するページ（たとえば<div id="content">）にコンテナを設定できます。プラグインのJavaScriptで定義したクラスを追加するだけです。例えば、<div id="content" class="dynamic">です。

このプラグインは要求されたURLのHTMLをロードしようとし、dynamicクラスを持つ要素を探し、その要素の現在のページの内容を取得した結果で置き換えます。

djaxはWordPressのために特別に設計されたpjaxの修正であり、私はそれを http://www.tjoonz.com でうまく使っています（実用的な例を見たい場合）。

1
Marc Dingena