Actualizare Loop cu Formular

Question

Actualizare Loop cu Formular

2 ian. 2012, 01:07:25

Vizualizări: 1.05K

Voturi: 2

Am o galerie foto pe care o dezvolt folosind WordPress ca sistem de management al conținutului. Mă bazez în mare măsură pe câteva plugin-uri jQuery pentru gestionarea interfeței și manipularea (prin sortare). Problema mea este că sunt prea multe postări! 737, iar fiecare are o miniatură afișată pe pagină. Acest lucru încetinește orice browser. Mai ales că plugin-ul de sortare "clonează" imaginile când le sortează. Postările sunt construite folosind un script WP_Query:

<?php
 $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
 $post_per_page = 15; // (-1 afișează toate postările) SETEAZĂ NUMĂRUL DE IMAGINI DE AFIȘAT!
 $do_not_show_stickies = 1; // 0 pentru a afișa postările lipicioase
 $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;  // atribuie query-ul original variabilei temp pentru utilizare ulterioară
$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>

iar elementele sunt sortate după tag-urile lor HTML5 cu un meniu în bara laterală.

Puteți vedea cum funcționează aici: http://marbledesigns.net/marbledesigns/products

Momentual încarcă aleatoriu 15 postări și le afișează. Vreau să pot reîncărca postările în funcție de selecția mea din meniu (prin categorii) și apoi să actualizez lista de imagini fără a reîmprospăta pagina. Vreau să pot schimba nu doar care postări din care categorie sunt afișate, dar și numărul de postări pe pagină.

Cred că AJAX este soluția, dar nu vreau să modific o grămadă de cod în meniu pentru a-l face să funcționeze. Acum meniul este format din butoane radio. Nu există o metodă prin care să pot folosi aceleași date din formular pentru a actualiza parametrii loop-ului?

Caut o soluție eficientă! Vă rog ajutați-mă!

frankV

195

wp query jquery ajax

Toate răspunsurile la întrebare

Comentarii

De asemenea, un alt lucru care încetinește pagina mult mai mult decât cele 15 imagini sunt cele 22 de fișiere JS și 5 CSS... Când lansezi site-ul, ia în considerare utilizarea W3TC pentru a le combina și minifica.

Velvet Blues

2 ian. 2012 15:42:58

Sunt ;), momentan este dezactivat deoarece caching-ul face depanarea JS un coșmar! Mersi mult!!!

frankV

2 ian. 2012 17:55:32

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

Da, AJAX este soluția.

În esență, poți scrie propria ta funcție de callback pentru hook-ul AJAX al WordPress în fișierul functions.php al temei tale. Și apoi funcția ta poate returna date în orice format alegi. Eu de obicei returnez JSON. O să te ghidez prin procesul de configurare.

Mai întâi, deoarece se pare că vizitatorii tăi nu se vor loga, vei folosi următorul hook cu funcția ta de callback.

add_action('wp_ajax_nopriv_get_images', 'get_images_callback');

get_images este acțiunea $_POST pe care o vei folosi pentru formularul/metoda ta jQuery ajax.

Apoi, configurezi AJAX-ul care va gestiona cererea și va returna imaginile solicitate. WordPress are deja un script care gestionează AJAX. Se numește admin-ajax.php, noi trimitem o cerere post către el în exemplul de mai jos.

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) {
        // fă magia ta!
    });
});

(Notă: Există o metodă mai bună de a declara URL-ul admin decât folosirea unei instrucțiuni PHP echo, dar îți ofer un exemplu rapid și simplu pentru a-l putea configura singur.)

În final, scrie funcția de callback pentru care ai adăugat acțiunea. Vom returna JSON, dar poți opta și să returnezi date simple necodate.

function get_images_callback(){
    $category = $_POST('category'); // obține categoria solicitată
    $limit = $_POST('limit'); // obține limita solicitată

    // interogarea WP preia postările/ imaginile corespunzătoare și stochează datele în $images
    // ai putea returna și numărul de imagini în $num
    // și poate vei returna alte date în $data

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

Și asta e tot. În funcția ta jQuery, asigură-te că gestionezi datele returnate corespunzător. Pentru a obține datele, le vei referența astfel: response.images, response.num, sau response.data. Dacă images este returnat ca un array, va trebui să-l parcurgi pentru a obține datele, ca și cu orice alt array. ex.

jQuery.each(response.images,function(key,val){
    // lucrează cu valorile
});

(Apropo, chiar și cu doar 15 imagini, aceea este o pagină care se încarcă FOARTE încet. De ce nu încarci thumbnail-urile reale și apoi apelezi imaginea mai mare când o selectează utilizatorul? ...verifică dimensiunile thumbnail-urilor...)