Auch Entwickler brauchen Platz zum Spielen

28. Oktober 2012 /

Github: Gist-Snippets in WordPress via Shortcode einbinden

Das Toolbox-Modul bindet Gist-Snippets in WordPress-Beiträge ein. Die Steuerung erfolgt bequem via Shortcode mit gewünschter Github:Gist-ID.
Github

Früher oder später steht jeder Entwickler vor der Entscheidung: Wo eigene Code-Snippets – öffentlich zugänglich – speichern bzw. verwalten und dabei die Möglichkeit besitzen, diese in Beiträgen möglichst ohne Umstand einbinden zu können? Direkt im Blog? Dienstleister? Github:Gist ist für viele der Favorit. Für die Einbindung der eigenen Gist-Schnipsel hat Github eine JavaScript-Lösung vorgesehen, die den Code dynamisch in den Artikel einbindet. Der Nachteil: Es ruckelt beim Laden, zudem bleibt der Snippet nicht Feed- bzw. indexierbar, da kein fester Bestandteil der Seite. Abhilfe: Das Toolbox-Modul liest den Gist-Snippet ein, speichert diesen im Cache und gibt ihn an der gewünschten Stelle im WordPress-Artikel aus.

Gist-Snippets via Shortcode
Die überzeugende Eigenschaft der Toolbox-Module ist ihre Einfachheit und Verständlichkeit. So auch beim Modul für Gist-Snippets: Der Code ist übersichtlich gehalten, Kommentare begleiten den Funktionsumfang. Die Gist-Integration in Webseiten erfolgt mithilfe eines simplen Shortcodes:

[gist id=xxxxx]

Github:Gist ID
Zuständige Gist-ID für den Shortcode

Integration der Stylesheets
Das Modul kümmert sich nicht nur ums Auslesen, Caching und die Darstellung der Code-Auszüge. Die für die Syntax-Hervorhebung zuständige CSS-Datei wird auf Beiträgen mit der Gist-Einbindung ebenfalls eingebunden und nachgeladen. Sind eigene Stylesheets für die Code-Formatierung im Einsatz, so kann auf die CSS-Registrierung im Modul verzichtet werden.

Toolbox-Modul für die Gist-Einbindung

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129
<?php
/*
Module Name: Einbindung der Gist-Snippets
Module URI: http://playground.ebiene.de/gist-toolbox-modul/
Description: Abfrage und Darstellung der Gist-Snippets via [gist id=xxxx] Shortcode. [Frontend]
Author: Sergej Müller
Author URI: http://ebiene.de
*/
 
 
/* Sicherheitsabfrage */
if ( !class_exists('Toolbox') ) {
die();
}
 
 
/* Gist */
class Gist
{
/**
* Initiator der Klasse
*/
public static function init()
{
add_action(
'wp_enqueue_scripts',
array(
__CLASS__,
'register_style'
)
);
add_shortcode(
'gist',
array(
__CLASS__,
'handle_shortcode'
)
);
}
/**
* Registrierung des CSS
*/
public static function register_style()
{
wp_register_style(
'gist_css',
'https://gist.github.com/stylesheets/gist/embed.css'
);
}
/**
* Verarbeitung des Shortcodes
*
* @param array $atts Array mit Attributen
* @param string $txt Text zwischen den Tags [optional]
* @return string $output Ermittelter Gist-Quelltext
*/
public static function handle_shortcode($atts, $txt = null)
{
/* Leer? */
if ( empty($atts['id']) ) {
return 'No Gist ID.';
}
/* Init */
$id = (int) $atts['id'];
$transient = 'sm_gist_' .$id;
/* Einbinden */
wp_enqueue_style('gist_css');
/* Im Cache */
if ( $gist = get_transient($transient) ) {
return $gist;
}
/* Abrufen */
$response = wp_remote_get(
'https://gist.github.com/' .$id. '.json',
array('sslverify' => false)
);
/* Fehler? */
if ( is_wp_error($response) ) {
return $response->get_error_message();
}
/* Holen und parsen */
$json = json_decode(
wp_remote_retrieve_body($response)
);
/* Leer? */
if ( empty($json->div) ) {
return 'Empty Data.';
}
/* Zuweisen */
$output = (string) $json->div;
/* Cachen */
set_transient(
$transient,
$output,
60 * 60 * 24
);
return $output;
}
}
 
 
/* Fire */
add_action(
'init',
array(
'Gist',
'init'
)
);
view raw github_gist.php hosted with ❤ by GitHub

Hinweise

  • Für eine fehlerfreie Funktionsweise des Toolbox-Moduls werden PHP 5.2.0 sowie ein Server mit ausgehenden Verbindungen vorausgesetzt.
  • Die Lösung behandelt einfache Gist-Snippets mit nur einem File. Bei komplexeren Ansätzen mit mehreren Dateien pro Gist empfiehlt sich die umfangreichere Methode von Dominik Schilling.
Sergej Müller

[Der Autor]Sergej Müller ist enthusiastischer Software Engineer mit Schwerpunkten Webentwicklung, Apps und WordPress. Seit 2007 programmiert und vertreibt er wpSEO, das zugkräftige SEO-Plugin für WordPress-Blogs.

Thematisch ähnliche Beiträge