web-dev-qa-db-fra.com

Intégration du manège agile à wordpress: comment écrire la fonction de rappel ajax

json est totalement nouveau pour moi comment écrire une fonction ajax_callback pour un manège agile pour travailler dans wordpress? Vous trouverez ci-dessous le format de données jason que j’ai besoin d’écrire sous forme de tableaux php car il pourrait être analysé par la fonction $ .getJSON ().

 [{
      "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>"
}]

Ou dois-je même convertir les données en tableaux php?

jqueryajaxslideshowjson
1
elbee

Je vois donc que vous faites référence et tentez de recréer cet exemple:

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

Le carrousel est créé à l'aide du paramètre data du callback JSON AJAX.

Cependant, carousel_data nécessite un objet de données, il ne nécessite pas qu'il provienne d'un appel à $.getJSON(). Au lieu de cela, vous pouvez définir l’objet json ici, comme ceci:

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

}],

Encore plus loin, vous pouvez générer les données nécessaires en PHP, puis les localiser en utilisant wp_localize_script , et WordPress les inclura dans l'en-tête:

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

IMPORTANT!: wp_localize_script () DOIT être appelé après que le script auquel elle est attachée a été mis en file d'attente. Il ne met pas le script localisé dans une file d'attente pour les scripts en attente ultérieurs.

Vous pouvez accéder aux variables en JavaScript comme suit:

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

Cela devrait éviter tout besoin de AJAX et de demandes personnalisées.

Toutefois, si vous pensez que vous devez le faire, regardez l’API WP AJAX:

http://codex.wordpress.org/AJAX_in_Plugins

(cela s'applique aussi aux thèmes)

1
Tom J Nowell