Integration der Heroic Knowledge Base in WooCommerce

Das Erstellen einer eigenen Wissensdatenbank auf Ihrer WordPress-Website ist mit dem Heroic Knowledge Base Plugin ganz einfach.

Im letzten Artikel Heroic Knowledge Base - Using the templating system (Heroic Wissensdatenbank - Verwendung des Templating-Systems) habe ich beschrieben, wie das Plugin nahtlos in das neu veröffentlichte TwentySixteen-Theme integriert werden kann, und außerdem einige Techniken zur Entwicklung von Themes gezeigt, die das Templating-System des Plugins verwenden, um Ihnen noch mehr Kontrolle zu geben.

Was aber, wenn Sie das Wissensdatenbank-Plugin in Verbindung mit anderen Plugins verwenden möchten?

In diesem Artikel zeige ich Ihnen, wie Sie das Heroic Knowledge Base Plugin in WooCommerce integrieren können, indem Sie das Templating-System von WooCommerce und das Advanced Custom Fields Plugin verwenden, und wie Sie dies tun können, ohne Vorlagen zu ändern.

Am Ende dieses Artikels sollten Sie in der Lage sein, eine Kategorie von Knowledge Base-Artikeln zuzuweisen und diese Kategorie auf jeder Produktseite anzuzeigen.

Das Szenario

Ok, ich höre Sie fragen: "Warum sollte ich das jemals tun wollen?"

Nehmen wir an, Sie hätten einen Online-Shop für Soundsysteme, der auf WordPress aufbaut und WooCommerce als eCommerce-Lösung verwendet. Es ist denkbar, dass jedes Produkt eine Menge technischer Spezifikationen hat, und Sie würden wahrscheinlich eine Menge Fragen zu jedem Artikel erhalten. Zum Beispiel: Womit ist der Artikel kompatibel? Funktionieren Wi-Fi-fähige Lautsprecher anderer Marken mit ihm? Wie laut ist der 5-Watt-Lautsprecher? usw.

Wäre es nicht schön, für jedes Produkt einen Abschnitt in der Wissensdatenbank einzurichten, der all diese Fragen beantwortet, und diesen Abschnitt auf der eigentlichen Produktseite anzuzeigen, anstatt in einem anderen Teil der Website?

Erste Schritte

Ähnlich wie im vorigen Artikel gehe ich davon aus, dass Sie wissen, wie man Plugins installiert, über gute Kenntnisse in der Theme-Entwicklung und ein grundlegendes Verständnis von PHP verfügen.

Da Sie dieselbe Website verwenden, an der Sie zuvor gearbeitet haben, kann ich auch davon ausgehen, dass Sie bereits eine WordPress-Installation mit einem aktiven Child-Theme (TwentySixteen ist das Parent-Theme) und dem installierten, aktivierten und befüllten Knowledge Base-Plugin haben. Alles, was Sie jetzt noch tun müssen, ist die Installation der Plugins WooCommerce und Advanced Custom Fields. Beide sind kostenlos, und obwohl sie Premium-Addons haben, brauchen Sie keines davon für diese Übung.

Hinweis: Wenn Sie Ihr eigenes Theme verwenden, sind nicht alle Themes sofort mit WooCommerce kompatibel. Techniken, um die Kompatibilität Ihres Themes sicherzustellen, finden Sie in der WooThemes-Dokumentation.

Erstellen des benutzerdefinierten Feldes

Der erste Schritt besteht darin, eine Verwaltungsschnittstelle zu erstellen, die es Ihnen ermöglicht, eine Kategorie von Wissensdatenbankartikeln aus einer automatisch befüllten Liste auszuwählen und sie mit einem bestimmten Produkt zu verknüpfen. Dazu verwenden Sie das Feld "Taxonomy" im Plugin "Advanced Custom Fields" von Elliot Condon.

