Dynamisches laden von benutzerdefinierten Beiträge nach Kategorie mit AJAX

Arbeite ich auf dieser Seite:

http://www.bajo.co.uk/2012/

...das zeigt eine Spielzeug-portfolio auf der Startseite. Die Spielzeuge haben unterschiedliche Kategorien: Kinder -, Fahrzeuge -, Bildungs-etc. Wenn der Benutzer auf das sidebar-Menü, 'Infant', thumbnails für alle Spielzeuge mit der Kategorie 'Baby' wird auf der rechten Seite aufgeführt.

Momentan habe ich dies einrichten, indem Sie mit verschiedenen Seiten-template für jede Kategorie mit dem folgenden benutzerdefinierten loop:

<!-- loop to show products list -->
<?php
    $args = array(
    'post_type' => 'products',
    'orderby' => 'title',
    'order' => 'DES',
    'posts_per_page' => 8,
    'paged' => get_query_var ('page'),
    'post_parent' => $parent,
    'category_name' => 'educational'
    ); 
?>

<?php query_posts($args); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<li>
    <a href="<?php the_permalink() ?>" class="product_image">
        <?php echo get_post_meta($post->ID, 'ProductImage', true);?>
        <span class="overlay"></span>
    </a>
    <h3 class="product_tit"><a href="<?php the_permalink() ?>"><?php the_title();?></a></h3>                                
</li>   

<?php endwhile; ?>

<?php else :?>

<p>There are no products to display</p>

<?php endif; ?>

Obwohl dies korrekt funktioniert, jedes mal, wenn der Benutzer wählt eine Kategorie aus dem Menü, wird die Seite aktualisiert wird.

Ich würde gerne dies zu realisieren ist mit AJAX, sodass die Seite nicht aktualisiert und die Produkte (die eine benutzerdefinierte post-Typ) geladen werden dynamisch unter Beibehaltung der Paginierung.

Irgendwelche Hinweise, wo zu Beginn sehr geschätzt.

Ich bin mit:

  • WordPress 3.5.1
  • Custom Post Type UI plugin
  • Fragen Sie, was wäre der Ansatz mit AJax und vielleicht bist du es, oder einen gemeinsamen Weg, es zu tun out of the box mit wordpress? Ich kann Ihnen helfen, mit 1, aber nicht mit 2.
  • Ich habe einige Erfahrung mit AJAX, aber bin auf der Suche nach Orientierung, wie die AJAX-code interagieren würde mit WP zu ziehen, die Beiträge nach Kategorie. Gerade auf der Suche nach Hinweise auf die Ansatz - nicht jemand meine Hausaufgaben für mich.
InformationsquelleAutor nfrost21 | 2013-03-07
  1. 0

    Ich immer noch nicht das Recht haben, zu äußern, also habe ich meinen Kommentar hier als Antwort, vielleicht wird es hilfreich sein.

    Mein Ansatz für eine solche situation ist das erstellen einer php-Datei file.php die ich-Adresse über einen parametrer wie diese Datei.php?p=Säugling (fo z.B.)

    <?php

$p=$_GET['p']; 

require('../../../wp-load.php');

?>

                            <?php

                            $my_query = new WP_Query();
                            $my_query->query(array( 'post__in' => array($p)));




                            if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); 

                               ?>
    <li>
    <a href="<?php the_permalink() ?>" class="product_image">
        <?php echo get_post_meta($post->ID, 'ProductImage', true);?>
        <span class="overlay"></span>
    </a>
    <h3 class="product_tit"><a href="<?php the_permalink() ?>"><?php the_title();?></a></h3>                                
</li>  
                                <?php
                            endwhile;
                            endif;


?>

    Erstelle ich zusätzlich eine javascript-Funktion, die das verwalten der ajax-Aufruf wie dieser:

    function f(str)
{

$.ajax({  
cache: true,  
   type: "GET",  
   timeout: 5000,   
   url: 'url/to/file.php?p='+str,  
   success: function(msg)  
    {  

                $('#the_div_containing_li').html(msg);

    },  
    error: function(msg)  
    {  

       alert("Your browser broke!");
            return false;
    }  
});


}

    Beachten Sie, dass Sie sollten Ihrem li (und die dynamisch geladenen Inhalt in ein div , die ich rief the_div_containing_li). und onClick auf den Anker ein, rufen Sie die javascript-Funktion f(id dieser Anker). natürlich können Sie ordnen Sie jeder Anker eine id über die wordpress-loop.

    InformationsquelleAutor Adib Aroui
Schreibe einen Kommentar