Cargando shortcode con ajax

Question

Cargando shortcode con ajax

3 ago 2013, 21:13:27

Vistas: 22.2K

Votos: 3

Estoy tratando de cargar un slideshow si el navegador tiene cierto tamaño de pantalla - es decir, no quiero que el slideshow se cargue en pantallas móviles más pequeñas. El plugin del slideshow proporciona un shortcode:

<?php echo do_shortcode('[metaslider id="8302"]'); ?>

Pero cuando intento cargarlo con .load(), simplemente muestra la cadena de texto y no ejecuta el php.

Buscando un poco, parece que hay un par de publicaciones relacionadas con esto:

llamar shortcode en javascript ¿Por qué el 'do_shortcode' de un plugin podría no funcionar en una petición AJAX?

Pero desafortunadamente no tengo una reputación lo suficientemente alta para contribuir con comentarios en esas publicaciones, así que estoy abriendo una nueva pregunta.

¿Alguien puede ayudar a explicar esto de una manera muy simplificada a alguien que no está muy familiarizado con PHP?

Don't Wake Me Up

51

plugins shortcode ajax

Comentarios

¿Qué intentas cargar con .load()? Por favor publica todo el código relevante.

s_ha_dum

3 ago 2013 21:32:16

Cuando intento cargar un archivo php que contiene el código anterior ( <?php echo do_shortcode('[metaslider id="8302"]'); ?> )

Así: $('.homepage__slider').load('wp-content/themes/mytheme/slider.php');

Don't Wake Me Up

3 ago 2013 21:49:10

Todas las respuestas a la pregunta

Comentarios

Gracias por la publicación detallada. Realmente soy bastante malo con PHP y JavaScript, así que, para ser honesto, no tuvo mucho sentido para mí aunque tu explicación parece bastante completa. Logré que casi funcionara: el slideshow se carga, pero tiene fallas. Como si no estuviera cargando todos los recursos que necesita para funcionar correctamente (las imágenes no tienen el tamaño correcto, los objetos que deberían estar ocultos no lo están, etc.). Intenté agregar manualmente el JavaScript y CSS del plugin, pero sin éxito.

Don't Wake Me Up

4 ago 2013 12:05:40

Parece que no tiene nada que ver con los recursos: si cargo dos versiones del slider en la misma página, de esta manera y de la forma habitual con shortcode para asegurarme de que todos los recursos estén cargados, la versión AJAX sigue estropeada.

Don't Wake Me Up

4 ago 2013 12:10:40

Para ser más preciso, la versión AJAX está mostrando un montón de HTML en la diapositiva que no está en la versión normal del shortcode. Esto incluye divs con la clase thumbnail, delete slide, campos de entrada para leyendas, etc., casi como si fuera una versión de administración de la diapositiva.

Don't Wake Me Up

4 ago 2013 12:28:51

Si hay una versión "admin" del slideshow y eso es lo que se está cargando, necesitarás ubicar el código que controla eso. Asumo que estaría cargando algo diferente cuando is_admin() === true, pero todas las solicitudes de la API AJAX son "admin".

s_ha_dum

4 ago 2013 18:43:55

s_ha_dum 65.5K · Answer 1 · 2013-08-03T23:18:56Z

No puedes cargar un archivo directamente así:

$('.homepage__slider').load('wp-content/themes/mytheme/slider.php');

También ten en cuenta que WordPress carga jQuery en modo noConflict, por lo que el alias $ no funciona.

Si cargas un archivo directamente, ninguna de las funciones de WordPress funcionará. Deberías usar la API de AJAX para que todo se cargue en el contexto de WordPress.

Envuelves tu PHP de procesamiento en una función:

function my_ajax_shortcode_wpse_108874() {
    echo do_shortcode('[metaslider id="8302"]');
    die;
}

Conecta eso al sistema AJAX:

add_action('wp_ajax_my_ajax_shortcode', 'my_ajax_shortcode_wpse_108874()');
add_action('wp_ajax_nopriv_my_ajax_shortcode', 'my_ajax_shortcode_wpse_108874()');

Envía tu solicitud a http://site/wp-admin/admin-ajax.php y pasa my_ajax_shortcode como argumento cuando Javascript haga una petición.

var data = {
    action: 'my_ajax_shortcode'
};
jQuery.post(ajax_url, data, function(response) {
    // lo que necesites hacer; quizás nada
});

Puedes configurar ajax_url de manera similar a esto del Codex:

add_action( 'admin_enqueue_scripts', 'my_enqueue' );
function my_enqueue($hook) {
    if( 'index.php' != $hook ) return;  // Solo aplica al panel de dashboard

    wp_enqueue_script( 'ajax-script', plugins_url( '/js/my_query.js', __FILE__ ), array('jquery'));

    // en javascript, las propiedades del objeto se acceden como ajax_object.ajax_url, ajax_object.we_value
    wp_localize_script( 'ajax-script', 'ajax_object',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
}