Accentsconagua
Share
In diesem Anfänger-Tutorial werde ich Ihnen den richtigen Weg zeigen, um WooCommerce-Kompatibilität zu Ihrem WordPress-Theme hinzuzufügen. Sie erfahren auch, wie Sie es unauffällig erweitern können, ohne die Kerndateien des Plugins zu bearbeiten. Wir werden diese logischen Schritte behandeln:
Stellen wir uns vor, wir entwickeln ein WordPress-Theme. Wir möchten einige der hervorragenden Funktionen von WooCommerce nutzen und einige dieser Funktionen anpassen. Es gibt zwei Möglichkeiten, WooCommerce zu erweitern, ohne die Plugin-Kerndateien zu bearbeiten:
woocommerce_content () Funktion innerhalb unseres ThemasIch finde, dass eine Kombination dieser Optionen am besten funktioniert, um zuverlässige Ergebnisse zu erzielen. Lassen Sie uns also zunächst die WooCommerce-Unterstützung in der Datei „functions.php“ unseres Themas erklären und die standardmäßige Formatierung von WooCommerce deaktivieren. Wir werden WooCommerce mit unserem eigenen Design gestalten.
add_action ('after_setup_theme', 'woocommerce_support'); function woocommerce_support () add_theme_support ('woocommerce'); Dadurch wird die Meldung "Ihr Design zeigt keine WooCommerce-Unterstützung nicht an" ausgeblendet.
Um das Standard-Styling von WooCommerce zu deaktivieren, fügen Sie Folgendes hinzu:
if (class_exists ('Woocommerce')) add_filter ('woocommerce_enqueue_styles', '__return_empty_array'); Mit dem class_exists () Funktion prüfen wir, ob das WooCommerce-Plugin installiert und aktiv ist. Sobald es ist Wenn Sie diese Option aktivieren, wird der Standardstil deaktiviert. Später in diesem Tutorial fügen wir einige Aktionen und Hook-Konfigurationen hinzu ob Aussage.
Für den Moment duplizieren Sie die "page.php" -Datei des Themas und nennen Sie sie "woocommerce.php". Diese Datei sollte wie folgt lokalisiert werden: wp-content / themes / YOURTHEME / woocommerce.php.
Öffnen Sie Ihre neu erstellte Datei in einem Texteditor oder dem Code-Editor Ihrer Wahl. Als Nächstes müssen Sie die Schleife finden, die normalerweise mit:
und endet normalerweise mit:
Dies variiert zwischen den Themen. Wenn Sie die Schleife gefunden haben, löschen Sie sie. An seine Stelle setzen:
Unsere woocommerce.php-Vorlage verwendet jetzt stattdessen die Schleife von WooCommerce.
woocommerce_content ()Lädt die Produktliste auf der Shop-Hauptseite, die Produktkategorieseiten, die Produktsuchseite und den einzelnen Produktinhalt, wenn die einzelne Produktseite angezeigt wird.
Da woocommerce.php jetzt Teil Ihres Designs ist, können Sie es zusammen mit Ihren anderen Dateien anpassen. Zum Beispiel füge ich immer den Seitentitelabschnitt und Breadcrumbs hinzu, da meine regulären Seiten normalerweise solche Dinge enthalten. Keines dieser Dinge beeinflusst die woocommerce_content (). In dieser Phase können Sie auch andere Elemente hinzufügen, indem Sie bedingte Tags von WooCommerce und WordPress verwenden.
Fügen wir beispielsweise die Einzelprodukt-Paginierungsfunktion wie folgt hinzu:
// Hier geht Ihre Navigationsfunktion.
Die vollständige Liste der WooCommerce-Aktionen, Hooks und Filter finden Sie in der WooCommerce-Dokumentation.
Wenn Sie mit WordPress-Aktionen, Hooks und Filtern noch nicht vertraut sind, empfehle ich dringend, diese Ressourcen auszuprobieren:
Um die Position der Haken besser zu verstehen, empfehle ich, die Business Hooker Visual Hook-Serie zu lesen.
Für ein etwas komplexeres, aber noch tieferes Verständnis der Funktionsweise der WooCommerce-Logik empfehle ich Ihnen, die Plugin-Core-Dateien zu untersuchen (woocommerce> Vorlagen)..
Schauen wir uns beispielsweise an, was wir auf der Shopseite tun können. Um das Layout der Shopseite mit Haken zu ändern, haben Sie zwei Möglichkeiten:
Welche Methode besser ist, hängt von Ihrer Aufgabe ab. Stellen Sie sich zum Beispiel vor, Sie möchten die Produktbestelloption von Ihrer Shopseite entfernen:
remove_action ('woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30);Dies ist alles, was Sie zu Ihrer Datei "functions.php" im Ordner hinzufügen müssen wenn Klasse existiert Aussage. WooCommerce weiß jetzt, dass Sie diese Funktionalität nicht benötigen.
Stellen Sie sich vor, wir möchten anstelle der Produktbestellung ein Such-Widget hinzufügen. Fügen Sie nach der Aktion zum Entfernen diesen Code hinzu:
add_action ('woocommerce_before_shop_loop', 'custom_woocommerce_product_search', 30); Funktion custom_woocommerce_product_search () the_widget ('WC_Widget_Product_Search', ",");Stellen Sie sich außerdem vor, Sie möchten die Bewertung von Produkten auf der Shopseite entfernen. Fügen Sie den folgenden Code in Ihre Datei "functions.php" ein:
remove_action ('woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5);Sie haben festgestellt, dass für jede Aktion als letzter Parameter eine Zahl verwendet wird. Mit dieser Priorität wird die Reihenfolge festgelegt, in der die einer bestimmten Aktion zugeordneten Funktionen ausgeführt werden. Geringere Zahlen führen zu einer früheren Ausführung, und Funktionen mit derselben Priorität werden in der Reihenfolge ausgeführt, in der sie der Aktion hinzugefügt wurden.
Dies ist sehr wichtig in Situationen, in denen mehrere Funktionen auf den gleichen Aktionshaken angewendet werden. Beispielsweise möchte ich Produktdetails (Titel, Bewertung, Preis, Schaltfläche "In den Warenkorb legen") mit einem div umschließen.
Zuerst fügen wir das div-Tag des Opening-Wrappers hinzu:
add_action ('woocommerce_shop_loop_item_title', 'custom_woocommerce_loop_product_content_wrapper_start'), 2); Funktion custom_woocommerce_loop_product_content_wrapper_start '() ?>Dann fügen wir ein schließendes Tag hinzu:
add_action ('woocommerce_after_shop_loop_item', 'custom_woocommerce_loop_product_content_wrapper_end', 50); Funktion custom_woocommerce_loop_product_content_wrapper_end '() ?>Das Spielen mit der Action-Hook-Priorität kann unsere Arbeit erheblich erleichtern.
Dasselbe Prinzip gilt für eine einzelne Produktseite. Und hier sollten Sie sehr vorsichtig sein, da Änderungen, die Sie mit Action-Hooks für Produkte auf der Loop- / Archiv- / Shop-Seite vornehmen, für die einzelne Produktseite ignoriert werden. Hier sollten Sie das Layout eines einzelnen Produkts separat ändern, das Hauptprinzip ist jedoch dasselbe.
Wenn Sie wissen, wie Sie mit WooCommerce-Aktionen arbeiten, wird Ihr Thema auf die nächste Stufe erweitert. Hier einige Beispiele, was ich in meinen Designs mache, wenn es um die Kompatibilität mit WooCommerce geht:
Wenn Sie Ihr Design mit WooCommerce-Erweiterungen ergänzen möchten, ist das Prinzip fast das gleiche. Unterstützen Sie immer hochwertige offizielle Erweiterungen, da sie Integrationsrichtlinien und ein Support-Team haben. Zum Beispiel erweitere ich den Shop meines Themas mit diesen beiden Plugins:
Da es sich um WooCommerce-Erweiterungen handelt, müssen Sie zunächst sicherstellen, dass WooCommerce installiert und aktiv ist, sodass alle Hooks, Aktionen oder Filter innerhalb der von Ihnen verwendeten Erweiterung in der if (class_exists ()) Aussage, die wir am Anfang geschrieben haben. Natürlich sollten Sie auch sicherstellen, dass Ihre Erweiterungen ebenfalls installiert und aktiv sind, indem Sie die Klasse, Funktion oder den Konstantennamen des Plugins überprüfen. Als Beispiel aus meinem Theme-Code:
if (class_exists ('Woocommerce')) if (class_exists ('YITH_WCQV')) remove_action ('yith_wcqv_product_image', 'woocommerce_show_product_sale_flash', 10); remove_action ('yith_wcqv_product_image', 'woocommerce_show_product_images', 20); add_action ('yith_wcqv_product_image', 'infinitum_ninzio_woocommerce_show_product_images', 20); Funktion infinitum_ninzio_woocommerce_show_product_images () ?>… Um herauszufinden, welche Klasse, Funktion oder Konstante geprüft werden soll, überprüfen Sie die Hauptdatei.php der Erweiterung.
Fazit
WooCommerce ist ein fantastisches E-Commerce-Plugin, und um es ganz offen zu sagen: Jedes neue Premium-Thema sollte es unterstützen. Folgen Sie immer den Integrationsanleitungen von WooCommerce. Dadurch wird sichergestellt, dass Ihr Design den Überprüfungsprozess durchläuft und die Struktur und Logik von WooCommerce nicht beschädigt wird.
Nach jeder Entwicklungsarbeit dieser Art sollten Sie sowohl WordPress als auch WooCommerce testen. Aktivieren Sie WordPress WP_DEBUG, und testen Sie Ihr Design mit dem WordPress Theme Unitest und dem Dummy-Inhaltstest von WooCommerce.
Nützliche Ressourcen
