> For the complete documentation index, see [llms.txt](https://mazingxr.gitbook.io/mazing-world/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mazingxr.gitbook.io/mazing-world/de/integration-shops/wordpress.md).

# Wordpress

### **Übersicht**

Um die **WordPress-Skriptintegration** vorzubereiten, musst du zunächst ein **Header-/Footer-Code-Snippet-Plugin** installieren. Anschließend kannst du deinen **Mazing Script Integration Code** dort einfügen.

Bitte stelle sicher, dass du zuerst dem Guide folgst, damit du ein gutes Verständnis dafür bekommst, wie das Feature in deinem Shop eingesetzt werden kann.

### **Schritt 1: Header-/Footer-Plugin in WordPress installieren**

Zuerst musst du ein Plugin installieren, mit dem du **eigenen Code im Header und Footer** einfügen kannst.

* Der **Header-Code** wird verwendet, um das **Mazing-Skript** einzubinden, sodass alle Mazing-Funktionen global in deinem Shop verfügbar sind.
* Der **Footer-Code** wird genutzt, um die **3D- und AR-Buttons** auf deinen Produktseiten zu platzieren.

In diesem Beispiel haben wir uns für **WPCode** entschieden – du kannst aber auch jedes andere **Custom-Code-Plugin** deiner Wahl verwenden.

<figure><img src="/files/tSRWkBVmjHYIRBBGyIYl" alt=""><figcaption><p>WP Code Installation page</p></figcaption></figure>

### **Schritt 2: Zu den Einstellungen nach der Plugin-Aktivierung navigieren**

<figure><img src="/files/NFm5urMM0WcKWaPxj1Ar" alt=""><figcaption><p>Side Menu in wp-admin</p></figcaption></figure>

### **Schritt 3: Mazing-Code in den Header einfügen**

Füge den **Header-Code** in das Plugin ein und klicke auf **Speichern**.

⚠️ **Wichtig:** Vergiss nicht, die **`<script></script>`-Tags** mit einzufügen.

<figure><img src="/files/IFTsPKG9LLRub6ZEItUb" alt=""><figcaption><p>Header Code</p></figcaption></figure>

### **Schritt 4: Mazing-Code-Snippet anpassen**

Sobald der **Header-Code** aktiviert ist, kannst du die **Developer Console** deiner WordPress-Seite mit **F12** öffnen.

In der Konsole kannst du deine Integration vorab testen, indem du die global verfügbare **`mazing()`-Methode** aufrufst.\
Außerdem kannst du hier deine zuvor erstellte **Custom-Implementierung** testen.

<figure><img src="/files/yroOvXBTijeEpqnZWkqt" alt=""><figcaption><p>Test your script and the placement of the 3D/AR buttons</p></figcaption></figure>

### **Schritt 5: Finales Snippet in den Footer integrieren**

Sobald du mit deiner **Custom-Implementierung** zufrieden bist, füge das Skript – genau wie zuvor beim Header – in den **Footer** über das **WPCode-Plugin** ein und klicke auf **„Speichern“**.

⚠️ **Wichtig:** Vergiss nicht, die **`<script></script>`-Tags** mit einzufügen.

<figure><img src="/files/lhKur9GUb3Fi44Admwlo" alt=""><figcaption><p>Footer Code Implementation</p></figcaption></figure>