Es ist wichtig zu beachten, dass das Wissensdatenbank-Plugin einen benutzerdefinierten Beitragstyp für seine Artikel verwendet und daher, obwohl die Taxonomie, die verwendet wird, um diese Beiträge zu ordnen, als Kategorien bezeichnet wird, ist es tatsächlich eine benutzerdefinierte Taxonomie und nicht die gleichen Kategorien, die verwendet werden, um Standardbeiträge zu ordnen. Wenn Sie mehr über Taxonomien wissen wollen, lesen Sie den Codex hier: Kodex - Taxonomien

Um unser Taxonomiefeld zu erstellen, gehen Sie unten im Hauptmenü auf Benutzerdefinierte Felder und erstellen Sie dann eine neue Feldgruppe. Ich habe diese Feldgruppe "Produktoptionen" genannt, damit ich weiß, dass alles, was zu dieser Gruppe hinzugefügt wird, nur für Produkte gilt.

Klicken Sie auf die Schaltfläche "+ Feld hinzufügen", um die Optionen für unser neues benutzerdefiniertes Feld aufzurufen. Geben Sie dem Feld eine Bezeichnung (diese wird auf dem Bildschirm "Produkt hinzufügen/bearbeiten" angezeigt, stellen Sie also sicher, dass sie beschreibend ist). Ich habe es "Relevante Wissensdatenbankkategorie auswählen" genannt.

Sobald die Beschriftung hinzugefügt wurde, wird das Feld für den Feldnamen automatisch hinzugefügt. Da meine Feldbezeichnung recht lang ist und der Feldname tatsächlich in Ihren Vorlagen verwendet wird, habe ich ihn auf "kb_category" gekürzt (warum das nützlich ist, werden Sie etwas später sehen).

Als Feldtyp wählen Sie unter der Überschrift "Relational" die Option "Taxonomie" aus.

Nach der Auswahl von Taxonomy erhalten Sie eine neue Reihe von Optionen, die sich speziell auf dieses Feld beziehen. Im Feld Taxonomie wählen Sie ht_kb_category. Dies ist die benutzerdefinierte Taxonomie, die für die Kategorisierung der Knowledge Base-Artikel verwendet wird.

Als Nächstes ändern Sie die Optionen für das Erscheinungsbild in "Einzelwertauswahl". Dadurch kann nur eine Kategorie pro Produkt ausgewählt werden. Alle anderen Optionen bleiben auf den Standardwerten.

Als Letztes müssen wir die Feldgruppe so einstellen, dass sie nur auf Produktseiten angezeigt wird. Zu diesem Zweck befindet sich unter den Feldoptionen ein weiteres Feld mit der Bezeichnung Standort. Stellen Sie dieses Feld so ein, dass es nur angezeigt wird, wenn der Beitragstyp gleich "Produkt" ist. Dadurch wird sichergestellt, dass unsere neuen Optionen nur auf dem Bildschirm "Produkt hinzufügen/bearbeiten" angezeigt werden.

Klicken Sie oben auf der Seite auf "Aktualisieren", und schon sind wir fertig. Wenn Sie jetzt ein Produkt hinzufügen oder bearbeiten, sollten Sie die neue Option sehen, die wir eingerichtet haben.

Nachdem Sie nun Ihr neues Feld eingerichtet und den Produkten einige Wissensdatenbank-Kategorien zugewiesen haben, müssen Sie Ihr Thema so einrichten, dass die Artikel auf der Produktseite angezeigt werden.

Ansatz 1 Ändern der WooCommerce-Vorlagendateien

Das Schöne am Knowledge Base Templating System ist, dass es sehr ähnlich wie das WooCommerce Templating System funktioniert. Was bedeutet, dass dieser Teil *sollte* vertraut erscheinen.

Um Änderungen auf eine "upgrade-sichere Weise" vorzunehmen, müssen Sie die Vorlagen, die Sie bearbeiten möchten, aus dem WooCommerce-Plugin-Ordner in Ihren Child-Theme-Ordner kopieren.

