--- title: "WordPress サイト全体で AJAX を使用するコード - 憂いを忘れる一枚" description: "現在、ますます多くのウェブサイトで AJAX によるページ更新なしの読み込みが流行しており、多くの WordPress テーマにもこの機能が使われています。サイト全体で AJAX を使用するのは一見複雑な技術に思えますが、実際の操作は非常に簡単です。その理由は、すでに詳しい人が関連する関数を書いてくれているためで、開発" canonical_url: "https://www.ikxin.com/ja/article/wordpress-ajax-loading" last_updated: "2026-09-16T09:59:27.259Z" locale: ja meta: "og:description": "現在、ますます多くのウェブサイトで AJAX によるページ更新なしの読み込みが流行しており、多くの WordPress テーマにもこの機能が使われています。サイト全体で AJAX を使用するのは一見複雑な技術に思えますが、実際の操作は非常に簡単です。その理由は、すでに詳しい人が関連する関数を書いてくれているためで、開発" "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~V29yZFByZXNzIOOCteOCpOODiOWFqOS9k-OBpyBBSkFYIOOCkuS9v-eUqOOBmeOCi-OCs-ODvOODiSAtIOaGguOBhOOCkuW~mOOCjOOCi-S4gOaemg%2Cc_Article%2Ctitle_~V29yZFByZXNzIOOCteOCpOODiOWFqOS9k-OBpyBBSkFYIOOCkuS9v-eUqOOBmeOCi-OCs-ODvOODiQ%2Cdescription_~54--5Zyo44CB44G-44GZ44G-44GZ5aSa44GP44Gu44Km44Kn44OW44K144Kk44OI44GnIEFKQVgg44Gr44KI44KL44Oa44O844K45pu05paw44Gq44GX44Gu6Kqt44G~6L6844G~44GM5rWB6KGM44GX44Gm44GK44KK44CB5aSa44GP44GuIFdvcmRQcmVzcyDjg4bjg7zjg57jgavjgoLjgZPjga7mqZ~og73jgYzkvb~jgo~jgozjgabjgYTjgb7jgZnjgILjgrXjgqTjg4jlhajkvZPjgacgQUpBWCDjgpLkvb~nlKjjgZnjgovjga7jga~kuIDopovopIfpm5HjgarmioDooZPjgavmgJ3jgYjjgb7jgZnjgYzjgIHlrp~pmpvjga7mk43kvZzjga~pnZ7luLjjgavnsKHljZjjgafjgZnjgILjgZ3jga7nkIbnlLHjga~jgIHjgZnjgafjgavoqbPjgZfjgYTkurrjgYzplqLpgKPjgZnjgovplqLmlbDjgpLmm7jjgYTjgabjgY~jgozjgabjgYTjgovjgZ~jgoHjgafjgIHplovnmbo%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL3dvcmRwcmVzcy1hamF4LWxvYWRpbmci%2Cs_zTRWdSSm5Xbs6uuU.png" "og:image:alt": "WordPress サイト全体で AJAX を使用するコード - 憂いを忘れる一枚" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "WordPress サイト全体で AJAX を使用するコード" "twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~V29yZFByZXNzIOOCteOCpOODiOWFqOS9k-OBpyBBSkFYIOOCkuS9v-eUqOOBmeOCi-OCs-ODvOODiSAtIOaGguOBhOOCkuW~mOOCjOOCi-S4gOaemg%2Cc_Article%2Ctitle_~V29yZFByZXNzIOOCteOCpOODiOWFqOS9k-OBpyBBSkFYIOOCkuS9v-eUqOOBmeOCi-OCs-ODvOODiQ%2Cdescription_~54--5Zyo44CB44G-44GZ44G-44GZ5aSa44GP44Gu44Km44Kn44OW44K144Kk44OI44GnIEFKQVgg44Gr44KI44KL44Oa44O844K45pu05paw44Gq44GX44Gu6Kqt44G~6L6844G~44GM5rWB6KGM44GX44Gm44GK44KK44CB5aSa44GP44GuIFdvcmRQcmVzcyDjg4bjg7zjg57jgavjgoLjgZPjga7mqZ~og73jgYzkvb~jgo~jgozjgabjgYTjgb7jgZnjgILjgrXjgqTjg4jlhajkvZPjgacgQUpBWCDjgpLkvb~nlKjjgZnjgovjga7jga~kuIDopovopIfpm5HjgarmioDooZPjgavmgJ3jgYjjgb7jgZnjgYzjgIHlrp~pmpvjga7mk43kvZzjga~pnZ7luLjjgavnsKHljZjjgafjgZnjgILjgZ3jga7nkIbnlLHjga~jgIHjgZnjgafjgavoqbPjgZfjgYTkurrjgYzplqLpgKPjgZnjgovplqLmlbDjgpLmm7jjgYTjgabjgY~jgozjgabjgYTjgovjgZ~jgoHjgafjgIHplovnmbo%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL3dvcmRwcmVzcy1hamF4LWxvYWRpbmci%2Cs_zTRWdSSm5Xbs6uuU.png" "twitter:image:alt": "WordPress サイト全体で AJAX を使用するコード - 憂いを忘れる一枚" --- > Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt) # **WordPress サイト全体で AJAX を使用するコード** 2017.10.29 5,889 0 現在、ますます多くのウェブサイトで AJAX によるページ更新なしの読み込みが流行しており、多くの WordPress テーマにもこの機能が使われています。サイト全体で AJAX を使用するのは一見複雑な技術に思えますが、実際の操作は非常に簡単です。その理由は、すでに詳しい人が関連する関数を書いてくれているためで、開発者はパラメータを少し変更するだけで、自分のウェブサイトでこの技術を使用できます。ここでは、WordPress でサイト全体に AJAX を実装できるコードを紹介します。 ## JavaScript コード JavaScript ``` var ajaxhome=''; var ajaxcontent = 'content'; var ajaxsearch_class = 'searchform'; var ajaxignore_string = new String('#, /wp-, .pdf, .zip, .rar, /goto'); var ajaxignore = ajaxignore_string.split(', '); var ajaxloading_code = 'loading'; var ajaxloading_error_code = 'error'; var ajaxreloadDocumentReady = false; var ajaxtrack_analytics = false var ajaxscroll_top = true var ajaxisLoad = false; var ajaxstarted = false; var ajaxsearchPath = null; var ajaxua = jQuery.browser; jQuery(document).ready(function() { ajaxloadPageInit(""); }); window.onpopstate = function(event) { if (ajaxstarted === true && ajaxcheck_ignore(document.location.toString()) == true) { ajaxloadPage(document.location.toString(),1); } }; function ajaxloadPageInit(scope){ jQuery(scope + "a").click(function(event){ if (this.href.indexOf(ajaxhome) >= 0 && ajaxcheck_ignore(this.href) == true){ event.preventDefault(); this.blur(); var caption = this.title || this.name || ""; var group = this.rel || false; try { ajaxclick_code(this); } catch(err) { } ajaxloadPage(this.href); } }); jQuery('.' + ajaxsearch_class).each(function(index) { if (jQuery(this).attr("action")) { ajaxsearchPath = jQuery(this).attr("action");; jQuery(this).submit(function() { submitSearch(jQuery(this).serialize()); return false; }); } }); if (jQuery('.' + ajaxsearch_class).attr("action")) {} else { } } function ajaxloadPage(url, push, getData){ if (!ajaxisLoad){ if (ajaxscroll_top == true) { jQuery('html,body').animate({scrollTop: 0}, 1500); } ajaxisLoad = true; ajaxstarted = true; nohttp = url.replace("http://","").replace("https://",""); firstsla = nohttp.indexOf("/"); pathpos = url.indexOf(nohttp); path = url.substring(pathpos + firstsla); if (push != 1) { if (typeof window.history.pushState == "function") { var stateObj = { foo: 1000 + Math.random()*1001 }; history.pushState(stateObj, "ajax page loaded...", path); } else { } } if (!jQuery('#' + ajaxcontent)) { } jQuery('#' + ajaxcontent).append(ajaxloading_code); jQuery('#' + ajaxcontent).fadeTo("slow", 0.4,function() { jQuery('#' + ajaxcontent).fadeIn("slow", function() { jQuery.ajax({ type: "GET", url: url, data: getData, cache: false, dataType: "html", success: function(data) { ajaxisLoad = false; datax = data.split(''); titlesx = data.split(''); if (datax.length == 2 || titlesx.length == 2) { data = data.split('')[1]; titles = data.split('')[0]; jQuery(document).attr('title', (jQuery("
").html(titles).text())); } else { } if (ajaxtrack_analytics == true) { if(typeof _gaq != "undefined") { if (typeof getData == "undefined") { getData = ""; } else { getData = "?" + getData; } _gaq.push(['_trackPageview', path + getData]); } } data = data.split('id="' + ajaxcontent + '"')[1]; data = data.substring(data.indexOf('>') + 1); var depth = 1; var output = ''; while(depth > 0) { temp = data.split('
')[0]; i = 0; pos = temp.indexOf("')[0] + ''; data = data.substring(data.indexOf('') + 6); } document.getElementById(ajaxcontent).innerHTML = output; jQuery('#' + ajaxcontent).css("position", "absolute"); jQuery('#' + ajaxcontent).css("left", "20000px"); jQuery('#' + ajaxcontent).show(); ajaxloadPageInit("#" + ajaxcontent + " "); if (ajaxreloadDocumentReady == true) { jQuery(document).trigger("ready"); } try { ajaxreload_code(); } catch(err) { } jQuery('#' + ajaxcontent).hide(); jQuery('#' + ajaxcontent).css("position", ""); jQuery('#' + ajaxcontent).css("left", ""); jQuery('#' + ajaxcontent).fadeTo("slow", 1, function() {}); }, error: function(jqXHR, textStatus, errorThrown) { ajaxisLoad = false; document.title = "Error loading requested page!"; document.getElementById(ajaxcontent).innerHTML = ajaxloading_error_code; } }); }); }); } } function submitSearch(param){ if (!ajaxisLoad){ ajaxloadPage(ajaxsearchPath, 0, param); } } function ajaxcheck_ignore(url) { for (var i in ajaxignore) { if (url.indexOf(ajaxignore[i]) >= 0) { return false; } } return true; } function ajaxreload_code() { //add code here } function ajaxclick_code(thiss) { jQuery('ul.nav li').each(function() { jQuery(this).removeClass('current-menu-item'); }); jQuery(thiss).parents('li').addClass('current-menu-item'); } ``` コード部分は、自分の実際の状況に応じて一部変更する必要があります。 - 1 行目の ajaxhome には、ウェブサイトのアクセス URL を入力します - 2 行目の ajaxcontent には、ウェブサイトの記事コンテナの id 名、つまり非同期で読み込む部分を入力します - 3 行目の ajaxsearch\_class には、ウェブサイトの検索ボックスのコンテナ名を入力します。通常は「searchform」です - 4 行目の ajaxignore\_string は、AJAX による読み込みを使用しないリンクを指定します。たとえば feed ソースなどです - 6 行目の ajaxloading\_code には、読み込み時に表示する内容を指定します。アニメーションも設定できます - 7 行目の ajaxloading\_error\_code には、読み込みに失敗したときに表示する内容を指定します。アニメーションも設定できます 上記の要件に従ってコードを変更し、JavaScript ファイルとして単独で保存してウェブページに読み込むだけで、すぐに効果を確認できます。 ## その他の問題 AJAX 非同期読み込みコードを導入すると、ある問題が発生します。ウェブサイトを初めて開いたときは jQuery のアニメーションが正常に動作しますが、ウェブページをクリックして AJAX 非同期読み込みを実行すると、すべてのアニメーションが機能しなくなります。これは、非同期読み込み後に jQuery コードが要素を取得できなくなるためで、エフェクトも当然消えてしまいます。この問題を解決するには、jQuery コードも変更する必要があります。 解決方法として `live()` イベントを使用します。`live()` イベントの使い方は次のとおりです。 Plain Text ``` $(selector).live(event,data,function) ``` event は `click()`、`hover()` などの動作を置き換えるために使用します。data は省略可能なパラメータです。function は実行する動作です。 例として、ある `click()` イベントを `live()` イベントに書き換えてみます。元のコードは次のとおりです。 Plain Text ``` $(".menu-item").click(function(){$(".topmenu").fadeOut(500)}); ``` 変更後は次のようになります。 Plain Text ``` $(".menu-item").live("click",function(){$(".topmenu").fadeOut(500)}); ``` 作業量はかなり多いので、必要な方は試してみてください。 ## **コメント** (0) まだコメントはありません ## **コメントを投稿** ```json {"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/ja#website","@type":"WebSite","description":"「憂いを忘れる一枚」は、技術探究と日々の暮らしをテーマにした個人サイトです。Web 開発、バックエンド、DevOps の実践を記録し、ソフトウェアツールやデジタル体験、コードの外で得た見聞と思索を共有します。","inLanguage":"ja-JP","name":"憂いを忘れる一枚","url":"https://www.ikxin.com/ja","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ja/article/wordpress-ajax-loading#webpage","@type":"WebPage","description":"現在、ますます多くのウェブサイトで AJAX によるページ更新なしの読み込みが流行しており、多くの WordPress テーマにもこの機能が使われています。サイト全体で AJAX を使用するのは一見複雑な技術に思えますが、実際の操作は非常に簡単です。その理由は、すでに詳しい人が関連する関数を書いてくれているためで、開発","name":"WordPress サイト全体で AJAX を使用するコード","url":"https://www.ikxin.com/ja/article/wordpress-ajax-loading","isPartOf":{"@id":"https://www.ikxin.com/ja#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ja/article/wordpress-ajax-loading"]}]}]} ``` ## Sitemap See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.