WooCommerce: Erkundung der Codebasis

WooCommerce ist ein Plugin mit einer großen und komplizierten Codebasis.

Wenn Sie ein Entwickler sind, ist es von großem Vorteil, den zugrunde liegenden Code im Detail zu verstehen, und wird sich auf lange Sicht mit ziemlicher Sicherheit auszahlen.

Wenn Sie ein bisschen PHP schreiben können (der Großteil von Business Bloomer besteht aus PHP-Snippets), müssen Sie auf jeden Fall ab und zu den Kern durchsuchen. Andernfalls reicht Stackoverflow allein nicht aus.

Wenn Sie zufällig die WooCommerce Visual Hook Guides wie die für die Single Product Page gesehen und verwendet haben, werden diese einfach (manuell…) aus dem Code selbst generiert, indem viele PHP-Suchen ausgeführt werden. Ich persönlich bewahre eine Kopie der neuesten Plugin-Dateien in meinen PC-Downloads auf, damit ich sie immer durchsuchen kann, wenn ich nach einem Haken oder einer bestimmten Funktion suche.

Folgen Sie mir also in diesem Artikel, während wir die WooCommerce-Codebasis, ihre Struktur und einige ihrer inneren Geheimnisse erkunden!

Wo finde ich den Code

Um die WooCommerce-Codebasis zu erkunden, haben Sie ein paar Alternativen, außer die Plugin-Dateien von https://wordpress.org/plugins/woocommerce herunterzuladen

Erstens und am zugänglichsten ist das Durchsuchen des Codes online über den WordPress Trac . Dies ist die bequemste Art, durch den Code zu navigieren, da er immer aktuell und sofort verfügbar ist. Sie benötigen lediglich eine Internetverbindung und Zugriff auf einen Browser.

Diese Methode eignet sich hervorragend für schnelle Codesuchen und Lesezeichen für Codedateien, auf die zu einem späteren Zeitpunkt verwiesen werden kann. Sie können sogar eine bestimmte Zeilennummer mit einem Lesezeichen versehen. Um beispielsweise auf die Rendermethode des Checkout-Gutenberg-Blocks (der in Zeile 66 beginnt) zu verlinken, können Sie diese URL verwenden: https://plugins.trac.wordpress.org/browser/woocommerce/trunk/packages/woocommerce-blocks/src /BlockTypes/Checkout.php#L66

Die andere Möglichkeit, den Code anzuzeigen, besteht darin, das offizielle WooCommerce-GitHub-Repository zu klonen . Dies wird empfohlen, wenn Sie den Code lokal über Ihren bevorzugten Editor detaillierter untersuchen müssen, da Sie Zugriff auf leistungsfähigere Suchwerkzeuge haben.

Dazu müssen Sie die Befehlszeile verwenden, um das WooCommerce-Repository herunterzuladen und zu verwalten. Wenn Sie macOS oder ein Linux-Betriebssystem verwenden, können Sie die integrierte Terminal-App verwenden. Git Bash ist eine ausgezeichnete Wahl für Windows-Benutzer.

Unabhängig davon, welche Terminal-App Sie verwenden, öffnen Sie sie und führen Sie den folgenden Befehl aus, um WooCommerce in ein lokales Verzeichnis auf Ihrem Computer zu klonen:

 Git-Klon https://github.com/woocommerce/woocommerce.git

Du kannst es entweder direkt in dein lokales WordPress-Plugin-Verzeichnis klonen (befindet sich in /wp-content/plugins/) oder stattdessen WooCommerce in einen allgemeinen Ordner auf deinem Computer klonen und es mit deinem lokalen WordPress-Plugin-Ordner symbolisch verknüpfen. Der Vorteil dieser Methode besteht darin, dass Sie WooCommerce einfach zu einer bestimmten lokalen WordPress-Instanz hinzufügen/entfernen können. Es ist nicht an eine bestimmte gebunden.

Nachdem Sie das Repo geklont haben, stellen Sie sicher, dass Sie auch den folgenden Befehl ausführen, um die Plugin-Abhängigkeiten und externen Pakete zu installieren.

 npm install && composer install