Hinweis: Achten Sie darauf, die Ordnerstruktur genau zu kopieren, aber entfernen Sie das Unterverzeichnis /templates/. Weitere Informationen zum Überschreiben von WooCommerce-Vorlagen finden Sie unter: https://woocommerce.com/document/template-structure/

In dieser Übung brauchen Sie nur eine Datei zu kopieren, und zwar: content-single-product.php

Sobald Sie diese Datei sicher in Ihr Child-Theme kopiert haben, müssen Sie den Code schreiben, um die entsprechende Kategorie der Wissensdatenbank anzuzeigen. Der erste Schritt besteht darin, den Inhalt unseres neuen benutzerdefinierten Feldes zu erhalten. Sie können dies ganz einfach tun, indem Sie hinzufügen:

$kb_category = get_field('kb_category');

Testen Sie dies, indem Sie $kb_category eingeben und ein Produkt anzeigen, dem eine Wissensdatenbankkategorie zugeordnet ist. Da das Taxonomiefeld so eingestellt wurde, dass die ID und nicht das gesamte Objekt gespeichert wird (dies war eine Standardeinstellung), sollte nun die ID der ausgewählten Knowledge Base-Kategorie auf der Seite angezeigt werden.

Jetzt haben Sie die ID der ausgewählten Kategorie, die Sie zur Erstellung einer benutzerdefinierten Abfrage verwenden müssen. Diese Abfrage befindet sich innerhalb der Hauptschleife und muss daher verschachtelt sein, um die Hauptschleife nicht zu beeinträchtigen. Weitere Informationen über die Schleife finden Sie unter: https://codex.wordpress.org/The_Loop Ihre verschachtelte Schleife wird wie folgt aussehen:

//get the ACF field $kb_category = get_field('kb_category'); //if the field has been populated... if ( $kb_category ) : //create a custom query looking for this term id $kb_args = array( 'post_type' => 'ht_kb', 'tax_query' => array( array( 'taxonomy' => 'ht_kb_category', 'field' => 'term_id', 'terms' => $kb_category ) ) ); $kb_query = new WP_Query( $kb_args ); //if there any posts in the query if ( $kb_query­->have_posts() ) : while ( $kb_query­->have_posts() ) : //setup the post $kb_query­->the_post(); //DO STUFF HERE endwhile; endif; //reset the post data so we don't mess with the main loop wp_reset_postdata(); endif;

Schauen wir uns das mal an...

Zunächst prüfen Sie, ob eine Kategorie der Wissensdatenbank festgelegt wurde, und wenn ja, führen Sie den Code aus.

  if ( $kb_category ) : //create a custom query looking for this term id $kb_args = array( 'post_type' => 'ht_kb', 'tax_query' => array( array( 'taxonomy' => 'ht_kb_category', 'field' => 'term_id', 'terms' => $kb_category ) ) );

An dieser Stelle wird die Information, dass es sich bei den Kategorien um eine benutzerdefinierte Taxonomie handelt, wichtig. Da die Wissensdatenbank eine benutzerdefinierte Taxonomie anstelle von Standardkategorien verwendet, müssen die Abfrageargumente tax_query anstelle des gebräuchlicheren Parameters "cat" zur Auswahl der Kategorie verwenden. Innerhalb des tax_query-Arrays müssen Sie dann die benutzerdefinierte Taxonomie angeben, die Sie abfragen möchten, das Feld (in diesem Fall möchten Sie die ID finden, da diese gespeichert wurde) und den tatsächlichen Wert, mit dem es verglichen werden soll. Weitere Informationen über Taxonomieparameter finden Sie unter: https://developer.wordpress.org/reference/classes/wp_query/#Taxonomy_Parameters

Als Nächstes erstellen Sie ein neues Query-Objekt, das in die bereits laufende Hauptschleife eingefügt werden kann.

//if there any posts in the query if ( $kb_query­->have_posts() ) : while ( $kb_query­->have_posts() ) : //setup the post $kb_query­->the_post(); //DO STUFF HERE endwhile; endif; //reset the post data so we don't mess with the main loop wp_reset_postdata();

