Wer kennt es nicht? Man entwickelt ein großartiges WordPress-Plugin lokal in VS Code, testet es, und dann kommt der nervige Teil: Das Veröffentlichen.

Man klickt rechts auf den Ordner, wählt „In ZIP-Datei komprimieren“ und lädt es hoch. Doch halt! Hast du daran gedacht, den versteckten .vscode-Ordner mit deinen sensiblen Server-Passwörtern (sftp.json) aus der ZIP zu löschen? Und was ist mit dem Browser-Cache bei neuen JavaScript-Dateien?

In diesem Beitrag zeige ich dir, wie du deinen Workflow in Visual Studio Code (VS Code) so einrichtest, dass all diese fehleranfälligen Schritte vollautomatisch im Hintergrund passieren. Wir verbinden unser Projekt mit GitHub und lassen einen Roboter die Arbeit machen.

Voraussetzung: Was du brauchst

  • VS Code als deinen Code-Editor.
  • Einen kostenlosen GitHub-Account.
  • Ein lokales WordPress-Plugin, an dem du gerade arbeitest.

Schritt 1: Die Schutzmauer hochziehen (Die .gitignore)

Bevor wir unseren Code ins Internet (zu GitHub) schicken, müssen wir sicherstellen, dass private Dateien auch privat bleiben. Dafür gibt es die .gitignore-Datei. Alles, was hier drin steht, ist für Git quasi unsichtbar.

  1. Öffne deinen Plugin-Ordner in VS Code.
  2. Erstelle eine neue Datei direkt im Hauptverzeichnis und nenne sie exakt .gitignore (mit dem Punkt am Anfang!).
  3. Füge diesen Code ein:

Plaintext

# Editor-Einstellungen und Passwörter niemals hochladen!
.vscode/
sftp.json

# MacOS Systemdateien
.DS_Store

# Node/NPM (falls du das später mal nutzt)
node_modules/

Warum das wichtig ist: Deine sftp.json enthält oft Passwörter für deinen Server. Durch diesen Code wird sie niemals auf GitHub landen.

Schritt 2: Das Projekt mit GitHub verbinden

Jetzt schieben wir deinen Code das erste Mal in die Cloud.

  1. Klicke in VS Code auf der linken Seite auf das Source Control Icon (das Symbol, das aussieht wie eine kleine Verzweigung mit einem Kreis).
  2. Klicke auf Publish to GitHub.
  3. VS Code fragt dich, ob das Repository (der Speicherort) Public (öffentlich) oder Private (privat) sein soll. Wähle das, was dir am besten passt.
  4. Wähle alle Dateien aus und bestätige.

Glückwunsch! Dein Code liegt jetzt sicher auf GitHub. Aber wir wollen noch mehr: Wir wollen automatische Release-ZIPs!

Schritt 3: Der Autopilot für ZIP-Dateien (GitHub Actions)

Anstatt ZIP-Dateien auf dem PC zu erstellen, bringen wir GitHub jetzt bei, das für uns zu tun, sobald wir eine neue Version veröffentlichen. Wir nutzen dafür „GitHub Actions“.

  1. Erstelle in VS Code einen neuen Ordner in deinem Projekt und nenne ihn .github (mit Punkt!).
  2. Erstelle in diesem Ordner einen weiteren Ordner namens workflows.
  3. Erstelle darin eine Datei namens release.yml.
  4. Kopiere exakt diesen Code hinein:

YAML

name: Create Release ZIP

on:
  push:
    tags:
      - 'v*' # Die Maschine startet, sobald du einen Tag wie "v1.0" pusht

# Wir geben dem Workflow die Erlaubnis, die fertige ZIP bei den Releases hochzuladen
permissions:
  contents: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Create ZIP Archive
        run: |
          # Wir packen alles in eine ZIP, ABER schließen sensible Dateien explizit aus!
          zip -r MeinPlugin.zip . -x "*.git*" ".vscode/*" ".gitignore" "sftp.json"

      - name: Create Release
        uses: softprops/action-gh-release@v2
        with:
          files: MeinPlugin.zip
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

(Wichtig: Du kannst MeinPlugin.zip in Zeile 21 und 26 einfach durch den echten Namen deines Plugins ersetzen).

Schritt 4: Der Browser-Cache-Trick (PHP Bonus)

Wenn du oft CSS- oder JS-Dateien anpasst, kennst du das Problem: Du veröffentlichst ein Update, aber die Nutzer sehen die Änderung nicht, weil ihr Browser noch die alte Datei im Cache hat.

Lass uns das automatisieren! Gehe in deine plugin.php an die Stelle, wo du deine Skripte lädst (wp_enqueue_script). Anstatt die Version per Hand hochzuzählen, nutze die PHP-Funktion filemtime():

PHP

// PHP schaut nach, wann die Datei zuletzt gespeichert wurde und macht daraus die Version!
$js_version = filemtime(plugin_dir_path(__FILE__) . 'assets/js/mein-script.js');

wp_enqueue_script(
    'mein-plugin-js',
    plugins_url('assets/js/mein-script.js', __FILE__),
    array('jquery'),
    $js_version, // Hier kommt die automatische Version rein
    true
);

Jedes Mal, wenn du Strg + S in deiner JS-Datei drückst, generiert PHP im Hintergrund eine neue Versionsnummer. Der Cache wird automatisch geleert!

Schritt 5: Der Daily Workflow – Wie man ein Update veröffentlicht

Dein Setup ist jetzt fertig. Wenn du in Zukunft an deinem Code gearbeitet hast und eine neue Version (z.B. 1.5.2) veröffentlichen willst, ist der Ablauf unglaublich simpel.

  1. Version anpassen: Ändere ganz oben in den Kommentaren deiner plugin.php die Versionsnummer (z.B. auf Version: 1.5.2).
  2. Öffne das Terminal in VS Code (`Strg + „ oder oben über das Menü „Terminal -> New Terminal“).
  3. Gib diese Befehle nacheinander ein:

Den Code hochladen:

Bash

git add .
git commit -m "Dein Kommentar, was du geändert hast"
git push

Das Release auf GitHub zünden: (Hier vergeben wir das Etikett „v1.5.2“ und schreiben die Release-Notes für die Nutzer).

Bash

git tag -a v1.5.2 -m "Bugfixes im Frontend und neues Feature X hinzugefügt."
git push origin v1.5.2

Das magische Finale

Sobald du den letzten Befehl absendest, lehne dich zurück und öffne deine GitHub-Seite. Unter dem Reiter Actions siehst du, wie dein Roboter anspringt. Unter dem Reiter Releases erscheint wenige Sekunden später deine neue Version: Sauber formatiert, mit deinem Kommentar und – das Wichtigste – einer fertig gepackten, sicheren ZIP-Datei, die jeder Nutzer direkt herunterladen und in WordPress installieren kann.

Nie wieder manuell ZIP-Dateien packen. Nie wieder versehentlich Passwörter leaken. Willkommen im professionellen Entwickler-Workflow!