Heroic Knowledge Base mit WooCommerce integrieren

Erstellen Sie Ihre eigene Wissensdatenbank auf Ihrer WordPress-Website ist mit dem Heroic Knowledge Base Plugin einfach.

Im letzten Artikel Heroic Knowledge Base – Das Templating-System verwenden habe ich behandelt, wie das Plugin nahtlos in das neu veröffentlichte TwentySixteen-Theme integriert wird, und einige Theme-Entwicklungstechniken mit dem Templating-System des Plugins gezeigt, um Ihnen noch mehr Kontrolle zu geben.

Aber was, wenn Sie das Knowledge Base Plugin in Verbindung mit anderen Plugins verwenden möchten?

In diesem Artikel zeige ich Ihnen, wie Sie das Heroic Knowledge Base Plugin mit dem Templating-System von WooCommerce und dem Advanced Custom Fields Plugin in WooCommerce integrieren 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

Okay, ich höre Sie fragen: „Warum sollte ich das jemals tun wollen?“

Nehmen wir an, Sie hätten einen Online-Shop, der Soundsysteme verkauft, der auf WordPress aufgebaut ist und WooCommerce für die E­Commerce-Lösung verwendet. Es ist denkbar, dass jedes Produkt viele technische Spezifikationen hätte und Sie wahrscheinlich ziemlich viele Fragen zu jedem Artikel erhalten würden. Zum Beispiel: Womit ist der Artikel kompatibel? Funktionieren WLAN-fähige Lautsprecher anderer Marken damit? Wie laut sind 5 Watt? usw.

Wäre es nicht schön, für jedes Produkt einen Wissensdatenbank-Bereich einrichten zu können, der all diese Fragen beantwortet und diesen Bereich auf der eigentlichen Produktseite anzeigt, anstatt an einer anderen Stelle der Website?

Erste Schritte

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

Da ich dieselbe Website verwende, an der Sie bereits gearbeitet haben, gehe ich auch davon aus, dass Sie bereits eine WordPress-Installation mit einem aktiven Child-Theme (TwentySixteen als Parent-Theme) haben, das Knowledge Base-Plugin installiert, aktiviert und mit Inhalten gefüllt ist. Daher müssen Sie jetzt nur noch die Plugins WooCommerce und Advanced Custom Fields installieren. Beide sind kostenlos nutzbar, und obwohl sie Premium-Add-ons haben, benötigen Sie keines davon für diese Übung.

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

Erstellen des benutzerdefinierten Feldes

Der erste Schritt ist die Erstellung der Admin-Oberfläche, die es Ihnen ermöglicht, eine Kategorie von Wissensdatenbank-Artikeln aus einer automatisch aufgefüllten Liste auszuwählen und sie mit einem bestimmten Produkt zu verknüpfen. Dies würden Sie mit dem Taxonomy-Feld im Advanced Custom Fields Plugin von Elliot Condon tun.

Es ist wichtig zu beachten, dass das Knowledge Base-Plugin einen benutzerdefinierten Post-Typ für seine Artikel verwendet und daher, obwohl die zur Sortierung dieser Beiträge verwendete Taxonomie als Kategorien bezeichnet wird, tatsächlich eine benutzerdefinierte Taxonomie und nicht dieselben Kategorien sind, die zur Sortierung von Standardbeiträgen verwendet werden. Wenn Sie mehr über Taxonomien erfahren möchten, lesen Sie hier im Codex nach: Codex – Taxonomien

Um unser Taxonomiefeld zu erstellen, gehen Sie zu Benutzerdefinierte Felder am unteren Rand des Hauptmenüs und erstellen Sie dann eine neue Feldgruppe. Ich nannte diese Feldgruppe 'Produktoptionen', damit ich weiß, dass alles, was 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 zu erhalten. Geben Sie dem Feld eine Bezeichnung (diese wird auf dem Bildschirm zum Hinzufügen/Bearbeiten von Produkten angezeigt, stellen Sie also sicher, dass sie beschreibend ist). Ich nannte dies 'Relevante Wissensdatenbankkategorie auswählen'.

Sobald die Bezeichnung hinzugefügt wurde, wird das Feldnamensfeld automatisch hinzugefügt. Da meine Feldbezeichnung ziemlich lang ist und der Feldname tatsächlich in Ihren Vorlagen verwendet wird, habe ich ihn zu 'kb_category' gekürzt (Sie werden später sehen, warum dies nützlich ist).

Wählen Sie für den Feldtyp Taxonomie unter der Überschrift 'Relational' aus.

Sobald Taxonomie ausgewählt wurde, erhalten Sie eine neue Reihe von Optionen, die spezifisch für dieses Feld sind. Wählen Sie im Taxonomie-Auswahlfeld 'ht_kb_category'. Dies ist die benutzerdefinierte Taxonomie, die zur Kategorisierung der Wissensdatenbankartikel verwendet wird.