Der letzte Schritt besteht darin, diese Abfrage mit wp_reset_postdata() zurückzusetzen.

Die neue Abfrage gibt alle Artikel aus, die sich in der angegebenen Kategorie unterhalb der Produktinformation befinden. In diesem Beispiel habe ich im Produktbearbeitungsbildschirm die Kategorie "Heroic Knowledge Base Plugin" ausgewählt, in der sich ein Beitrag befindet.

Die Liste der Artikel kann an beliebiger Stelle auf der Seite angezeigt werden, es kommt nur darauf an, wo in content-single-product.php Sie Ihren Code platzieren.

Was aber, wenn wir diese Informationen stattdessen als neue Registerkarte zusammen mit der Produktbeschreibung und den Bewertungen einfügen möchten?

Ansatz 2 Keine Änderung der WooCommerce-Vorlagendateien

Ansatz 1 ist in Ordnung, wenn Sie nur wissen wollen, wie verschachtelte Schleifen mit benutzerdefinierten Beiträgen, benutzerdefinierten Taxonomien und benutzerdefinierten Feldern funktionieren, aber es ist ein wenig unübersichtlich. Anstatt content-single-product.php in Ihr Child-Theme zu kopieren und die verschachtelte Schleife in diese Datei einzubinden, können Sie die functions.php in Ihrem Child-Theme ändern. Bei diesem Ansatz wird ein Filter verwendet, in den Sie neue Inhalte einbinden können. Wenn Sie sich über Hooks und Filter nicht sicher sind, empfehle ich Ihnen, den Artikel von Thomas Mier auf Smashing Mag zu lesen : Nützliche Tipps für die ersten Schritte mit Hooks. WooCommerce hat auch einen guten Abschnitt über die Verwendung von Hooks und Filtern zu: https://woo.com/document/hooks/

Der erste Schritt ist das Hinzufügen des Filters zur Änderung der Produkttabs in Ihre functions.php.

add_filter( 'woocommerce_product_tabs', 'woo_knowledge_base_tab' );

