Jalara Studio

veröffentlicht am

WordPress Shortcode für einen horizontalen Zeitstrahl erstellen

# # #

Im folgenden Artikel soll der folgende horizontale hereinzoombare und bewegliche Zeitstrahl mit der JavaScript-Bibliothek vis.js1 erstellt werden:

Literaturepochen

Plugin erstellen

Lege zunächst eine PHP-Datei in einem Ordner z.B. namens horizontale-timeline im Verzeichnis wp-content/plugins an.

Shortcode und Überschrift

Füge in die PHP-Datei folgendes PHP zum Anlegen eines Plugins und für den Shortcode ein:

<?php
/*
    Plugin Name: Horizontaler Zeitstrahl
*/
defined('ABSPATH') or die("No direct requests for security reasons.");
function horizontale_timeline() {
    $timeline = '<h3>Literaturepochen</h3>'
              . '<div id="timeline"></div>';
    return $timeline;
}
add_shortcode('tl','horizontale_timeline');

Gebe den Shortcode [tl] in den Editor im Bearbeitungsbereich ein. Im Frontend erscheint daraufhin die Ausgabe Literaturepochen, eingefügt in eine Überschrift der 3. Ordnung.

JavaScript-Bibliothek vis.js mit PHP einbinden

Als nächstes wird die JavaScript-Bibliothek vis.js und das dazugehörige CSS eingebunden:

function horizontale_timeline_css() { ?>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css'>
<?php }
add_action('wp_head','horizontale_timeline_css');

function horizontale_timeline_js() { ?>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js'></script>
<?php }
add_action( 'wp_footer', 'horizontale_timeline_js' );

Hinweis: Ein solches Einbinden der JS- und CSS-Dateien soll lediglich Einsteigern in HTML und PHP verständlicher das Prinzip dahinter aufzeigen. Für den Live-Einsatz sollte eher folgende Vorgehensweise genutzt werden, um JS- und CSS-Dateien einzubinden: Kopiere die beiden Dateien (vis.min.js und vis.min.css) in den Ordner des Plugins (wp-content/plugins/horizontal-timeline/js/vis.min.js und wp-content/plugins/horizontal-timeline/css/vis.min.css) und binde diese mit der WordPress-Funktion wp_register_script() ein.