Dies ist wichtig, da nicht der gesamte WooCommerce-Code im Kern-Repository enthalten ist. Beispielsweise sind die Gutenberg-Blöcke standardmäßig in einem separaten Repository enthalten. Um sie in die Codebasis aufzunehmen, müssen Sie den obigen Befehl verwenden, um sie speziell zu installieren.

Sobald alle Abhängigkeiten und externen Repositories installiert wurden, sind sie sofort verfügbar. Hier ist derselbe Checkout-Blockcode, den wir uns zuvor im WordPress Trac angesehen haben, aber jetzt haben wir lokal Zugriff darauf.

Codestruktur

Das WooCommerce-Plugin ist in mehreren Ordnern der obersten Ebene organisiert:

• /Vermögenswerte
• /i18n
• /enthält
• /lib
• /Pakete
• /Beispieldaten
• /src
• /Vorlagen
• /Verkäufer

Der Assets -Ordner enthält eine große Sammlung von Stilen, Schriftarten, Bildern und JavaScript, die bei der Plugin-Ästhetik und Interaktivität sowohl im WordPress-Admin als auch im Frontend helfen.

Standard-Plug-in-Ordner wie i18n , sample-data und vendor enthalten Funktionen für Internationalisierungsfunktionen, Beispielproduktdaten bzw. Bibliotheken von Drittanbietern.

Der Vorlagenordner enthält alle strukturierten PHP-Vorlagen, die für verschiedene WooCommerce-Inhalte wie Warenkorb, Kasse, E-Mails usw. verwendet werden. Jede Vorlage kann überschrieben werden, indem sie an die entsprechende Stelle in einem benutzerdefinierten Thema (normalerweise einem untergeordneten Thema) kopiert wird, sodass es sich lohnt, sie zu durchsuchen Durchsuchen Sie diesen Ordner im Detail, um alle verfügbaren Vorlagen anzuzeigen, die angepasst werden können. Bitte beachte: Das Anpassen von WooCommerce über Snippets ist besser als das Überschreiben von Vorlagen.

Der Hauptkern der Plugin-Funktionalität ist in den Ordnern include , lib , packages und src enthalten . Insbesondere der Ordner „includes“ enthält die Hauptliste der PHP-Plugin-Klassen für eine Vielzahl von WooCommerce-Funktionen.

Außerdem befinden sich alle in WooCommerce verfügbaren Gutenberg-Blockdefinitionen im Paketordner.

Erkunden des Codes

Die Haupt-Plugin-Datei im Stammordner ist woocommerce.php . Dies bootet den Autoloader und die Pakete.

Der Autoloader verwaltet das Laden von Paketen und Klassen, die sich im /src-Verzeichnis befinden. Pakete enthalten Code, der außerhalb des Kern-WooCommerce-Plugins entwickelt wurde, wie z. B. die Editor-Blöcke.

Sobald der gesamte automatisch geladene Code geladen wurde, wird die WooCommerce-Hauptklasse eingebunden und instanziiert über:

 WooCommerce::Instanz()

Dadurch wird eine neue Instanz der WooCommerce-Klasse erstellt und in einer statischen Klassenvariablen gespeichert. Diese neue Instanz wird dann zurückgegeben und in einer globalen Variablen gespeichert, sodass von überall darauf zugegriffen werden kann.

Durchsuchen der Codebasis

Die meisten modernen Code-Editoren bieten leistungsstarke Suchfunktionen, um in der Codebasis navigieren zu können. Für die unten gezeigten Beispiele verwenden wir VS Code, aber es spielt wirklich keine Rolle, da fast alle Editoren ähnliche Suchfunktionen bieten.

Wir können viel über die Codebasis herausfinden, indem wir einige grundlegende Suchen durchführen. Wenn wir beispielsweise nach verfügbaren Hooks suchen, gibt die Suche nach „ add_filter “ etwa 380 Filter-Hooks zurück!

Vergleichen Sie dies mit Action Hooks, die mit rund 618 Übereinstimmungen für den Suchbegriff „ add_action “ sogar noch mehr zurückgeben.

Es gibt viel Spielraum, um unsere Suchen zu verfeinern, z. B. Suchen nur nach bestimmten Dateitypen und nach Zeichenfolgen, die speziell mit der Groß- und Kleinschreibung des Suchbegriffs übereinstimmen und wenn es sich um ein ganzes Wort handelt.

