WordPress- und Isotopenfilterung

Ich versuche, Isotope ( http://isotope.metafizzy.co/ ) zu verwenden, um meine WordPress Posts zu filtern, http://img.daswordpress.com/categories/404.gif so sieht meine Site aus, ich möchte Posts filtern abhängig von einer Post-Kategorie, also muss ich jedem Post einen classnnamen hinzufügen und ihn dann mit Isotopen filtern

  • show all
  • design
  • typography
  • Das sind die Namen meiner Kategorien, und dann möchte ich den classnnamen eines Beitrags hinzufügen, abhängig von der Kategorie, in der er sich befindet.

     
    'rand' ); $random = new WP_Query($args); ?> have_posts()) : $random->the_post(); ?> <a href="https://wordpress.stackexchange.com/questions/44963/wordpress-and-isotope-filtering/"> <div id="img" class="cat_name; ?>">

    und Javascript verwende ich

       jQuery(window).load(function(){ jQuery('#main').isotope({ masonry: { columnWidth: 20 }, }); $('#filters a').click(function(event){ var selector = $(this).attr('data-filter'); $('#main').isotope({ filter: selector }); return false; }); });  

    Solutions Collecting From Web of "WordPress- und Isotopenfilterung"

    Ich bin mir nicht sicher, ob Isotope und Filter funktionieren?

    Es gibt 2 Dinge, die du vermisst hast

    1. Die Filter müssen wie folgt in eine class eingebunden werden (so dass die jquery durch den Klick auf die a-Links bearbeitet werden kann):

        

    Beachten Sie, dass der Datenfilter CaSe-sensitiv ist (damit sie nicht funktionieren, wenn sie nicht mit Ihren WordPress-Kategorien oder was auch immer Sie verwenden) übereinstimmen.

    1. Die Isotop-Jquery muss für WordPress gesichert werden – um im Kein-Konflikt-Modus zu laufen

    Hier ist der Originalcode aus der Isotope-Dokumentation

     // filter items when filter link is clicked $('#filters a').click(function(){ var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector }); return false; }); 

    Hier ist der Code für WordPress geändert

     // filter items when filter link is clicked jQuery('#options a').click(function(){ var selector = jQuery(this).attr('data-filter'); mycontainer.isotope({ filter: selector }); return false; }); 

    NB: Fügen Sie das nach dem Rest Ihres Isotopenskriptes ein und beachten Sie, dass #options die class aus Ihrer Filterliste im HTML ist 🙂

    Sie können es bei damien.co/isotope arbeiten sehen

    Hoffnung, die dir geholfen hat?

    Vielleicht möchten Sie diese function verwenden:

    Platziere das in deiner functions.php

     function isotope_categories() { $categories = get_categories(); $html = ''; echo $html; } 

    und dann rufe diese function in der Datei auf, in der sich dein Isotopencontainer befindet.

    Mögen:

      

    Es wird das korrekte Markup für das Isotop ausgegeben

    Wenn Sie also neue Posts im Backend von WordPress erstellen und Kategorien mit ihnen verknüpfen, werden sie angezeigt und können gefiltert werden

    Erstens, wickeln Sie Ihre Post-Ausgabe in ein

    und fügen Sie die < ?php post_class(); ?> < ?php post_class(); ?> Template-Tag zu diesem

    .

    Also, ändere das:

      
    < ?php the_post_thumbnail();?>

    < ?php the_title(); ?>

    …. zu diesem:

      

    Wenn Sie jetzt den post_class() Codex-Eintrag (oben verlinkt) lesen, sehen Sie, dass dieses Schablonentag neben anderen classn eine class der category-{slug} anwendet. (Für Ihre Beispielkategorien würde post_class() category-design oder category-typo hinzufügen.

    Sie sollten also nur auf die category-{slug} zielen, um den Isotopenfilter zu implementieren.

    Ich habe auch versucht, das jQuery Isotope Plugin mit WP zu integrieren, als ich auf dieses Thema stieß. Wenn Sie noch Hilfe brauchen, ist hier, wie es funktioniert. Meine Methode war etwas anders, da ich einen benutzerdefinierten Post-Typ von Projekten erstellt habe, den ich nach der provents_categories filtern wollte, die eine benutzerdefinierte Taxonomie ist.

    Die Seitenvorlage benötigt den folgenden PHP-Code für die Liste # projects-filter und das zu generierende # projects div.

     < ?php $terms = get_terms('project_categories'); $count = count($terms); if ( $count > 0 ){ echo '
      '; echo '
    • All
    • '; foreach ( $terms as $term ) { $termname = strtolower($term->name); $termname = str_replace(' ', '-', $termname); echo '
    • ' . $term->name . '
    • '; } echo '
    '; } ?> < ?php $loop = new WP_Query(array('post_type' => 'projects', 'posts_per_page' => -1)); $count =0; ?>
    < ?php if ( $loop ) : while ( $loop->have_posts() ) : $loop->the_post(); ?> < ?php $terms = get_the_terms( $post->ID, 'project_categories' ); if ( $terms && ! is_wp_error( $terms ) ) : $links = array(); foreach ( $terms as $term ) { $links[] = $term->name; } $links = str_replace(' ', '-', $links); $tax = join( " ", $links ); else : $tax = ''; endif; ?> < ?php $infos = get_post_custom_values('wpcf-proj_url'); ?> < ?php endwhile; else: ?>
    Sorry, no portfolio entries for while.
    < ?php endif; ?>

    Und hier ist das Javascript, das die Magie funktioniert.

     jQuery(document).ready(function(){ var mycontainer = jQuery('#projects'); mycontainer.isotope({ filter: '*', animationOptions: { duration: 750, easing: 'liniar', queue: false, } }); jQuery('#projects-filter a').click(function(){ var selector = jQuery(this).attr('data-filter'); mycontainer.isotope({ filter: selector, animationOptions: { duration: 750, easing: 'liniar', queue: false, } }); return false; }); }); 

    Fügen Sie die Animation hinzuEgnine: ‘jquery’ – und die Animation wird weicher.

     var mycontainer = jQuery('#projects'); mycontainer.isotope({ filter: '*', animationEngine: 'jquery', animationOptions: { duration: 350, easing: 'linear', queue: true } }); jQuery('#projects-filter a').click(function(){ var selector = jQuery(this).attr('data-filter'); mycontainer.isotope({ filter: selector, animationOptions: { duration: 350, easing: 'linear', queue: true, } }); return false; });