Folosirea Ajax pentru categorii și bucle WordPress

Question

Folosirea Ajax pentru categorii și bucle WordPress

8 dec. 2011, 08:53:45

Vizualizări: 30.2K

Voturi: 3

Doresc ca fișierul meu index.php să fie o pagină simplă cu o listă orizontală de nume de categorii în partea de sus. În loc ca pagina să se reîncarce cu lista de articole din acea buclă de fiecare dată când se face click pe o categorie, vreau ca setul de articole din fiecare categorie să se afișeze instantaneu după fiecare click pe o categorie diferită. Este posibil acest lucru în WordPress?

LND

31

ajax

Toate răspunsurile la întrebare

Comentarii

unde se adaugă ultimul fragment de cod? În acest moment funcționează fără el și încarcă pagina de categorie, dar vreau să adaug ultimul fragment de cod, deoarece va fi necesar pentru a afișa și postările. Mulțumesc

User

21 dec. 2011 14:05:00

Știu că aceasta este o întrebare veche, dar are un număr incredibil de 9k vizualizări și este menționată ca în această întrebare. Poate doriți să actualizați asta :)

kaiser

11 nov. 2014 00:03:00

Lipsește un echo în var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';

Sherbrow

14 dec. 2014 16:14:44

Știu că acesta este un articol foarte vechi... dar cum putem face asta cu postări personalizate și taxonomii personalizate? D:

artist learning to code

30 ian. 2019 03:55:22

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

Da, acest lucru este posibil în WordPress, dar eu nu aș folosi index.php, ci un șablon personalizat front-page.php, apoi aș crea o pagină numită Acasă și aș seta-o ca pagină principală în setările generale.

Pentru meniul de categorii:

<?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>

Aici apelăm funcția jQuery Ajax atunci când o categorie este selectată și transmitem ID-ul categoriei către jQuery prin numele funcției.

Div-ul placeholder în care articolele se vor încărca prin Ajax:

<div id="loading-animation" style="display: none;"><img src="<?php echo admin_url ( 'images/loading-publish.gif' ); ?>" alt="Animație încărcare" title="Se încarcă..."/></div>
<div id="category-post-content"></div>

Funcția jQuery apelată prin handler-ul onclick din elementele meniului:

<script>
function cat_ajax_get(catID) {
    jQuery("a.ajax").removeClass("current");
    jQuery("a.ajax").addClass("current"); //adaugă clasa current elementului de meniu afișat pentru a-l stiliza cu CSS
    jQuery("#loading-animation").show();
    var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); //trebuie să-l afișăm ?>';
    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>

Funcția PHP WordPress care returnează articolele din categoria selectată:

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);
   }

Folosim output buffering, care ajută la prevenirea erorilor care pot apărea uneori cu Ajax în WordPress.