Beispiel: Das folgende Suchergebnis zeigt Übereinstimmungen für „ WooCommerce “ an, wenn es sich um ein ganzes Wort handelt, zwischen Groß- und Kleinschreibung unterschieden wird und sich nur in einer PHP-Datei befindet (andere Dateitypen werden ignoriert).

Einer der Gründe, warum VS Code so beliebt ist, ist die große Anzahl verfügbarer Erweiterungen, und es gibt mehrere, die bei der Codenavigation helfen können. Eine besondere Erweiterung, die auffällt, ist Bookmarks.

Es ermöglicht Ihnen, Stellen in Ihrem Code mit Lesezeichen zu versehen, sodass Sie auf Knopfdruck zu bestimmten interessanten Codeabschnitten zurückspringen können. Es ist wirklich praktisch, besonders für große Codebasen wie WooCommerce.

Im folgenden Screenshot habe ich einige WooCommerce-Action-Hooks für den schnellen Zugriff mit einem Lesezeichen versehen, auf die ich später zurückkommen möchte.

Klicken Sie einfach auf eines der mit Lesezeichen versehenen Elemente im Explorer-Bedienfeld, um direkt zu einer bestimmten Codezeile zu gelangen.

Es gibt viele andere Begriffe, nach denen Sie suchen könnten. Vielleicht möchten Sie erkunden, welche WooCommerce-Klassen verfügbar sind. Diese Art der Suche könnte in Kombination mit Regex leistungsfähiger werden.

Beispielsweise ist es einfach, nach Klassennamen zu suchen, die 'WC' am Anfang enthalten (zB 'WC_Structured_Data'). Aber was ist mit Klassen, die irgendwo im Klassennamen „WC“ enthalten? Dafür ist Regex erforderlich, da Sie nach der Zeichenfolge „class“ suchen müssten, gefolgt von einem Leerzeichen, gefolgt von einer Zeichenfolge, die irgendwo „WC“ enthält.

Mit Regex können Sie auch nach einem Funktionsnamen (oder einem Teil eines Namens) suchen, der eine Methode einer Klasse und keine eigenständige Funktion ist. Die Möglichkeiten sind endlos und daher sind gute Kenntnisse von Regex sehr zu empfehlen.

Ein schnelles Beispiel für die Anpassung von WooCommerce

Angenommen, Sie müssen die Checkout-Seite anpassen und insbesondere einen Untertitel unter der Überschrift „Rechnungsdetails“ anzeigen.

Was Sie tun könnten, ist eine WooCommerce-Plugin- Dateisuche nach der Zeichenfolge „Rechnungsdetails“, um zu sehen, ob es „etwas“ gibt, das Sie dann in Ihrem benutzerdefinierten Code verwenden können. In diesem Fall verwende ich den NotePad++ Code-Editor, nur um zu zeigen, dass jede Software gültig ist:

Ich habe 2 Suchergebnisse, aber nur eines ist für die Checkout-Seite relevant. Also öffne ich diese bestimmte Datei (form-billing.php) in dieser bestimmten Zeile (28):

…und beachten Sie, dass direkt nach der Überschrift ein do_action() steht!

Dies gibt uns die Möglichkeit, dort etwas Code „einzufügen“, ohne die gesamte Vorlagendatei zu überschreiben. Ich gehe zur functions.php meines Child-Themes und schreibe Folgendes:

/**
 * @snippet       Add Subtitle Below Billing Heading @ Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_action( 'woocommerce_before_checkout_billing_form', 'bbloomer_billing_details_subtitle' );

function bbloomer_billing_details_subtitle() {
   echo '<h4>This is a subtitle</h4>';
}

Und hier das „Danach“:

Erkunden Sie weiter!

Wir haben nur an der Oberfläche dessen gekratzt, was ehrlich gesagt eine sehr große Codebasis ist. Sie würden lange brauchen, um jede einzelne Codezeile durchzusehen, aber hoffentlich habe ich es geschafft, Ihren Appetit genug anzuregen, um weiter in der faszinierenden WooCommerce-Codebasis zu graben und noch mehr zu lernen!