Willkommen bei heywp

Das Ziel ist: Eine stilisierte Berlin-Karte im SVG-Format mit eigenen Punkten zu versehen, etwa zur Markierung verschiedener Filialen eines Unternehmens. Sicherlich ist das mittels verschiedener Plugins aus dem großen WordPress-Plugin-Verzeichnis leicht möglich, bringt aber möglicherweise einige Nachteile mit sich:

• Daten könnten ins Ausland übertragen werden
• Eventuell müssen Cookies im Browser des Clients – des Websitebesuchers – gesetzt werden.
  Wusstest du, dass man durch den Verzicht auf verschiedene Plugins WordPress auch ohne Cookie-Banner betreiben kann?

Agenda

1. Entwicklungsumgebung einrichten (Mac)
2. Ansicht des Beispiel-Blocks (copyright-date) von WordPress
3. Unser eigener Block – Umwandlung des Beispiel-Blocks
4. Parent-Block: Berlin-Karte
5. Child-Block: Punkte auf der Berlin-Karte
6. Übersetzungen mit Loco Transite

Entwicklungsumgebung einrichten (Mac)

Die nächsten Schritte erfordern einige Entwicklertools. Eine bewährte Methode, unter macOS textbasierte Entwicklerwerkzeuge zu installieren, stellt der Paketmanager Homebrew, in Kombination mit dem Framework Oh My Zsh dar.

Oh My Zsh installieren

Oh My Zsh erleichtert den Umgang mit der Kommandozeile in macOS; so können die letzten Befehle bspw. per Tastendruck auf den Pfeil nach oben abgerufen werden

1. Gehen Sie auf https://ohmyz.sh/#install
2. Kopieren Sie die Befehlszeile zur Installation:
3. Kopieren Sie den Wert in der grünen Schrift:

4. Öffnen Sie den macOS Terminal. Drücken Sie dafür Command – Leertaste gleichzeitig und beginnen Sie eine Suche nach Terminal:

5. Fügen Sie mit Command – V den kopierten Befehl nun im Terminal ein. Mit Druck auf die Eingabetaste startet die Installation.

6. Fügen Sie mit Command – V den kopierten Befehl nun im Terminal ein. Mit Druck auf die Eingabetaste startet die Installation. Fertig !

Homebrew installieren

Homebrew erleichtert die Installation von text- und fensterbasierten Programmen in macOS. In vielen Fällen spart man sich den Aufruf einer Website, um das gewünschte Werkzeug zu installieren.

Auch Nutzer*innen von Linux und Windows können von der Einfachheit von Hombrew profitieren, hier ist die Nutzung aber auf textbasierte Werkzeuge beschränkt. Windows-Nutzer*innen müssen weiterhin zuvor das Windows Subsystem for Linux installieren.

Mit dem Rückgriff auf das Verzeichnis /opt auf der Systemfestplatte des Macs werden die textbasierten Programme und Daten wie Datenbanken übrigens immer per Time Machine mitgesichert. Wer also regelmäßig ein Laufwerk für ein Backup anschließt, muss sich keine Sorgen machen.

1. Die Website brew.sh besuchen und den Inhalt der schwarzen Zeile in die Zwischenablage kopieren:

2. Im noch geöffneten Terminal die kopierte Zeile mit Command – V einfügen und Ente drücken:

3. Nach Abschluss folgt man den Aufforderungen Homebrews und führt diese Zeilen nacheinander im Terminal aus:

 echo >> /Users/user/.zprofile
 echo 'eval "$(/opt/homebrew/bin/brew shellenv zsh)"' >> /Users/user/.zprofile
 eval "$(/opt/homebrew/bin/brew shellenv zsh)"

VSCodium installieren

VSCodium ist eine datensparende Alternative zum Code-Editor Visual Studio Code, indem Sie Daten zu Nutzung nicht an Microsoft sendet. Nebenbei benötigt VSCodium etwas weniger Festplattenspeicher als sein „Vorbild“. Einige Tools, etwa zur Einbindung von KI, müssen allerdings manuell nachinstalliert werden. Aber einem Gros wird außer dem anderen Logo im Dock im Alltag kein Unterschied auffallen.

1. Wir instalieren VSCodium praktischerweise mit dem eben installierten Homebrew-Befehl brew install vscodium im Terminal.
2. Anschließend kann mit Command – Leertaste wieder das Suchfenster von Spotlight geöffnet werden, und mit dem Beginn des Eintippens kann VSCodium per einfachem Klick gestartet werden.

3. Da VSCodium ab sofort (hoffentlich) regelmäßig genutzt werden wird, kann man es mit das Programmicon per Rechtsklick wahlweise fest im Dock von macOS platzieren:

