25. August 2016

Quellcode über GitHub verwalten und teilen Codeschnipsel clever in WordPress einbetten: GitHub Gists

,    3 Kommentare

Ein Beitrag von Katharina

Share on Facebook3Tweet about this on Twitter10Share on Google+0Share on LinkedIn0Email this to someone

Ihr wollt auf eurer WordPress Seite Quellcode mit euren Lesern teilen? Nutzt GitHub Gists! Die sehen nicht nur schick aus, sondern sind auch ziemlich praktisch. Wir zeigen euch, wie ihr Gists ganz einfach in WordPress einbindet.

Gesehen habt ihr in WordPress eingebettete Gists ganz sicher schon: Beispielsweise auf dem WPMU DEV-Blog werden GitHub Gists benutzt, um Quellcode in einem Beitrag zu zeigen.

Quellcode als GitHub Gist eingebettet

Quellcode als GitHub Gist eingebettet: so sieht das Ergebnis im Frontend aus

Diese Variante hat einige Vorteile gegenüber dem klassischen HTML mit <code></code>. Wir zeigen euch, wie ihr mit dem Plugin oEmbed Gist Code von GitHub in WordPress integriert.

Code als Gist einbinden: Was bringt das?

Flexibilität und Interaktionsmöglichkeiten.

Ihr erstellt einmal einen Gist auf GitHub und könnt diesen dann an mehreren Stellen einbinden. Wollt ihr den Code später aktualisieren, bringt ihr den Gist auf den aktuellen Stand und habt überall die veränderte Version des Codeschnipsels.

Noch dazu macht ihr es euren Lesern einfacher, mit den gezeigten Codezeilen weiterzuarbeiten. Sie können den Gist wie jedes andere GitHub Repository klonen, oder mit einem neuen Fork Verbesserungen beisteuern.

GitHub Gist in WordPress einbetten: So geht‘s

Erstellt euch als erstes auf GitHub einen neuen Gist. Das geht auch anonym, also ohne Registrierung. Das ist zum Ausprobieren ganz nett, aber langfristig könnt ihr die Gists natürlich mit Account besser verwalten.

Anonymer GitHub Gist

Codeschnipsel aus dem Artikel „WordPress Toolbar entfernen: so geht’s“ als anonymer Gist

Gist mit dem bereitgestellten Code in WordPress einbetten?

Beim Erstellen ist euch vielleicht aufgefallen, dass GitHub gleich einen Embed-Code bereitstellt (oben im Screenshot mittig zu sehen). Dieser ist einfach ein Script-Tag, der auf den Gist verweist. Warum nicht einfach den in einen WordPress Beitrag einfügen? Funktioniert, falls ihr Admin seid. Nutzer mit anderen Rollen dürfen aber kein JavaScript in Beiträge einfügen. Sollte also mal jemand anders euren Artikel bearbeiten, sind der Script-Tag und damit die Anzeige des Gists futsch. Besser: Plugin benutzen.

Gists in WordPress integrieren mit dem oEmbed Gist Plugin

WordPress-Plugin-oEmbed-Gist

Das simple Plugin oEmbed Gist tut genau das, was sein Name vermuten lässt: es integriert die Möglichkeit, GitHub Gists automatisch einzubetten, in WordPress. Sprich, nach der Installation und Aktivierung kopiert ihr einfach die URL zu eurem Gist in den visuellen Editor, und der gewünschte Quellcode erscheint.

 Zum Einbetten URL des GitHub Gists in den visuellen Editor kopieren

URL des GitHub Gists in den visuellen Editor kopieren – zack! Der Quellcode wird hübsch eingebettet.

Funktioniert supereinfach, ist praktisch und sieht schick aus – was will man mehr? 😉

Fazit

Codeschnipsel als GitHub Gists zu teilen bietet euren Lesern eine gute Möglichkeit, diesen weiterzuverwenden. In WordPress solltet ihr Gists aber nicht einfach über den Script-Tag einbinden, sondern ein Plugin wie oEmbed Gist benutzen. So könnt ihr eure Gists durch Einfügen der URL in den visuellen Editor ganz einfach in WordPress einbetten.

Verwaltet ihr euren Code über GitHub? Und wie bindet ihr Quellcode in WordPress Beiträge ein?

Share on Facebook3Tweet about this on Twitter10Share on Google+0Share on LinkedIn0Email this to someone
Katharina

Katharina

Beim Webseiten basteln vergesse ich schnell mal die Zeit. An WordPress gefällt mir besonders die vielfältige Welt der Plugins und Themes, die zum Ausprobieren einlädt.
Katharina

Du willst up-to-date bleiben?

Trage dich jetzt in unseren kostenlosen Newsletter ein, um stets die aktuellsten Neuigkeiten rund um Wordpress zu erhalten.

Wir geben deine Daten nicht weiter! Wir hassen Spam genauso wie du!

3 Kommentare

Reaktionen auf diesen Beitrag

    • Interessanter Ansatz. Wie weit wirkt sich das Plugin und der eingebettete Code denn auf die Performance aus? Und bekommt man auf GitHub zufällig nen netten Backlink unter? Also um den Zusatzservice auch durch Links zu rechtfertigen…

      • Katharina

        Hallo Severin,

        auf GitHub kannst du deinen Gists eine Beschreibung hinzufügen, das auch mit Link. So weit ich das sehen kann, ist das Plugin noch relativ simpel gehalten, für die Performance ist das Verwenden der code-Tags aber natürlich trotzdem besser 😉

        Viele Grüße,
        Katharina

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.