Manchmal, wenn man einen besonders langen Artikel schreibt, der durch viele Zwischenüberschriften gegliedert ist, wünscht man sich gleich zu Anfang des Beitrags eine kurze Inhaltsübersicht, die dem Leser einen schnellen Überblick verschafft. Toll wäre es natürlich auch noch, wenn man die einzelnen Gliederungspunkte direkt anklicken könnte und das ganze soll auch noch automatisch generiert werden. Klingt nach einem frommen, aber unerfüllbaren Wunsch, oder nach etwas, das nur mit viel manuellem Aufwand erreicht werden kann. Ich zeige Ihnen in diesem Tutorial, wie dieser Wunsch ganz einfach und automatisch erfüllt wird.
Wie sowas dann aussehen kann, sehen Sie direkt hier. Voilá, es folgt die Inhaltstabelle:
[content_table tag=“h3″]
Feine Sache, oder? und vollständig automatisch generiert. Das einzige, was Sie in Ihren Artikel einfügen müssen ist der shortcode content_table tag=“h3″ (in eckigen Klammern []), wenn Sie das Ganze z.B. auf „h3“ Überschriften anwenden wollen.
Eine kleine Einschränkung will ich Ihnen nicht verschweigen. Diese Variante unterstützt keine verschachtelten Titel. Das würde auch gehen, aber dadurch würde der Code unnötig komplex und ich will Ihnen hier ja einfache und quasi „alltagstaugliche“ Tipps geben.
Los geht´s mit dem vollständigen Code
Hier zeige ich erst mal den vollständigen Code. Wir gehen dann gleich noch ins Detail. Wie Sie sehen können stammt diese Funktion nicht von mir. Ich habe sie nur in den Weiten des Internet aufgespührt und finde sie nützlich.
(.*)|', $content, $titles);
//if there are titles, build the content table
if($titles[1]){
$max = count($titles[1]);
$counter = 0;
$content_table = "Inhalt
";
foreach($titles[1] as $title):
if($counter >= ceil($max/2)){
$content_table .= "
";
$counter = 0;
}
$counter++;
$content_table .= '- '.$title.'
';
endforeach;
$content_table .= "
";
}
//echo $content_table;
//replace the shortcode by the content table
$content = str_replace(''.$m[0].'
', $content_table, $content);
//add "back to top" links in headers
$content = preg_replace("|<".$in_tag.">(.*)|e", "'<'.$in_tag.' name=\"'.slug('$1').'\" id=\"'.slug('$1').'\">$1Zum Anfang'", $content);
endif;
return $content;
}
function slug($string)
{
$slug = trim($string);
$slug= preg_replace('/[^a-zA-Z0-9 -]/','', $slug); // only take alphanumerical characters, but keep the spaces and dashes too...
$slug= str_replace(' ','-', $slug); // replace spaces by dashes
$slug= strtolower($slug); // make it lowercase
return $slug;
}
?>
Die add_filter Funktion in WordPress
add_filter('the_content', 'get_content_table');
Die add_filter Funktion ist eine in WordPress eingebaute Funktion, die Funktionen mit einem bestimmten „Auslöser“ verknüpft. In diesem Fall verwenden wir den Filter the_content, der aufgerufen wird, befor WordPress den Inhalt eines Beitrags oder einer Seite ausgibt. Dieser Filter leitet also jede Seite und jeden Beitrag durch die zugewiesenen Funktionen. In dem Fall wird der Inhalt durch die zugewiesene Funktion get_content_table „geschleust“.
Die get_content_table Funktion
preg_match('/\[content_table\s(.*?)\]/', $content, $m);
if($m[0]):
Zuerst muss herausgefunden werden, ob die Funktion überhaupt benötigt wird. Also suchen wir nach der Zeichenkette „content_table“ (Parameter) zwischen eckigen Klammern. Falls dieser shortcode gefunden wird, geht es weiter. Falls nicht wird der Inhalt ganz normal ausgegeben.
$attr = shortcode_parse_atts($m[1]);
$in_tag = $attr['tag'];
preg_match_all('|<'.$in_tag.'>(.*)|', $content, $titles);
Falls der Shortcode gefunden wird, müssen wir herausfinden, auf welches Tag (z.B. h3) die Funktion angewendet werden soll, um die Inhaltstabelle zu erstellen. Auch hierfür bringt WordPress wieder eigene Funktionen mit.
Sobald wir den Tag identifiziert haben, können wir (oder natürlich besser gesagt: unsere Funktion) den Inhalt danach durchsuchen und das Ergebnis in einem Array speichern.
Jetzt wird es interessant
//if there are titles, build the content table
if($titles[1]){
$max = count($titles[1]);
$counter = 0;
$content_table = "Inhalt
";
foreach($titles[1] as $title):
if($counter >= ceil($max/2)){
$content_table .= "
";
$counter = 0;
}
$counter++;
$content_table .= '- '.$title.'
';
endforeach;
$content_table .= "
";
}
Wenn die richtigen Titel (also h3 in unserem Beispiel) vorhanden sind, wird die content_table zusammengebaut. Zuerst findet unsere Funktion heraus, wieviele Elemente vorhanden sind und baut dann einen DIV Container zusammen in dem die „ungeordnete Liste“ (ul Tags) untergebracht wird.
Sobald wir die Hälfte aller Elemente erreicht haben, wird die Liste geschlossen und eine neue begonnen. Das ist sinnvoll, wenn man die Tabelle in zwei Spalten aufteilen will.
Als nächstes kommen die „Zum Seitenanfang“ Links:
//add "back to top" links in headers
$content = preg_replace("|<".$in_tag.">(.*)|e", "'<'.$in_tag.' name=\"'.slug('$1').'\" id=\"'.slug('$1').'\">$1Zum Anfang'", $content);
Hier bedienen wir uns der Macht von regulären Ausdrücken (regular expressions) um Ordnung reinzubringen. Das ist wahrscheinlich der komplizierteste Teil des Codes.
Wenn Sie also nun diesen (vollständigen) Code in ihre functions.php platzieren und im Artikel an die Stelle, an der Sie die Inhaltstabelle haben möchten, einfach content_table tag=“X“ in eckige Klammern setzen (X entspricht hier dem Überschriftstag z.B. h3 und muss in doppelte Anführungszeichen gesetzt sein), erhalten Sie die schicke Inhaltstabelle.
Styling der Ausgabe mit CSS
Diese können Sie jetzt mit CSS noch etwas „anhübschen“ und fertig. In meinem Fall habe ich folgendes CSS verwendet:
/* styles für die automatische Content Table */
#content_table {
background:#fff;
border: 1px solid #ddd;
padding:10px;
margin-bottom:20px;
}
#content_table h3 {margin-top:5px;}
#content_table h3 a{visibility:hidden;}
#content_table ul li{
border:none;
list-style-type:none;
}
#content_table ul {border:none;}
a.backtop {
font-size: 10px;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
margin-left:20px;
}
Sourcecode zum Download
Da das Kopieren des Codes von der Webseite schon mal zu Fehlern führen kann, habe ich den Code in einer Textdatei gespeichert. Die Datei kann hier heruntergeladen werden:
Sourcecode content_table
Und nun viel Spaß mit der neuen Inhaltstabelle.
Quelle: wordpressthemescollection.com