Ultimativer Leitfaden zum Filtern von WordPress-Posts und -Seiten

Veröffentlicht: 2017-07-13

Wenn Sie schon einmal bei Amazon eingekauft haben, wissen Sie wahrscheinlich bereits die Leistungsfähigkeit von Filtern zu schätzen, mit denen Sie eine große Menge an Inhalten aufschlüsseln und genau das finden können, wonach Sie suchen. Wenn Sie bei Amazon nach einem Produkt suchen, gibt es immer eine Seitenleiste voller Filter, die Ihnen helfen, Ihre Suche zu verfeinern und nur die Ergebnisse zurückzugeben, die Ihren wichtigsten Anforderungen entsprechen. Filter wie Kundenbewertung, Marke, ob das Produkt für Männer oder Frauen ist, Zustand (neu/gebraucht) und vieles mehr.

Angesichts der Tatsache, wie nützlich Inhaltsfilter sind, sollte es wahrscheinlich nicht überraschen, dass die Möglichkeit, sie für Ihre WordPress-Inhalte zu erstellen, direkt in WordPress Core integriert ist. Und mit ein wenig Know-how können Sie Ihre Website-Besucher mit dieser Leistung versorgen, sodass sie Ihre Inhalte schneller als je zuvor navigieren können.

In diesem Beitrag werden wir Sie durch den Prozess der Erstellung von Inhaltsfilteroptionen für Ihre Benutzer mit einem Plugin führen.

Lass uns anfangen!

Warum WordPress Post- und Seitenfilterung?

WordPress ist unglaublich flexibel. Der Kern ermöglicht Ihnen die vollständige Kontrolle über alles auf Ihrer Website. Das Filtern von Beiträgen und Seiten ist eine der leistungsstärksten Funktionen von WordPress. Es gibt mehrere integrierte Funktionen für Beiträge, Seiten und benutzerdefinierten Inhalt. Darüber hinaus gibt es viele Möglichkeiten, in der Datenbank gespeicherte Elemente auszuwählen, zu gruppieren und zu filtern. Sie können sortierbare Listen mit Suchergebnissen nach Seitenvorlage, Beitragstypen, Taxonomiebegriffen, Vorlagenhierarchie, Produktseiten oder allem anderen erstellen, was Sie möchten.

WordPress verfügt standardmäßig über eine integrierte Suchfunktion. Diese Suchfunktion lässt jedoch zu wünschen übrig und hilft nicht weiter, wenn Ihre Leser die Ergebnisse gezielt filtern möchten. Hier kommt die Hilfe eines Drittanbieter-Plugins ins Spiel.

Was macht das Such- und Filter-Plugin?

Das Search & Filter-Plugin ist ein einfach zu bedienendes Plugin, das das standardmäßige WordPress-Suchfeld auf die nächste Ebene bringt. Es ermöglicht Ihren Besuchern, nach einem bestimmten Begriff zu suchen und die Ergebnisse basierend auf Kategorien, Tags, benutzerdefinierten Beitragstypen, benutzerdefinierten Taxonomien, Datumsbereich oder sogar einer Kombination von allen für eine verfeinerte Suche und genauere Ergebnisse zu filtern.

Die Verwendung des Plugins ist kinderleicht. Nachdem Sie das Plugin installiert und aktiviert haben, werden Sie auf die Einstellungsseite mit einer detaillierten Erklärung zur Verwendung weitergeleitet. Kurz gesagt, Sie können einen Shortcode überall in Ihren Beiträgen, Seiten oder allen Widget-Seitenleisten verwenden. Alternativ können Sie, wenn Sie mutig sind und nichts dagegen haben, sich mit ein wenig Code die Hände schmutzig zu machen, eine einzelne Codezeile in Ihre Designdatei einfügen.

Schauen wir uns einige Beispiele an.

So filtern Sie Beiträge mit Suche & Filter

Die grundlegendste Verwendung des Plugins ist der Shortcode, mit dem Besucher alle Ihre Kategorien und Tags durchsuchen können. Der Standard-Shortcode sieht so aus:

[searchandfilter fields="search,category,post_tag"] 

Sie können es in jeden Beitrag, jede Seite oder ein Text-Widget einfügen und es werden die Filteroptionen mit Such-, Kategorie- und Tag-Feldern im Frontend angezeigt:

Wenn Sie Besuchern die Auswahl mehrerer Kategorien oder eines Tags ermöglichen möchten, können Sie dies ganz einfach tun, indem Sie den Shortcode so ändern, dass er Kontrollkästchen anstelle eines Dropdown-Menüs enthält und jedes Feld beschriftet:

