Actualizar Loop con Formulario

Question

Actualizar Loop con Formulario

2 ene 2012, 01:07:25

Vistas: 1.05K

Votos: 2

Tengo una galería de fotos que estoy desarrollando usando WP como sistema de gestión de contenidos. Estoy utilizando bastante algunos plugins de jQuery para manejar el estilo y la manipulación de la UI (mediante ordenación). Mi problema es que hay demasiadas publicaciones! 737, y cada una tiene una miniatura que se muestra en la página. Esto inevitablemente ralentiza cualquier navegador. Especialmente porque el plugin de ordenación "clona" las imágenes cuando las ordena. Las publicaciones se construyen usando un script Wp_query;

<?php
 $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
 $post_per_page = 15; // (-1 muestra todas las publicaciones) ESTABLECE EL NÚMERO DE IMÁGENES A MOSTRAR!
 $do_not_show_stickies = 1; // 0 para mostrar sticky posts
 $args=array(
'post_type' => array ('post'),
'orderby' => 'rand',
'order' => 'ASC',
'paged' => $paged,
'posts_per_page' => $post_per_page
);
$pf_categorynotin = get_post_meta($wp_query->post->ID, true);
if($pf_categorynotin){
    $args['tax_query'] = array(
        array(
            'taxonomy' => 'category',
            'field' => 'slug',
            'terms' => $pf_categorynotin,
            'operator' => 'NOT IN'
        )
    ); //category__in
}
$temp = $wp_query;  // asigna la query original a variable temporal para uso posterior
$wp_query = null;
$wp_query = new WP_Query($args);

if( have_posts() ) :
    echo '<ul id="applications" class="applications pf_item3">';
    $r = 0;
    while ($wp_query->have_posts()) : $wp_query->the_post();
        $post_cat = array();
        $post_cat = wp_get_object_terms($post->ID, "category");
        $post_cats = array();
        $post_rel = "";
        for($h=0;$h<count($post_cat);$h++){
                $post_rel .= $post_cat[$h]->slug.' ';
                $post_cats[] = $post_cat[$h]->name;
            }
    $r++;
    echo'<li data-id="id-'. $r .'" data-type="'.$post_rel.'" >';
    if (get_post_meta($post->ID, 'port_thumb_image_url', true)) { ?>
<a  class="tozoom" href="<?php echo get_post_meta($post->ID, 'port_large_image_url', true); ?>" rel="example4" title="<?php echo $post->post_title; ?>">
<img src="<?php echo get_post_meta($post->ID, 'port_thumb_image_url', true); ?>" class="portfolio_box" alt="<?php the_title(); ?>" width="199px" height="134px" /></a>
    <?php } ?>
        </li>
    <?php endwhile ?>
         </ul>

y los elementos se ordenan por sus etiquetas html5 con un menú en la barra lateral.

Puedes verlo funcionando aquí; http://marbledesigns.net/marbledesigns/products

Actualmente carga aleatoriamente 15 publicaciones y las muestra. Quiero poder recargar las publicaciones basándome en mi selección del menú (mediante categorías) y luego actualizar la lista de imágenes sin refrescar la página. Quiero poder cambiar no solo qué publicaciones de qué categoría se muestran, sino también el número de publicaciones por página.

Creo que AJAX es la forma de hacer esto, pero no quiero deshacer un montón de código en el menú para que funcione. Actualmente el menú son botones de radio estilizados. ¿No hay alguna manera de tomar la misma entrada de ese formulario y actualizar los parámetros del loop?

¡Busco una solución eficiente! ¡Por favor ayuda!

frankV

195

wp query jquery ajax

Todas las respuestas a la pregunta

Comentarios

Además, otra cosa que ralentiza la página mucho más que las 15 imágenes son los 22 archivos JS y 5 CSS... Cuando lances el sitio, considera usar W3TC para combinarlos y minificarlos.

Velvet Blues

2 ene 2012 15:42:58

¡Lo estoy haciendo! ;), actualmente está desactivado porque el almacenamiento en caché hace que la depuración de JS sea una pesadilla. ¡Muchas gracias!!!

frankV

2 ene 2012 17:55:32

Velvet Blues 1.78K · Accepted Answer · 2012-01-02T15:13:20Z

Sí, AJAX es el camino a seguir.

Básicamente, puedes escribir tu propia función de callback para el hook de AJAX de WordPress en el archivo functions.php de tu tema. Y luego tu función puede devolver datos en cualquier formato que elijas. Generalmente devuelvo JSON. Te guiaré para configurarlo.

Primero, como parece que tus visitantes no iniciarán sesión, usarás el siguiente hook con tu función de callback.

add_action('wp_ajax_nopriv_get_images', 'get_images_callback');

get_images es la acción $_POST que usarás para tu formulario/método jQuery ajax.

A continuación, configuras tu ajax que manejará la solicitud y devolverá las imágenes solicitadas. WordPress ya tiene un script que maneja AJAX. Se llama admin-ajax.php, en el ejemplo siguiente hacemos un post a él.

jQuery(document).ready(function($) {
    var params = {
        action: 'get_images',
        category: 5,
        limit: 20
    };
    jQuery.post(<?php echo admin_url('admin-ajax.php'); ?>, params, function(response) {
        // ¡haz tu magia!
    });
});

(Nota: Hay una mejor manera de declarar la URL de admin que usar una sentencia PHP echo, pero solo te doy un ejemplo rápido y sencillo para que puedas configurar esto por tu cuenta).

Finalmente, escribe la función de callback para la que agregaste la acción. Devolveremos JSON, pero también puedes optar por devolver datos sin codificar.

function get_images_callback(){
    $category = $_POST('category'); //obtiene la categoría solicitada
    $limit = $_POST('limit'); //obtiene el límite solicitado

    // tu WP Query recupera los posts/imágenes apropiados y almacena datos en $images
    // también podrías devolver el número de imágenes en $num
    // y quizás devolverás otros datos en $data

    header('Content-type: application/json');
    print json_encode(array('images' => $images, 'number' => $num, 'data' => $data));
    die();
}

Y ahí lo tienes. En tu función jQuery, asegúrate de manejar los datos devueltos apropiadamente. Para obtener los datos, solo los referenciarías así: response.images, response.num, o response.data. Si images se devuelve como un array, tendrás que iterar sobre él para acceder a los datos, como harías con cualquier otro array. Ej:

jQuery.each(response.images,function(key,val){
    // haz cosas con los valores
});

(Por cierto, incluso con solo 15 imágenes, esa es una página que carga MUY lento. ¿Por qué no cargar las miniaturas reales y luego llamar a la imagen más grande cuando el usuario la seleccione? ...revisa los tamaños de tus miniaturas...)