function horizontale_timeline_js_css(){
    wp_register_script( 'vis-js', plugins_url( '/js/vis.min.js', __FILE__ ) );
    wp_register_script( 'vis-css', plugins_url( '/css/vis.min.css', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'horizontale_timeline_js_css' );

Zeitstrahl mit JavaScript erstellen

Erstelle nun eine weitere JavaScript-Datei z.B. mit dem Namen timeline.js im Ordner js und lege eine Variable mit dem Namen container an. Der Variable wird nun als Wert das im Shortcode angelegte HTML-Element 'timeline' übergeben:

var container = document.getElementById('timeline');

Als nächstes wird ein neues Datenset2 mit new vis.DataSet() mit den gewünschten Einträgen angelegt:

var items = new vis.DataSet([ 
 {content: 'Aufklärung', start: '1720', end: '1790'},
 {content: 'Märzrevolution', start: '1848', type:'point'}
 ]);

Erklärung: Das Attribut content erhält als Wert den Inhalt des Eintrages (z.B. content: 'Aufklärung'). Statt einfachen Text, kannst du auch HTML einfügen, um beispielsweise dem Eintrag Links oder Bilder mitzugeben. Mit den Attributen start und end gibst du den Anfangszeitpunkt bzw. den Endzeitpunkt an (z.B start: '2018-03-28', end: '2018-05-18'. Wenn du dem optionalen type-Attribut den Wert 'point' gibst, wird der Eintrag nach dem Zeitpunkt im Zeitstrahl erstellt. Ohne diese Angabe wird der Eintrag über dem Zeitpunkt zentriert. Zusätzlich kannst du mit dem style-Attribut einzelne Einträge direkt mit CSS formatieren (z.B. style: 'background:blue;color:white'). Alternativ kannst du ein className-Attribut hinzufügen (z.B. className: 'romantik'), um den jeweiligen Eintrag nachträglich mit CSS anzusprechen.

Danach werden die gewünschten Optionen festgelegt. Der Zeitstrahl soll z.B. mindestens eine Höhe von 250px besitzen:

var options = {
    minHeight: 200
 };

Anschließend werden die Variablen dem neu erstellten Zeitstrahl mitgegeben:

var timeline = new vis.Timeline( container, items, options );

Das gesamte Script sowie die für die Einträge später erstellte CSS-Datei (z.B. mit dem Namen timeline.css) im Ordner css kannst du anschließend ebenfalls mit PHP einbinden:

function horizontale_timeline_js_css(){
    wp_register_script( 'vis-js', plugins_url( '/js/vis.min.js', __FILE__ ) );
    wp_register_script( 'vis-css', plugins_url( '/css/vis.min.css', __FILE__ ) );
    wp_register_script( 'vis-timeline-js', plugins_url( '/js/timeline.js', __FILE__ ) );
    wp_register_script( 'vis-timeline-css', plugins_url( '/js/timeline.css', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'horizontale_timeline_js_css' );

CSS-Anpassungen

Wie bereits beschrieben kann beim Anlegen des Datensets jeder Eintrag ein style- und className-Attribut besitzen, um den jeweiligen Eintrag direkt oder nachträglich mit CSS für eigene Styles ansprechen zu können.

Ebenso können alle Einträge sowie die Inhalte der Einträge über die Klassen vis-item, vis-range und vis-item-content angesprochen werden. Mit diesen Klassen lassen sich u.a. die Schriftfarbe aller Einträge anpassen (.vis-item{color:white;}), die runden Kanten der Bereiche deaktivieren (.vis-item.vis-range{border-radius:0;border:0;}) oder die Buchstaben, die im Zeitstrahl standardmäßig bei einem zu großen Zoomfaktor im Wort abgeschnitten werden, mit dem Ellipsen-Symbol ersetzen:

<style>
    .vis-item.vis-range { border-radius: 0; border: 0; }
    .vis-item { color: white; }
    .vis-item .vis-item-content { 
        padding: 9px 12px 4px 12px;
        overflow: hidden; 
        text-overflow: ellipsis;
        min-width: 49px;
        white-space: nowrap;
    } 
</style>

Zusammenfassung

Zum Schluss soll das gesamte Code-Beispiel zusammengefasst werden. Damit der Zeitstrahl direkt nach dem Kopieren (in die Plugin-Datei oder in die Datei functions.php des Child-Themes) und dem anschließenden Einfügen des Shortcodes [tl] funktioniert, werden die Dateien, wie oben bereits beschrieben, über ein CDN aufgerufen:

function horizontale_timeline() {
    $viscss = '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css">';
    $visjs = '<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>';
    $timeline = '<h3>Literaturepochen</h3><div id="timeline"></div>';
    $script = "<script>
    var container = document.getElementById('timeline');
    var items = new vis.DataSet([ 
    {content:'Aufklärung', style:'background:#5a709b;cursor:pointer;', start:'1720', end:'1790'},
    {content:'Empfindsamkeit', style:'background:SlateGray;', start:'1740', end:'1790'},
    {content:'Sturm und Drang', style:'background:#dd5e5e;',start:'1765', end:'1790'},
    {content:'Klassik', style:'background:#b49b6b;', start:'1786', end:'1832'},
    {content:'Romantik', style:'background:purple;', start:'1798', end:'1835'},
    {content:'Frühromantik', style:'background:purple;', start:'1798', end:'1804'},
    {content:'Hochromantik', style:'background:purple;', start:'1804', end:'1815'},
    {content:'Spätromantik', style:'background:purple;', start:'1815', end:'1848'},
    {content:'Biedermeier', style:'background:#7e9778;', start:'1815', end:'1848'},
    {content:'Junges Deutschland', style:'background:#70808f;', start:'1825', end:'1848'},
    {content:'Vormärz', style:'background:#5a9957;', start:'1825', end:'1848'},
    {content:'Wiener Kongress', style:'color:gray', start:'1815', type:'point'},
    {content:'Märzrevolution', style:'color:gray', start:'1848', type:'point'},
    {content:'Die Leiden des jungen Werthers', style:'color:gray;', start:'1774', type:'point'}
    ]);
    var options = {   
        minHeight: 200,  
    };
    var timeline = new vis.Timeline(container, items, options);
    </script>";
    $styles = '<style>
    .vis-item.vis-range { border-radius: 0; border: 0; }
    .vis-item { color: white; }
    .vis-item .vis-item-content {
       padding: 9px 12px 4px 12px;
       overflow: hidden;
       text-overflow: ellipsis;
       min-width: 49px;
    }</style>';
    return $viscss . $visjs . $timeline . $styles . $script;
}
add_shortcode('tl','horizontale_timeline');

Weiterführendes

Die Dokumentation3 des Zeitstrahl sowie weitere Beispiele4 findest du auf der Website visjs.org und ein Plugin, das die Beiträge ebenfalls mit Hilfe eines Shortcodes in einem Zeitstrahl ausgeben kann, findest du auf GitHub.5

Links