[searchandfilter headings="Select categories:" types="checkbox" fields="category"]

Die obigen Beispiele zeigen, wie das Plugin in der Seitenleiste verwendet wird. Sie können es jedoch auch innerhalb Ihrer Designdatei verwenden, um es auf einer beliebigen Seite anzuzeigen. Im folgenden Beispiel wird das Formular auf der Blog-Seite angezeigt. Sie müssen lediglich die folgende Codezeile einfügen:

<?php echo do_shortcode('[searchandfilter fields="search,category,post_tag"]'); ?>

In unserem Fall haben wir es der Hauptindexvorlage des Themas Twenty Seventeen hinzugefügt.

So filtern Sie benutzerdefinierte Taxonomien

Die obigen Beispiele zeigen eine sehr grundlegende Verwendung des Plugins. Das Search & Filter-Plugin akzeptiert jedoch auch andere Parameter. Sie können einen Shortcode verwenden, der es Ihren Besuchern ermöglicht, die Suchergebnisse nur nach benutzerdefinierten Taxonomien zu filtern.

Angenommen, Sie haben mit WooCommerce einen Shop auf Ihrer Website. Wenn Sie Produktkategorien in die Suchergebnisse aufnehmen möchten, müssen Sie nur den folgenden Shortcode hinzufügen:

[searchandfilter taxonomies="search,category,post_tag,product_cat" headings=",Categories,Tags,Product Categories"]

In diesem Beispiel habe ich auch Überschriften vor jedem Feld hinzugefügt, damit Besucher leichter zwischen den Feldern unterscheiden können:

Wenn Sie dies auf einer Seite in Ihrem Theme anzeigen möchten, müssen Sie nur die folgende Codezeile in die entsprechende Seitenvorlage unter Darstellung > Themes > Editor einfügen:

<?php echo do_shortcode('[searchandfilter taxonomies="search,category,post_tag,product_cat" headings=",Categories,Tags,Product Categories"]'); ?>

So filtern Sie Beiträge nach Datumsbereich

Ein weiterer Anwendungsfall ist, wenn Sie Ihren Besuchern die Suche nach Beiträgen in einer bestimmten Kategorie innerhalb eines bestimmten Zeitraums ermöglichen möchten. Fügen Sie in diesem Fall einfach die folgende Codezeile in Ihre archive.php ein :

<?php echo do_shortcode('[searchandfilter fields="search,post_date" types=",daterange" headings=",Post Date"]'); ?>

Wie filtere ich Postformate und Seiten?

Sehen wir uns im letzten Beispiel das Filtern von Postformaten und Seiten an. Wenn Sie Video- oder Audiobeiträge veröffentlichen, können Besucher mit diesem Shortcode nur Beiträge finden, die zu dem von Ihnen angegebenen Beitragsformat gehören:

[searchandfilter fields="search,post_format" types=",select" headings=",Post Format" submit_label="Filter"]

Wenn Sie möchten, dass Besucher Seiten oder Beiträge filtern, benötigen Sie lediglich einen Shortcode, der Beitragstypen als Parameter akzeptiert:

[searchandfilter fields="search,post_types" post_types="post,page" headings=",Post Types"]

Abgesehen von den obigen Beispielen können Sie mit dem Plugin noch spezifischer werden, indem Sie Parameter zum Ordnen der Ergebnisse in hierarchischer Reihenfolge hinzufügen, die Anzahl der Beiträge in bestimmten Kategorien anzeigen, Klassen hinzufügen, Autoren filtern und vieles mehr.

So filtern Sie Beiträge manuell

Wie bei allem, was mit WordPress zu tun hat, gibt es eine Möglichkeit, dies ohne die Verwendung eines Plugins zu tun. Angenommen, Sie möchten ein einfaches Formular erstellen, mit dem Besucher Beiträge aus einer bestimmten Kategorie filtern können.
Zuerst müssen Sie ein einfaches Formular erstellen:

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
    <?php
        if( $terms = get_terms( 'category', 'orderby=name' ) ) : 
            echo '<select name="categoryfilter"><option>Select category...</option>';
            foreach ( $terms as $term ) :
                echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; 
            endforeach;
            echo '</select>';
        endif;
    ?>
    <label>
        <input type="radio" name="date" value="ASC" /> Date: Ascending
    </label>
    <label>
        <input type="radio" name="date" value="DESC" selected="selected" /> Date: Descending
    </label>
    <button>Apply filters</button>
    <input type="hidden" name="action" value="customfilter">
</form>
<div id="response"></div>

