Aggiornare il Loop con un Form

Question

Aggiornare il Loop con un Form

2 gen 2012, 01:07:25

Visualizzazioni: 1.05K

Voti: 2

Sto sviluppando una galleria fotografica utilizzando WordPress come sistema di gestione dei contenuti. Mi affido pesantemente ad alcuni plugin jQuery per gestire lo stile dell'interfaccia utente e la manipolazione (tramite ordinamento). Il mio problema è che ci sono troppi post! 737, e ognuno ha una miniatura che viene visualizzata sulla pagina. Questo inevitabilmente rallenta qualsiasi browser. Soprattutto perché il plugin di ordinamento "clona" le immagini quando le ordina. I post sono costruiti utilizzando uno script Wp_query;

<?php
 $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
 $post_per_page = 15; // (-1 mostra tutti i post) IMPOSTA IL NUMERO DI IMMAGINI DA VISUALIZZARE!
 $do_not_show_stickies = 1; // 0 per mostrare i post in evidenza
 $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;  // assegna la query originale a una variabile temporanea per uso successivo
$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>

e gli elementi sono ordinati tramite i loro tag html5 con un menu nella sidebar.

Puoi vederlo funzionare qui; http://marbledesigns.net/marbledesigns/products

Attualmente carica casualmente 15 post e li visualizza. Vorrei poter ricaricare i post in base alla mia selezione dal menu (tramite categorie) e poi aggiornare la lista delle immagini senza ricaricare la pagina. Vorrei poter cambiare non solo quali post da quale categoria vengono visualizzati, ma anche il numero di post per pagina.

Penso che AJAX sia la strada giusta per farlo, ma non voglio dover modificare un sacco di codice nel menu per farlo funzionare. Attualmente il menu è composto da pulsanti radio stilizzati. Non c'è un modo per prendere lo stesso input da quel form e aggiornare i parametri del loop?

Cerco una soluzione efficiente! Per favore aiutami!

frankV

195

wp query jquery ajax

Tutte le risposte alla domanda

Commenti

Inoltre, un'altra cosa che rallenta la pagina molto più delle 15 immagini sono i 22 file JS e 5 CSS... Quando lanci il sito, considera di usare W3TC per combinarli e minimizzarli.

Velvet Blues

2 gen 2012 15:42:58

Ci sto lavorando ;), al momento è disabilitato perché la cache rende il debug del js un incubo! Grazie mille!!!

frankV

2 gen 2012 17:55:32

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

Sì, AJAX è la strada da percorrere.

Fondamentalmente, puoi scrivere la tua funzione di callback per l'hook AJAX di WP nel file functions.php del tuo tema. La tua funzione può poi restituire i dati in qualsiasi formato tu scelga. Io generalmente restituisco JSON. Ti guiderò attraverso la configurazione.

Innanzitutto, dato che sembra che i tuoi visitatori non effettueranno il login, userai il seguente hook con la tua funzione di callback.

add_action('wp_ajax_nopriv_get_images', 'get_images_callback');

get_images è l'azione $_POST che utilizzerai per il tuo form/metodo AJAX di jQuery.

Successivamente, configuri il tuo AJAX che gestirà la richiesta e restituirà le immagini richieste. WordPress ha già uno script che gestisce AJAX. Si chiama admin-ajax.php, nel seguente esempio facciamo un post verso di esso.

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) {
        // fai la tua magia!
    });
});

(Nota: C'è un modo migliore per dichiarare l'URL admin rispetto all'uso di un'istruzione PHP echo, ma ti sto solo dando un esempio rapido e sporco per permetterti di configurare questo da solo.)

Infine, scrivi la funzione di callback che hai aggiunto all'azione. Restituiremo JSON, ma puoi anche optare per restituire dati semplici non codificati.

function get_images_callback(){
    $category = $_POST('category'); //ottieni la categoria richiesta
    $limit = $_POST('limit'); //ottieni il limite richiesto

    // la tua WP Query recupera i post/immagini appropriati e memorizza i dati in $images
    // potresti anche restituire il numero di immagini in $num
    // e forse restituire altri dati in $data

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

Ed ecco fatto. Nella tua funzione jQuery, assicurati di gestire i dati restituiti in modo appropriato. Per ottenere i dati, li referenzieresti così: response.images, response.num, o response.data. Se images è restituito come un array, dovrai iterare su di esso per accedere ai dati, come faresti con qualsiasi altro array. Esempio:

jQuery.each(response.images,function(key,val){
    // fai operazioni con i valori
});

(A proposito, anche con solo 15 immagini, quella è una pagina che carica MOLTO lentamente. Perché non caricare le miniature effettive e poi chiamare l'immagine più grande quando l'utente la seleziona? ...controlla le dimensioni delle tue miniature...)