Ändern Sie als Nächstes die Anzeigeoptionen zu 'Einzelwertauswahl'. Dies dient dazu, dass pro Produkt nur eine Kategorie ausgewählt werden kann, und lassen Sie dann alle anderen Optionen auf ihren Standardwerten.

Der letzte Schritt hier ist, die Feldgruppe so einzustellen, dass sie nur auf Produktseiten angezeigt wird. Dazu befindet sich unter unseren Feldoptionen eine weitere Box mit der Bezeichnung 'Ort'. Stellen Sie diese so ein, dass sie nur angezeigt wird, wenn der Beitragstyp gleich 'Produkt' ist. Dies stellt sicher, dass unsere neuen Optionen nur auf dem Bildschirm zum Hinzufügen/Bearbeiten von Produkten angezeigt werden.

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

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

Ansatz 1 – Modifizieren der WooCommerce-Vorlagendateien

Das Schöne am Wissensdatenbank-Vorlagensystem ist, dass es auf eine sehr ähnliche Weise wie das WooCommerce-Vorlagensystem funktioniert. Das bedeutet, dass dieser Teil vertraut erscheinen *sollte*.

Um Modifikationen 'upgrade-sicher' 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 exakt zu kopieren, aber das Unterverzeichnis /templates/ zu entfernen. Weitere Informationen zum Überschreiben von WooCommerce-Vorlagen finden Sie unter: https://woocommerce.com/document/template-structure/

In dieser Übung müssen Sie nur eine Datei 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 relevante Wissensdatenbank-Kategorie anzuzeigen. Der erste Schritt ist, den Inhalt unseres neuen benutzerdefinierten Feldes abzurufen. Dies können Sie ganz einfach tun, indem Sie Folgendes hinzufügen:

$kb_category = get_field('kb_category');

Testen Sie dies, indem Sie $kb_category ausgeben und ein Produkt anzeigen, das eine zugeordnete Wissensdatenbank-Kategorie hat. Da das Taxonomiefeld so eingestellt war, dass es die ID und nicht das gesamte Objekt speichert (dies war eine Standardeinstellung), sollten Sie nun die ID der ausgewählten Wissensdatenbank-Kategorie auf der Seite sehen.

Jetzt haben Sie die ID der ausgewählten Kategorie, die Sie verwenden müssen, um eine benutzerdefinierte Abfrage zu erstellen. Diese Abfrage befindet sich tatsächlich innerhalb der Hauptschleife, daher muss es sich um eine verschachtelte Abfrage handeln, damit Sie die Hauptschleife überhaupt nicht beeinträchtigen. Weitere Informationen zur 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;

Lassen Sie uns das aufschlüsseln...

Zuerst prüfen Sie, ob eine Wissensdatenbankkategorie festgelegt wurde. 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 ) ) );

Hier werden die Informationen über die Kategorien, die tatsächlich eine benutzerdefinierte Taxonomie sind, wichtig. Da die Wissensdatenbank eine benutzerdefinierte Taxonomie anstelle von Standardkategorien verwendet, müssen die Abfrageargumente tax_query anstelle des gebräuchlicheren Parameters 'cat' verwenden, um die Kategorie auszuwählen. Innerhalb des tax_query-Arrays müssen Sie dann die benutzerdefinierte Taxonomie angeben, die Sie abfragen möchten, welches Feld (in diesem Fall möchten Sie die ID finden, da dies das ist, was gespeichert wurde) und den tatsächlichen Wert, mit dem es übereinstimmen soll. Weitere Informationen zu Taxonomieparametern finden Sie unter: https://developer.wordpress.org/reference/classes/wp_query/#Taxonomy_Parameters

Erstellen Sie als Nächstes ein neues Query-Objekt, damit es in die bereits laufende Hauptschleife verschachtelt 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 ist das Zurücksetzen dieser Abfrage mit wp_reset_postdata();

Die neue Abfrage gibt alle Artikel aus, die sich in der angegebenen Kategorie befinden, unterhalb der Produktinformationen. In diesem Beispiel habe ich im Bearbeitungsbildschirm für Produkte die Kategorie Heroic Knowledge Base Plugin ausgewählt, die einen Beitrag enthielt. Daher wird unter den Hauptproduktinformationen ein Beitrag aufgeführt.

Diese Liste von Artikeln könnte überall auf der Seite angezeigt werden. Es hängt nur davon ab, wo in content-­single-­product.php Sie Ihren Code platziert haben.

Aber was, wenn wir diese Informationen als neuen Tab zusammen mit der Produktbeschreibung und den Bewertungen einfügen möchten?

Ansatz 2 – Keine Änderung von WooCommerce-Vorlagendateien

