Zurück zu: ⋘ Start|Blabla ⋘ vorherige Position

WordPress und GitHub: Codes und Scripte verwalten und veröffentlichen

Wenn man wie ich viel mit Scripten arbeitet und diese “Scriptschnippsel” auch veröffentlichen möchte, macht WordPress leider ziemlich Kopfschmerzen. Als Purist nutze ich den Schickimicki Gutenberg Editor mit seinen “Blocks” sowieso schon nicht. Aber auch der klassische Editor bzw. der TinyMCE Editor schrotten einfach immer wieder die Code-Darstellung.

Also muss eine Alternative her. Ein paar gute Surf-Ergebnisse aus der Recherche, in denen viele verschiedene Optionen vorgestellt werden:

Erster Test – via GitHub (die Basics)

Account anlegen bei gist.github.com/
Einloggen, Script hochladen, speichern (öffentlich oder privat, ich wähle erstmal “privat”, da ich aktuell keine Zeit für Diskussionen mit Nerd-Kolleg*innen auf github habe, sondern eben nur die Script verwalten und von dort aus in unseren Projekten veröffentlichen möchte)
Oben unter “embed” den <script> … Tag kopieren
Im WP Beitrag einfügen (allerdings im QUELLTEXT, nicht im normalen Schreibbereich)
Funzt.

Vorteil: man erstellt sich quasi “nebenbei” ein Script-Archiv bei github – projektunabhängig und überall verwendbar, nicht nur für WordPress-Projekte. Und da GitHub der “Quasi-Standard” als Script-Repository ist, macht es sowieso Sinn, dort einen Account zu haben.

Nachteile: das Styling ist nicht schön und die Einbindung im WordPress-Editor ist zunächst nicht wesentlich komfortabler, da man ja immer noch im Beitrags-Quelltext rumfummeln muss … und der ist selbst bei TinyMCE schlichtweg ein einziger Brei.

Optimierung: GitHub-Plugins für WordPress

Also schauen wir mal, was uns die Arbeit mit GitHub vereinfachen könnte. Am besten gefällt mir dieses Plugin, das einfach einen “Add GitHub” Button in die Editorzeile einfügt. Dann muss man wenigstens nicht mehr in den Quellcode wechseln:

Gist GitHub Shortcode
de.wordpress.org/plugins/gist-github-shortcode/Damit kann das über den Button, der automatisch im TinyMCE Menü erscheint, oder direkt via Shortcode der gewünschte GitHub Code eingebaut werden, das sieht dann so bspw. so aus (mit den üblichen eckigen Klammern drumrum, die konnte ich hier nicht setzen, weil sonst ja der Code ausgeführt wird):ECKIGE KLAMMER gist id="0bd0dcf3c4a49d13a062476eebc01c14" file="wp_shortcode_myexternallinks.php" ECKIGE KLAMMERDie ID einfach aus der Browserzeile bei GitHub kopieren, den Dateinamen hat man dort ja selbst vergeben.

Das Plugin GitHub Embed habe ich auch gesehen, getestet, tat aber nicht, was es sollte, oder ich bin zu blöd dafür. Das nur als Notiz, vielleicht teste ich es irgendwann nochmal, aber das Gist-Plugin tut ja alles, was ich möchte.

Ein weiteres interessantes Plugin muss ich noch testen, hierzu auch erstmal nur die Notiz:

Documents from Git
de.wordpress.org/plugins/documents-from-git/
Wenn ich die Beschreibung richtig verstehe, kann das alle Dokumente anzeigen, die man auf Github anlegt. Die Idee wäre, somit einen besseren mobilen Editor für WordPress-Beiträge zu bekommen, denn das mobile Editieren ist mit WordPress ja nicht besonders komfortabel. Das ist aber ein anderes Thema und wird gelegentlich einen eigenen Beitrag bekommen.

Mit Gist GitHub Shortcode habe ich aber wie gesagt erstmal alles, was ich brauche – schön schnell und einfach: einen Button, um einen GitHub Code einzubinden. Perfekt.

Für den Code “an sich” wird dann direkt in GitHub gearbeitet. Das löst gleich mehrere Probleme: Versionierung, Revisionen, Repository und vor allem: wurde ein Code mehrfach gepublished (d.h. wie bei uns oft parallel in mehreren Projekten), ist er sofort an allen Stellen aktuell – für uns ein klarer Vorteil.

GitHub Syntax-Highlighting

Auf GitHub selbst muss der Dateiname korrekt angeben sein (.php, .js, .sql etc.), damit GitHub erkennt, wie es den Code highlighten soll. Auch das ist damit also erledigt.

Alles, was noch fehlt, ist ein schönes CSS Styling für die Webseiten, auf denen der Code gepublished wird. Aber das ist im Moment zweitrangig.

Das erste Ergebnis mit dieser GitHub-Kombination ist übrigens hier zu sehen:
antiblabla.de > WordPress: externe Links auf einer Seite anzeigen

Andere Alternativen

Ich habe mir auch einige der reinen WordPress-Plugins angesehen, also ohne GitHub. Da sind tatsächlich einige bei, die den Code noch “schöner” darstellen, aber die Vorteile von GitHub sind für meine Anwendungsfälle einfach unschlagbar. Wer GitHub nicht möchte, dem sei dies hier empfohlen: