web-dev-qa-db-ja.com

Ajaxを使って投稿を呼び出す正しい方法

私はjQueryを使用して画像ギャラリープラグインを書き込もうとしています。私はjQuerys $ .post AJAXメソッドを使用して、関連する投稿ページから情報を送受信します。基本的に、添付ファイルをループして、次のボタンが押されるたびに、すべての画像を使用するまで新しい画像を追加します（AJAXを停止するために何かを返す必要がある場合は、まだわかりません）。 。）.

これを行う方法について非常に矛盾する情報をいくつか読みました。他のWPファイルからPHPデータと関数にアクセスする方法を知りたいです。何か案は？私は、スレッドベアであり、強調していて、これについては一般的に私の心の外にいます。

postsloopjqueryajax
2
Dan

@MatthewBoynesが既に述べたように、すべての画像に対して$.post()リクエストを行うことはいくらかのオーバーヘッドをもたらすかもしれません。

おそらくもっと良い解決策はそれらをつかんでキャッシュしてから wp_localize_script() を使ってjsファイルにそれらを投げることです。

$attachments = get_posts( array(
     'post_parent'    => get_the_ID()
    ,'post_type'      => 'attachment'
    ,'posts_per_page' => -1
    #,'exclude'        => get_post_thumbnail_ID() // only needed if we want to exclude the feat. image
) );

// Hook those to `wp_enqueue_scripts`
wp_register_script( 
     'gallery'
    ,get_template_directory_uri().'/js/gallery.js'
    ,array( 'jquery' )
    ,filemtime( get_template_directory().'/js/gallery.js' )
    ,true
);
wp_localize_script(
     'gallery'
    ,'gallery_object'
    ,json_encode( $attachments )
);

その後、gallery_objectファイル内から~/js/gallery.jsにアクセスし、.on()クリックハンドラで次の画像に移動できます。

1
kaiser

ここでajaxを使うことはおそらくあなたにとって最大の利益にはならないでしょう（1つの例外を除いて、下記参照）。まず、各イメージを照会するためにサーバーへの不要な呼び出しを作成します。第二に、特にPOSTリクエストを行っている場合は結果をキャッシュすることができません（何も変更していないので、これは正しいHTTPメソッド/動詞ではないでしょう。あなたの例では、GETリクエスト[jQuery ajaxでは$.get()]を使いたいのですが、私は詳しく説明します。第三に、ユーザーにとっては遅くなります。

最善の策は、最初のページ呼び出しで投稿をループして画像のURLをJavaScriptの配列に出力するか、または投稿の配列をJSONとして出力することです。 <img>タグをループして出力することもできますが、画像は要求に応じて事前に読み込まれることはありません（それが良いことかどうかは、サイトと画像によって異なります）。私は最初の選択肢で行きます、そして私がそれを始めさせる方法は次のとおりです。

<script type="text/javascript">
var my_images = [
<?php
# Here is where you'll loop through your attachments
?>
];
</script>

これに対する唯一の例外は、 lot の画像がある場合です。 1ページあたり> 100その場合、あなたは正しいバランスを見つけ、あなたがあなたが頼んでいるものと私が上で提案したものを組み合わせて、画像のバッチのためのajax呼び出しをする必要があります。

がんばろう！

編集する

考えてみると、タイトルをリンクテキストとして画像へのリンクのリストを出力してから、JSを使用してそれを読み上げ、スライドショーを設定して、画像を動的にロードすることです（linkタグのhref）。オンデマンド。データがHTMLに格納されていることを除けば、これは実際にはJS配列と同じです。それはHTMLであるため、それはいくつかの明確な利点をもたらします：JSを無効にしたブラウザはまだ写真にアクセスすることができます、あなたは画像のキャプションを持っているでしょううまくいけば、キーワードが豊富な画像のタイトルもクモによって読まれるでしょう。これは、 コーデックス から部分的に引き出された、これを設定する方法です。

<ul>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post();
    $attachments = get_posts( array(
        'post_type' => 'attachment',
        'numberposts' => -1,
        'post_status' => null,
        'post_parent' => $post->ID
    ) );
    if ( $attachments ) foreach ( $attachments as $attachment ) : ?>
    <li><a href="<?php echo wp_get_attachment_url( $attachment->ID ); ?>"><?php echo apply_filters( 'the_title', $attachment->post_title ); ?></a></li>
    <?php endforeach; ?>
</ul>
0
Matthew Boynes