Ansatz 1 ist in Ordnung, wenn Sie nur verstehen möchten, wie verschachtelte Schleifen mit benutzerdefinierten Beiträgen, benutzerdefinierten Taxonomien und benutzerdefinierten Feldern funktionieren, aber er fühlt sich etwas unordentlich an. Anstatt also content-single-product.php in Ihr Child-Theme zu kopieren und die verschachtelte Schleife in diese Datei einzufügen, können Sie die functions.php in Ihrem Child-Theme ändern. Dieser Ansatz verwendet einen Filter, in den Sie neue Inhalte einhängen können. Wenn Sie sich über Hooks und Filter unsicher sind, empfehle ich Ihnen, den Artikel von Thomas Mier auf Smashing Mag: Nützliche Tipps für den Einstieg in Hooks zu lesen. WooCommerce hat auch einen guten Abschnitt über die Verwendung von Hooks und Filtern: https://woo.com/document/hooks/

Der erste Schritt ist, den Filter hinzuzufügen, um die Produkt-Tabs zu Ihrer functions.php hinzuzufügen.

add_filter( 'woocommerce_product_tabs', 'woo_knowledge_base_tab' );

‘woocommerce_product_tabs’ ist der Name des bestehenden Filters, der bereits von WooCommerce erstellt wurde und in den wir unsere neue Funktion einhängen werden. Und ‘woo_knowledge_base_tab’ ist der Name der Funktion, die Sie erstellen werden. Weitere Informationen zum Hinzufügen von Filtern finden Sie hier im Codex: https://codex.wordpress.org/Function_Reference/add_filter Als Nächstes müssen Sie die Funktion erstellen, die den neuen Tab 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 lediglich einen neuen benutzerdefinierten Tab Ihrer Wahl zum $tabs-Array hinzu und definiert den Titel, die Priorität dieses Tabs und den Inhalt, der in diesem Tab enthalten sein wird. Sie werden feststellen, dass ich der Funktion zwar den Namen ‘woo_knowledge_base_tab’ gegeben habe, dem Tab aber tatsächlich den Titel FAQs gegeben habe. Sie könnten diesen beliebig nennen. FAQs ist eine persönliche Präferenz, denn wie ich am Anfang dieses Artikels beschrieben habe, wäre ein wahrscheinliches Szenario für die Verwendung des Knowledge Base Plugins mit WooCommerce, häufig gestellte Fragen für jedes Produkt in einem Online-Elektrofachgeschäft anzubieten.

Der letzte Schritt ist, den Inhalt selbst zum neu erstellten Tab hinzuzufügen. Dies tun Sie, indem Sie eine zweite Funktion erstellen, die Sie bereits im Callback-Parameter Ihrer woo_knowledge_base_tab()-Funktion aufgeführt haben.

function woo_knowledge_base_tab_content() {}

Und dann schneiden und fügen Sie einfach den Code ein, den Sie ursprünglich in content-­single-­product.php hinzugefügt haben (denken Sie daran, ihn vollständig aus content-­single-­product.php zu entfernen). Das Ergebnis sollte wie folgt aussehen:

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

Jetzt sollten Sie einen neuen Tab mit der Bezeichnung FAQs sehen und wenn Sie auf diesen Tab klicken, sollten Sie Ihre Wissensdatenbankartikel sehen.

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

hkb_post_format_class($post­->ID);

innerhalb der Funktion funktioniert.

Das Letzte, was zu tun ist, ist, es ein wenig zu gestalten...

Das Knowledge Base Plugin hat bereits eigene Styles. Anstatt also bei Null anzufangen, können Sie die ul in ein div mit der Klasse .hkb­category einpacken und dieses div dann in ein weiteres mit der ID #hkb einpacken. Die bereits vorhandenen Styles werden dann angewendet.

Das Einzige, was ich hier noch gemacht habe, war, einen h2-Wrapper über der Liste hinzuzufügen, damit die Seite eine Überschrift hat. Der fertige Inhaltsblock sollte so 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>

Weiterführend…

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

Wenn Sie dieses Beispiel noch weiter ausbauen würden, könnten Sie diese benutzerdefinierte Abfrage in einen anderen Filter einhängen, sodass sie als Teil der Produktinformationen angezeigt wird, ohne Vorlagen zu ändern. Oder Sie könnten eine schöne Show/Hide-Funktion für den Inhalt jedes Artikels erstellen, damit Sie jede FAQ lesen können, ohne von der Produktseite weggeleitet zu werden.

Es ist auch eine gute Praxis, wenn Sie Themes entwickeln und das Advanced Custom Fields Plugin verwenden, den PHP-Code für alle von Ihnen eingerichteten Felder zu exportieren und ihn in Ihre Funktionen-Datei aufzunehmen, damit Ihr Theme mit oder ohne das Plugin selbst funktionieren kann.

Die Möglichkeiten sind endlos. Viel Spaß!