WordPress lokal installieren

1. Beim ersten Start präsentiert sich VSCodium sehr nüchtern mit einem schwarzen Fenster. Mit der Tastenkombination Command + J öffnen wir in dessen unterer Hälfte ein Terminal:

2. Websites sind keine Bilder und keine Dokumente, deswegen schlage ich unter macOS gerne den Ordnernamen Sites für die lokale Webentwicklung vor. Im Terminal kannst du nun demnach mkdir Sites eingeben und mit Enter bestätigen:

3. Nun sieht man im Finder im Benutzerordner einen neuen Ordner. Wer ihn markiert und Command – I drückt, erkennt schnell: Der Ordner bekommt ein besonders schönes Symbol verpasst. So kann man ihn bei der Arbeit mit dem Finder ggf. später leichter erkennen.

4. In VSCodium können wir nun mit dem Befehl cd Sites && mkdir wp && cd wp einen Ordner wp im Ordner Sites anlegen und direkt in ihn gelangen:

5. Hier lassen wir Homebrew nun die beiden wichtigsten Kommandozeilen-Tools für die nächsten Schritte installieren: brew install wp-cli && brew install php . wp-cli erleichtert das Installieren von WordPress per Kommandozeile und erlaubt es, einen lokalen Webserver zu öffnen. So kann man quasi kurzfristig sein eigenes Internet auf dem lokalen Computer eröffnen und an einer Website bzw. einem Plugin arbeiten. MariaDB ist ein gängiges Datenbanksystem, in den WordPress u.a. alle Beiträge und Seiten speichern wird.
6. Wenn der vorige Befehl abgearbeitet wurde, starten wir nun den Download der neusten WordPress-Version mittels: wp core download .
   Nach wenigen Augenblicken ist das Kernsystem heruntergeladen.
7. Anschließend wird mit wp server ein lokaler Webserver gestartet. Nun kann http://localhost:8080 im Browser aufgerufen werden, und die Installationsroutine von WordPress ist jetzt zu sehen.
   

Warum :8080 ?

Der Port 8080 am Ende der Adresse scheint zunächst zu irritieren. Und in der Tat tauchen die Ports 80 (http://-Domains, nun mehr kaum noch in Gebrauch) bzw. 443 (https://) bei normalen Surfvorgängen im öffentlichen Internet gar sichtbar nicht auf.
Warum hier 8080?
Dieser zunächst ungewohnte Port, der in der Adresszeile des Browsers sichtbar bleibt, ermöglicht das Starten eines lokalen Webservers für Mac-User die nicht über Administrationsrechte verfügen. Beispielhaft wären etwa Gruppen von Schülern und Studenten in einem Computerraum.

8. Nach der Auswahl von Deutsch und einem Klick auf Weiter sehen wir den nächsten Abschnitt des Setups:

9. Jetzt bietet sich das Anlegen einer Datenbank für unser neues Projekt an. In VSCodium starten wir dazu ein neues Terminal mit einem Klick auf „+“ rechts oberhalb des aktuell laufenden Terminals:

10. Im neuen Terminal führen wir diesen Befehl in einer Zeile aus: /opt/homebrew/opt/mariadb/bin/mysqld_safe --datadir=/opt/homebrew/var/mysql --port=8889 . Port 8889 macht dabei den Datenbankserver unabhängig von Administratorrechten (in Hinblick auf Abschnitt 10) und der Port 8888, den andere Tools von WordPress gerne nutzen, bleibt wiederum unbesetzt.

11. Ein neuer Terminal ist erstmal belegt, deswegen wiederholen wir den Schritt mit dem „+“ aus Abschnitt 11.
12. Wir loggen uns zunächst als Mac-Nutzer in MariaDB ein, um einen Datenbanknutzer „root“ anzulegen, der Datenbanken anlegen und ändern darf. Zunächst loggen wir uns mit mysql -u $USER ein:

13. Mit  ALTER USER ‚root’@’localhost‘ IDENTIFIED BY ‚root‘; versehen wir den bislang passwortlosen user root mit dem Passwort root:

14. Mit ALTER USER 'root'@'localhost' IDENTIFIED BY 'root'; (Semikolon beachten!) versehen wir den bislang passwortlosen user root mit dem Passwort root:

14. Nun legen wir mit CREATE DATABASE wp; eine erste Datenbank an.

15. Mit quit kann die MariaDB-Konsole nun wieder verlassen werden.

16. Mit diesen Daten können wir mit der Installation fortfahren:

17. Nun können wir einen Websitenamen, Username und ein Passwort angeben. Dieses Passwort bitte notieren, da wir es mangels Mailservers (noch) nicht zurücksetzen können:

Anschließend ist WordPress lokal installiert.