WordPress – Fußnoten Am Ende Vom Beitrag

Enthält ein Beitrag ziemlich viele ausgehende Links kann es unter Umständen praktisch sein diese nochmal als Fußnoten am Ende vom Beitrag angezeigt zu bekommen. Genau das macht dieses kleine WordPress Plugin mit ein paar Zeilen JavaScript. Ist es einmal aktiviert, generiert es aus den Links im Beitrag eine Linkliste und hängt diese an das Ende vom Beitrag an. Das Plugin selbst besteht lediglich aus einem Stylesheet um alles aufzuhübschen, ein paar Codezeilen jQuery sowie einem Initialisierungsscript in PHP für WordPress.

Das Stylesheet

.rs-footnotesup {
    color: #BA3E14;
    font-size: 0.8em;
}
.rs-flinkhover {
    color: #BA3E14;
    border-bottom: 1px solid rgba(102, 136, 153, 0.55);
}

.rs-footnotelist {
    margin: 0 0 25px 0;
    font-family: 'Chivo';
    font-style: normal;
}
    .rs-footnotelist .rs-footnotesup {
        font-size: 1em;
        font-family: 'Open Sans';
        font-style: normal;
    }
    .rs-footnotelist h4 {
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: bold;
        font-size: 1.15em;
        color: #292A2E;
    }
    .rs-footnotelist li {
        font-size: 0.80em;
        color: rgba(41, 42, 46, 0.70);
    }
        .rs-footnotelist li a {
            font-size: 1.15em;
        }
        .rs-footnotelist li span {
            -moz-opacity: 0;
            filter: alpha(opacity=0);
            opacity: 0;
            -webkit-transition: all .25s ease-in-out;
            -moz-transition: all .25s ease-in-out;
            -o-transition: all .25s ease-in-out;
            transition: all .25s ease-in-out;
        }
        .rs-footnotelist li:hover span {
            display: inline;
            -moz-opacity: 1;
            filter: alpha(opacity=100);
            opacity: 1;
        }

Die jQuery Codezeilen

jQuery(function()
{
    // Hole alle Links welche keine Raute, kein mailto und nicht das Attribut rel=nofollow beinhalten
    var links = jQuery('.post.single .rs-postcontent a[href]:not([href^=#], [href^=mailto], [rel=nofollow], [rel^=lightbox])');

    // Gehe nur zum nächsten Schritt weiter wenn mindestens ein Link
    if(links.length > 0)
    {
        // Erstelle ein Ungeordnete Liste und füge diese direkt nach dem Beitrag in das Dokument ein
        var notelist = jQuery('<ul class="rs-footnotelist"></ul>').insertAfter(jQuery('.rs-postcontent'));

        // Zählervariable für die Nummerierung
        var li_i = 0;

        // Erstelle das erste Listenelement mit einer Überschrift
        jQuery('<li>', { html: '<h4>Fußnoten:</h4>' }).appendTo(notelist);

        // Durchlaufe die zuvor erstellte Objektvariable (var links) in einer Schleife
        jQuery.each(links, function(i)
        {
            // Speichere die Linkurl in eine Variable
            var link_url = jQuery(this).attr('href');

            // Prüft ob die Linkurl eine bestimmte Zeichenlänge überschreitet und stellt eine verkürzte Version über shorten_url zur Verfügung
            if(link_url.length > 30)
            {
                var shorten_url = link_url.substring(0, 30)+'...';
            }else{
                var shorten_url = link_url;
            }

            // Speichere den Linktext in eine Variable
            var link_text = jQuery(this).text();

            // Hier wird abgefragt ob die Linkurl leer ist oder es sich bei dem Link um einen Downloadlink handelt
            if(link_url !== '' && link_url.search(/.(jpg|jpeg|gif|png|ico|css|js|zip|tgz|gz|rar|bz2|doc|xls|exe|pdf|ppt|txt|tar|mid|midi|wav|bmp|mp3)/) === -1)
            {
                // Zählervariable um eins erhöhen
                li_i = li_i + 1;

                // Füge dem Link aus der Schleife eine CSS Klasse sowie das Attribut ID samt Inhalt an
                jQuery(this)
                    .addClass('rs-footnotelink')
                    .attr('id', 'flink-'+i);

                // Füge direkt nach dem Link das HTML Element <sup> samt CSS Klasse und der aktuellen Zählervariable als Inhalt an
                jQuery('<sup>',{text:li_i})
                    .insertAfter(jQuery(this))
                    .addClass('rs-footnotesup');

                // Erstelle ein Listenelement mit HTML Elementen als Inhalt und füge dieses der Ungeordneten Liste hinzu
                jQuery('<li>', { html: '<sup class="rs-footnotesup" id="li-'+li_i+'">'+li_i+'</sup> '+'<a href="'+link_url+'" title="'+link_text+' – '+link_url+'">'+link_text+'</a><span> – '+shorten_url+'</span>' })
                    .appendTo(notelist)
                    .hover(
                        function() {
                            // Hole, ausgehend von dem übergeordneteten Element, den Attribut Inhalt von dem Kindelement <sup>
                            var id = jQuery(this).children('sup').attr('id').split('-');
                            // Nutze die herausgezogene ID um an die Links im Beitrag eine CSS Klasse anzuhängen
                            jQuery('#flink-'+id[1]).addClass('rs-flinkhover');
                        },
                        function() {
                            // Hole, ausgehend von dem übergeordneteten Element, den Attribut Inhalt von dem Kindelement <sup>
                            var id = jQuery(this).children('sup').attr('id').split('-');
                            // Nutze die herausgezogene ID um die zuvor an die Links angehangene CSS Klasse wieder zu entfernen
                            jQuery('#flink-'+id[1]).removeClass('rs-flinkhover');
                        }
                    );
                }
        });

        // Wenn die Zählervariable 0 ist entferne wieder die Ungeordnete Liste
        if(li_i === 0)
        {
            notelist.remove();
        }
    }
});

Ich hoffe die kurzen Erläuterungen zu den Bereichen im jQuery Script sind soweit verständlich. Falls nicht, weiter unten gibt es noch den Kommentarbereich um etwaige Fragen zu klären.

Das PHP Script/WordPress Plugin

<?php
/*
Plugin Name: Fußnoten - Linkliste
Plugin URI: http://blog.rschu.me/wp-plugins
Description: Generiert eine Linkliste und hängt diese als Fußnoten an das Ende eines Beitrags
Version: 1.0.1
Author: Robin Schulz <hello@rschu.me>
Author URI: http://rschu.me/
*/

wp_register_script('rs-footnotes', plugins_url('rs-footnotes/rs-footnotes.js'), array('jquery'), null);
wp_enqueue_script('rs-footnotes');

wp_enqueue_style('rs-footnotes', plugins_url('rs-footnotes/rs-footnotes.css'), null, null);
wp_enqueue_style('rs-footnotes');

Das WordPress Plugin Script ist relativ einfach aufgebaut und lädt lediglich das jQuery Script und das Stylesheet. Was die beiden Funktionsaufrufe wp_register_script und wp_enqueue_script genau machen könnt ihr dem WordPress Codex entnehmen (http://codex.wordpress.org/FunctionReference/wpregisterscript / http://codex.wordpress.org/FunctionReference/wpenqueuescript).

Achja, das Plugin gibt es auch nochmal als Zipdatei zum herunterladen: rs-footnotes.zip.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn