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.

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]

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

<?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'
	)
);

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.