Im obigen Formular lässt der erste Teil den Benutzer einfach die Taxonomien mithilfe der Funktion get_terms auswählen. Sie können dies für Standardkategorien und -tags sowie benutzerdefinierte Taxonomien verwenden. Im nächsten Teil werden die Optionsfelder hinzugefügt, mit denen Besucher die Ergebnisse in aufsteigender oder absteigender Reihenfolge anzeigen können. Der letzte Teil ist schließlich die Schaltfläche für das Formular, mit der sie die ausgewählten Filter anwenden können.

Das gesamte Formular wurde der Vorlage sidebar.php unter Darstellung > Designs > Editor hinzugefügt.

Der nächste Schritt besteht darin, die jQuery zu verwenden, damit Ergebnisse angezeigt werden können, ohne die Seite neu laden zu müssen:

jQuery(function($){
    $('#filter').submit(function(){
        var filter = $('#filter');
        $.ajax({
            url:filter.attr('action'),
            data:filter.serialize(), // form data
            type:filter.attr('method'), // POST
            beforeSend:function(xhr){
                filter.find('button').text('Applying Filters...');          },
            success:function(data){
                filter.find('button').text('Apply filters');                $('#response').html(data); 
            }
        });
        return false;
    });
});

Der letzte Code besteht darin, der Datei function.php eine Funktion hinzuzufügen, die das Ergebnis basierend auf den ausgewählten Filtern verarbeitet. Es durchsucht die ausgewählte Kategorie und zeigt, solange Beiträge vorhanden sind, nach dem Datum, an dem sie veröffentlicht wurden, in aufsteigender oder absteigender Reihenfolge an. Wenn in der Kategorie keine Beiträge gefunden werden, wird die Meldung Keine Beiträge gefunden angezeigt:

 
function my_filters(){
    $args = array(
        'orderby' => 'date', 
        'order' => $_POST['date'] 
    );
 
        if( isset( $_POST['categoryfilter'] ) )
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'category',
                'field' => 'id',
                'terms' => $_POST['categoryfilter']
            )
        );
  
    $query = new WP_Query( $args );
 
    if( $query->have_posts() ) :
        while( $query->have_posts() ): $query->the_post();
            echo '<h2>' . $query->post->post_title . '</h2>';
        endwhile;
        wp_reset_postdata();
    else :
        echo 'No posts found';
    endif;
 
    die();
}
 
 
add_action('wp_ajax_customfilter', 'my_filters'); 
add_action('wp_ajax_nopriv_customfilter', 'my_filters');

Das Endergebnis zeigt das Frontend wie folgt an:

Warum Sie Ihre Leser Beiträge und Seiten in WordPress filtern lassen sollten

Mit den oben genannten Methoden können Benutzer Ihre Beiträge filtern. Aber warum willst du das tun?

WordPress ermöglicht es Ihnen bereits, Ihre Beiträge mit Kategorien und Tags zu organisieren, aber es ermöglicht Benutzern nur, jeweils eine einzelne Kategorie oder ein einzelnes Tag anzuzeigen. Wenn Sie benutzerdefinierte Beitragstypen verwenden, die ihre eigenen Kategorien verwenden, werden diese Kategorien außerdem nicht zusammen mit denen für normale Beiträge angezeigt.

Das Search & Filter-Plugin ist nicht nur besonders nützlich, wenn Sie viele verschiedene Kategorien und Tags mit Inhalten des Jahres haben, sondern auch, wenn Sie benutzerdefinierte Beitragstypen wie Portfolio, Galerie, Testimonial und mehr hinzugefügt haben.

Ein weiteres Beispiel ist, dass Ihre Besucher dieses Plugin ganz einfach verwenden können, um Ihre Produkte zu filtern und zu finden, wonach sie suchen. Und wenn Sie mit dem Code vertraut sind, können Sie durch manuelles Ausführen noch mehr Kontrolle darüber haben, wie die Suchergebnisse angezeigt und welche Parameter verwendet werden.

Einpacken

Stellen Sie sicher, dass Ihre Website benutzerfreundlich ist, indem Sie Ihren Besuchern ermöglichen, die gewünschten Inhalte schnell zu finden, um ihnen eine angenehme Benutzererfahrung zu bieten und sie zu ermutigen, wiederzukommen. Wenn Ihre Website reich an Inhalten ist, sollten Sie in Erwägung ziehen, Seiten- und Beitragsfilter zu implementieren, um sicherzustellen, dass sie die Inhalte erhalten, von denen sie mehr sehen möchten.

Wir würden uns freuen, Ihre Erfahrungen mit der WordPress-Suche und -Filterung zu hören. Lass es uns in den Kommentaren unten wissen.

Miniaturansicht des Artikels von graphicglobe / shutterstock.com