web-dev-qa-db-ja.com

アジャイルカルーセルをワードプレスに統合する：ajaxコールバック関数の書き方

jsonはWordpressで動作するように アジャイルカルーセル のためのajax_callback関数を書く方法を私に全く新しいのですか？下記は、$。getJSON（）関数で解析できるphp配列として作成する必要があるjasonデータ形式です。

 [{
      "content": "<div class='slide_inner'><a class='photo_link' href='#'><img class='photo' src='slides/slide_3.png' alt='Bike'></a><a class='caption' href='#'></a></div>",
      "content_button": "<div class='thumb'><img src='slides/f2_thumb.jpg' alt='bike is Nice'></div><p> Place Holder</p>"
}, {
      "content": "<div class='slide_inner'><a class='photo_link' href='#'><img class='photo' src='slides/slide_4.png' alt='Bike'></a><a class='caption' href='#'></a></div>",
      "content_button": "<div class='thumb'><img src='slides/f2_thumb.jpg' alt='bike is Nice'></div><p> Place Holder</p>"
}]

それとも私もデータをphp配列に変換する必要がありますか？

jqueryajaxslideshowjson
1
elbee

だから私はあなたがこの例を参照して再作成しようとしているのを見ます：

<link rel="stylesheet" href="agile_carousel.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"></script>
<script src="agile_carousel/agile_carousel.a1.1.js"></script>

<script>

    // Code used for "Flavor 2" example (above)

    $.getJSON("agile_carousel/agile_carousel_data.php", function(data) {
        $(document).ready(function(){
            $("#flavor_2").agile_carousel({

                // required settings

                carousel_data: data,
                carousel_outer_height: 330,
                carousel_height: 230,
                slide_height: 230,
                carousel_outer_width: 480,
                slide_width: 480,

                // end required settings

                transition_type: "fade",
                transition_time: 600,
                timer: 3000,
                continuous_scrolling: true,
                control_set_1: "numbered_buttons,previous_button,
                ... (continues on same line)... pause_button,next_button",
                control_set_2: "content_buttons",
                change_on_hover: "content_buttons"
            });
        });
    });
 </script>

カルーセルは、JSON AJAXコールバックのdataパラメータを使用して作成されています。

ただし、carousel_dataにはデータオブジェクトが必要です。$.getJSON()の呼び出しから来る必要はありません。代わりに、そこでjsonオブジェクトを定義できます。

carousel_data: [{
"content": "<div class='slide_inner'><a class=' continues... ",
"content_button": "<div class='thumb'><img src=' coninues... "
}, {
... add more object members as needed

// See http://www.agilecarousel.com/agile_carousel/agile_carousel_data.php
// for complete data

}],

さらに、PHPで必要なデータを生成し、 wp_localize_script を使用してローカライズすると、WordPressがそれをヘッダーに含めることができます。

<?php
wp_enqueue_script( 'some_handle' );
$translation_array = array(
'some_string' => __( 'Some string to translate' ), 'a_value' => '10'
);
wp_localize_script( 'some_handle', 'object_name', $translation_array ); ?>

重要！：wp_localize_script（）は、それがアタッチされているスクリプトがエンキューされた後で呼び出す必要があります。後でキューに入れられたスクリプトのために、ローカライズされたスクリプトをキューに入れることはしません。

次のようにJavaScriptで変数にアクセスできます。

<script>
alert(object_name.some_string); // alerts 'Some string to translate'
</script>

これはAJAXおよびカスタム要求のすべての必要性を迂回するはずです。

しかし、あなたがあなたがしなければならないと思うなら、ここでWP AJAX AP​​Iを見てください：

http://codex.wordpress.org/AJAX_in_Plugins

（テーマにも当てはまります）

1
Tom J Nowell