woocommerce_product_tabs" ist der Name des bestehenden, bereits von woocommerce erstellten Filters, in den wir unsere neue Funktion einbinden werden. Und "woo_knowledge_base_tab" ist der Name der Funktion, die Sie erstellen werden. Weitere Informationen zum Hinzufügen von Filtern finden Sie im Codex hier: https://codex.wordpress.org/Function_Reference/add_filter Als nächstes müssen Sie die Funktion erstellen, die die neue Registerkarte tatsächlich hinzufügt.

  function woo_knowledge_base_tab( $tabs ) { //Add the new tab for our Knowledge Base Tab $tabs['faqs_tab'] = array( 'title' => __( 'FAQs', 'woocommerce' ), 'priority' => 50, 'callback' => 'woo_knowledge_base_tab_content' ); return $tabs; }

Diese Funktion fügt dem Array $tabs eine neue benutzerdefinierte Registerkarte hinzu und definiert den Titel, die Priorität der Registerkarte und den Inhalt der Registerkarte. Sie werden feststellen, dass ich die Funktion zwar "woo_knowledge_base_tab" genannt habe, aber der Registerkarte den Titel "FAQs" gegeben habe. Sie können die Funktion so nennen, wie Sie wollen. FAQs ist eine persönliche Vorliebe, denn wie ich zu Beginn dieses Artikels beschrieben habe, wäre ein wahrscheinliches Szenario für die Verwendung des Wissensdatenbank-Plugins mit Woocommerce, häufig gestellte Fragen für jedes Produkt in einem Online-Elektrogeschäft zu stellen.

Der letzte Schritt ist das Hinzufügen des Inhalts selbst zu der neu erstellten Registerkarte. Dazu erstellen Sie eine zweite Funktion, die Sie bereits im Callback-Parameter Ihrer Funktion woo_knowledge_base_tab() aufgeführt haben.

function woo_knowledge_base_tab_content() {}

Schneiden Sie dann einfach den Code aus, den Sie ursprünglich in content-single-product.php eingefügt haben, und fügen Sie ihn in diese Funktion ein (vergessen Sie nicht, den Code aus content-single-product.php vollständig zu entfernen). Sie sollten nun Folgendes haben:

function woo_knowledge_base_content() { global $post; //Get the taxonomy field $kb_category = get_field('kb_category'); //if the field has been populated... if ( $kb_category ) : //create a custom query looking for this term id $kb_args = array( 'post_type' => 'ht_kb', 'tax_query' => array( array( 'taxonomy' => 'ht_kb_category', 'field' => 'term_id', 'terms' => $kb_category ) ) ); $kb_query = new WP_Query( $kb_args ); //if there any posts in the query if ( $kb_query­->have_posts() ) : while ( $kb_query­->have_posts() ) : //setup the post $kb_query­->the_post(); ?> <li class="hkb-­article­-list__<?php hkb_post_format_class($post­->ID); ?>"> <a href="<?php echo get_permalink(); ?>" rel="bookmark"> <?php echo get_the_title(); ?> </a> </li> <?php endwhile; endif; //reset the post data so we don't mess with the main loop wp_reset_postdata(); endif; }

Sie sollten nun eine neue Registerkarte mit der Bezeichnung FAQs sehen, und wenn Sie auf diese Registerkarte klicken, sollten Sie Ihre Wissensbasisartikel sehen.

Hinweis: Ich habe hier auch global $post hinzugefügt, damit

hkb_post_format_class($post->ID).

funktioniert innerhalb der Funktion.

Als Letztes müssen wir es noch ein wenig aufpeppen...

Das Wissensdatenbank-Plugin hat bereits seine eigenen Stile, so dass Sie nicht bei Null anfangen müssen. Wenn Sie die ul in ein div mit der Klasse .hkbcategory und dann dieses div in ein anderes mit der id #hkb einpacken, werden die bereits vorhandenen Stile angewendet.

Das Einzige, was ich hier noch gemacht habe, war das Hinzufügen eines h2-Wrappers über der Liste, damit es eine Überschrift auf der Seite gibt. Der fertige Inhaltsblock sollte wie folgt aussehen

<div id="hkb"> <div class="hkb-­category"> <h2> Frequently Asked Questions</h2> <ul class="hkb-­article­-list"> <?php //loop through all of the posts to display the relevent articles while ( $kb_query-­>have_posts() ) : $kb_query-­>the_post(); ?> <li class="hkb-­article­-list__<?php hkb_post_format_class($post­->ID); ?>"> <a href="<?php echo get_permalink(); ?>" rel="bookmark"> <?php echo get_the_title(); ?> </a> </li> <?php endwhile; ?> </ul> <!--­­ end article list ­­--> </div> </div>

Wir gehen noch einen Schritt weiter...

Dies ist wirklich nur der Ausgangspunkt für die Integration des Heroic Knowledge Base Plugins mit WooCommerce.

Wenn Sie dieses Beispiel weiter ausbauen würden, könnten Sie diese benutzerdefinierte Abfrage in einen anderen Filter einbinden, so dass sie als Teil der Produktinformationen angezeigt wird, ohne dass irgendwelche Vorlagen geändert werden müssen. Oder Sie könnten eine nette Ein- und Ausblendfunktion für den Inhalt der einzelnen Artikel erstellen, so dass Sie jede FAQ lesen können, ohne von der Produktseite weggeführt zu werden.

Wenn Sie Themes entwickeln und das Advanced Custom Fields Plugin verwenden, empfiehlt es sich außerdem, den PHP-Code für alle Felder, die Sie eingerichtet haben, zu exportieren und in Ihre Funktionsdatei aufzunehmen, damit Ihr Theme mit oder ohne das Plugin funktionieren kann.

Die Möglichkeiten sind endlos. Viel Spaß!