0

私はajaxを使用してwordpressに新しい投稿をロ​​ードしています。基本的なコードは次のとおりです。

function test(){
    var menuitem = document.getElementsByTagName('nav')[0].childNodes;
    for(var i= 0; i < menuitem.length; i++)
    {
        bindEvt(menuitem[i], "click", loadajax);
    }
};
function loadajax (event) {
    event.preventDefault();
    xhr = new XMLHttpRequest();
    xhr.onreadystatechange  = function(){
        var content = document.getElementsByTagName('article')[0];
        if(xhr.readyState  == 4){
            if(xhr.status  == 200) {
                content.innerHTML = xhr.responseText;
            } else{
                content.innerHTML = 'Cannot connect to server. Check your internet connection'}
        }
    }; 

    xhr.open('GET', this.href, true);
    xhr.send();

}
bindEvt(window, "load", test);

それはうまく機能し、メニュー、ヘッダー、フッターなどを含む新しい投稿全体をロードするだけです...私はコンテンツとコメントだけが必要です。ajaxを使用してWordPressにそれらのコンテンツを具体的に要求する方法はありますか、それともページ全体を取得し、必要なコンテンツのみを抽出して再投稿するためにこれを行う唯一の方法ですか？

多分それのための特定のテンプレートページを作りますか？しかし、どうすればそれを機能させることができますか。

はっきりしているといいのですが。そうでない場合は教えてください！Wordpressのテーマ/PHPでの最初の試み。

ご協力いただきありがとうございます！

4

2 に答える 2

4

テンプレートを使用することもできますが、独自に作成する必要があり、少し面倒です。jQuery ソリューションに関する Andrew M. のコメントは正しいです。あなたもそうです。ドキュメント全体をダウンロードすることになりますが、必要な部分だけを簡単に挿入できます。詳細については、ページ フラグメントのロードに関するセクションを参照してください。

$('#result').load('ajax/test.html #container');

test.htmlをロードし、そのドキュメントの#container要素のコンテンツを#result親ページの要素に挿入します。やさしい。

もちろん、これはソースページを完全にレンダリングするのと同じくらいのサーバー負荷と帯域幅のコストをもたらしますが、幸いなことに、画像などはレンダリングされたセクションの一部である場合にのみ読み込まれます. ただし、大量のトラフィックがない限り、このオーバーヘッドは心配する必要はありません。

サーバーが最初に必要なデータだけを送信するようにしたいとしましょう。これをどのように行うかは、WordPress インスタンスに他にどのようなニーズがあるかによって異なります。

1 ページだけをロードする必要があり、人間が元のページを直接見ているわけではない場合、それは簡単です。

while ( have_posts() ) : the_post();
  echo '<h2>';
  the_title();
  echo '</h2>';
  the_content();
endwhile;

問題の投稿にそのテンプレートを設定します。

しかし、ソースページの投稿も見てもらう必要がある場合は、上記のシングル テンプレートを使用してテーマを作成し、テーマ スイッチャー プラグインをインストールして、呼び出すために必要な mojo を渡す必要があります。 AJAX リクエストの機械可読テーマ。これは少し複雑です。

于 2012-09-09T22:59:43.180 に答える
0

そこで、OP [cmplieger] によって提案されたものと同様の解決策を探してここに来ました。

以前に sudowned で説明されている方法を使用しました。そんなワードプレスのテーマを作りました。ページはヘッダー検出を使用し、オプションでヘッダーをロードしてからコンテンツをロードし、オプションでフッターをロードしました。
これは素晴らしいテーマであり、超高速でロードされます。本当に最善の方法です...

でも...

ブラウザ側でのみ動作するものがあれば素晴らしいと思ったので、この投稿がきっかけでそれを書きました。

注：これは私が行う方法ではありません。上で提案された sudowned の方法を本当にお勧めします。とはいえ、やむを得ない事情もあるかもしれませんが、

すっごく....

/* requires jQuery */
// some assumptions:
// you are using jQuery
// the pages you are calling are inside
// the same domain as the page calling them.
//

HTML のスライス
<div id="content"> <div id="list"> <ul> <li name="//fiddle.jshell.net/isme/j4ygp3nn/show/">Page 1</li> <li name="//fiddle.jshell.net/isme/gmvj0ohg/show/">Page 2</li> </ul> </div> </div>

CSS のスプラッシュ:
#list ul { list-style-type: none;} #popc { margin-top: 20px; margin-left: 20px;} #list ul li { text-decoration: underline; color: #343434; margin-bottom: 5px; cursor: pointer;} #popcontent { background: #ffffff; border: 1px solid #000000; width: 80%; min-width: 80%; margin-left: auto; margin-right: auto; height: 80%; min-height: 300px; position: absolute; display: none; top: 10%; left: 10%; border-radius: 12px;} #x_it { text-align: center; float: right; width: 17px; border: solid 2px #000000; color: #000000; background: red; border-radius: 12px; padding-left: 0px; padding-right: 1px; padding-top: 2px; padding-bottom: 0px; margin-right: 10px;
font-family: sans-serif; font-weight: bold; cursor: pointer;}

jQuery のリベラル層を広めます。 

   jQuery("#content").after("\  
      <div id=\"popcontent\">\  
           <p id='x_it'>X</p>\  
 <div id='popc'></div></div>");  

   popc = jQuery("#popc");  
   popcontent = jQuery("#popcontent");  
  jQuery("#x_it").click(function() {  
     popcontent.fadeOut("fast");  
   });  

jQuery("#list ul li").click(function()  
                                 {  
                     popc.html("");  
                     popc.load(jQuery(this).attr("name") + \  
                     " #main_content");  
                     popcontent.fadeIn("fast");  
                                 });

`

フィドルに動作するデモを投稿しました: https://jsfiddle.net/isme/jjok5kus/34/

ここでの本当のトリックは、load 呼び出しにあります。
2 番目の引数は「#main_content」です。これは、選択した div にその要素のみをロードするようにロード関数に指示します。jQuery.load()のマニュアルを参照してください

于 2016-12-29T22:22:28.990 に答える