Utilizzare Ajax per categorie e loop di WordPress

Question

Utilizzare Ajax per categorie e loop di WordPress

8 dic 2011, 08:53:45

Visualizzazioni: 30.2K

Voti: 3

Voglio che il mio index.php sia una semplice pagina con un elenco orizzontale di nomi di categorie nella parte superiore. Invece di far ricaricare la pagina con l'elenco dei post in quel loop ogni volta che si fa clic su una categoria, vorrei che l'insieme dei post di ogni categoria venga visualizzato istantaneamente dopo ogni clic su una categoria diversa. È possibile farlo in WordPress?

LND

31

ajax

Tutte le risposte alla domanda

Commenti

dove va l'ultimo pezzo di codice? Al momento funziona senza di esso e carica la pagina della categoria, ma voglio aggiungere l'ultimo pezzo di codice perché avrò bisogno che mostri anche i post. Grazie

User

21 dic 2011 14:05:00

So che questa è una vecchia domanda, ma ha l'incredibile quantità di 9k visualizzazioni e viene citata come in questa domanda. Potresti volerla aggiornare :)

kaiser

11 nov 2014 00:03:00

Manca un echo in var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';

Sherbrow

14 dic 2014 16:14:44

So che questo è un post molto vecchio... ma come possiamo farlo con i post personalizzati e le tassonomie personalizzate? D:

artist learning to code

30 gen 2019 03:55:22

Chris_O 20.6K · Answer 1 · 2011-12-11T06:08:48Z

Sì, questo è possibile con WordPress ma non userei index.php bensì un template personalizzato front-page.php, poi creerei una pagina chiamata home e la imposterei come pagina principale in opzioni-generali.

Per il tuo menu delle categorie:

<?php
$categories = get_categories(); ?>

<ul id="category-menu">
    <?php foreach ( $categories as $cat ) { ?>
    <li id="cat-<?php echo $cat->term_id; ?>"><a class="<?php echo $cat->slug; ?> ajax" onclick="cat_ajax_get('<?php echo $cat->term_id; ?>');" href="#"><?php echo $cat->name; ?></a></li>

    <?php } ?>
</ul>

Dove chiamiamo la nostra funzione jQuery ajax quando una categoria viene cliccata e passiamo l'ID della categoria a jQuery nel nome della funzione.

Il segnaposto HTML dove verranno caricati i post via ajax:

<div id="loading-animation" style="display: none;"><img src="<?php echo admin_url ( 'images/loading-publish.gif' ); ?>" alt="Animazione di caricamento" title="Caricamento in corso"/></div>
<div id="category-post-content"></div>

La funzione jQuery chiamata tramite l'handler onclick negli elementi del menu:

<script>
function cat_ajax_get(catID) {
    jQuery("a.ajax").removeClass("current");
    jQuery("a.ajax").addClass("current"); //aggiunge la classe current all'elemento del menu della categoria visualizzata per poterlo stilare con css
    jQuery("#loading-animation").show();
    var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); //deve essere echo ?>';
    jQuery.ajax({
        type: 'POST',
        url: ajaxurl,
        data: {"action": "load-filter", cat: catID },
        success: function(response) {
            jQuery("#category-post-content").html(response);
            jQuery("#loading-animation").hide();
            return false;
        }
    });
}
</script>

La funzione PHP di WordPress per restituire i post della categoria selezionata.

add_action( 'wp_ajax_nopriv_load-filter', 'prefix_load_cat_posts' );
add_action( 'wp_ajax_load-filter', 'prefix_load_cat_posts' );
function prefix_load_cat_posts () {
    $cat_id = $_POST[ 'cat' ];
         $args = array (
        'cat' => $cat_id,
        'posts_per_page' => 10,
        'order' => 'DESC'

    );

    $posts = get_posts( $args );

    ob_start ();

    foreach ( $posts as $post ) {
    setup_postdata( $post ); ?>

    <div id="post-<?php echo $post->ID; ?> <?php post_class(); ?>">
        <h1 class="posttitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>

        <div id="post-content">
        <?php the_excerpt(); ?>
        </div>

   </div>

   <?php } wp_reset_postdata();

   $response = ob_get_contents();
   ob_end_clean();

   echo $response;
   die(1);
   }

Stiamo utilizzando l'output buffering che aiuta a prevenire il fallimento della funzione che a volte può accadere con WordPress Ajax.