Tutorial: Einfaches Glossar ohne Plugin

Note: Content might be outdated!

Ein Glossar mit WordPress erstellen, wie geht das? Die Frage erreichte mich dieser Tage in einer Email. Natürlich gibt es Plugins für alles, aber in diesem Fall sieht es mit gut gepflegten Lösungen recht sparsam aus im Plugin-Verzeichnis. Und muss wirklich immer gleich ein Plugin her? Ich finde, ein System wie WordPress hat es verdient, dass man die Bordmittel ausreizt.


Inhalt


Zielsetzung

Unter einem Glossar soll hier eine einfache alphabetisch geordnete Begriffssammlung verstanden werden, auf die manuell (und möglichst einfach, ohne jedes Mal das Linkziel nachzuschlagen) verlinkt werden kann.

Einschränkungen

Die High-end-Version eines Glossars würde einzelne Begriffe z.B. als Einträge eines Custom Post Type sammeln, sowie sämtliche Inhalte der Website (Artikel, Seiten) automatisch nach diesen Begriffen filtern und die entsprechenden Links setzen.

Das machen wir hier nicht. 😉

Wir erstellen eine Seite mit alphabetisch geordneten Überschriften, zu denen wir manuell verlinken können. Dem Benutzer wird ein Minimum an Scrollen zugemutet. Nicht unbedingt ein RollsRoyce von einem Glossar, aber für kleinere Bedarfsfälle (und Budgets) sicher ausreichend.

1. Struktur

Hier muss einmalig der HTML-Tab im Editor bemüht werden. Wir brauchen Überschriften mit Ankern, und die kann man im Editor nur in HTML direkt einfügen.

<h3 id="glossar-a">A</h3>
<h3 id="glossar-b">B</h3>
<h3 id="glossar-c">C</h3>
<h3 id="glossar-d">D</h3>
<h3 id="glossar-e">E</h3>
<h3 id="glossar-f">F</h3>
<h3 id="glossar-g">G</h3>
<h3 id="glossar-h">H</h3>
<h3 id="glossar-i">I</h3>
<h3 id="glossar-j">J</h3>
<h3 id="glossar-k">K</h3>
<h3 id="glossar-l">L</h3>
<h3 id="glossar-m">M</h3>
<h3 id="glossar-n">n</h3>
<h3 id="glossar-o">O</h3>
<h3 id="glossar-p">P</h3>
<h3 id="glossar-q">Q</h3>
<h3 id="glossar-r">R</h3>
<h3 id="glossar-s">S</h3>
<h3 id="glossar-t">T</h3>
<h3 id="glossar-u">U</h3>
<h3 id="glossar-v">V</h3>
<h3 id="glossar-w">W</h3>
<h3 id="glossar-x">X</h3>
<h3 id="glossar-y">Y</h3>
<h3 id="glossar-z">Z</h3>
Da WordPress für das Suchfeld standardmäßig die ID „s“ verwendet und manche Themes dieses Feld in ihren CSS-Stilvorgaben auch einfach nur als #s anstatt input#s referenzieren, sollten die IDs der Überschriften mit einem Präfix versehen werden. Z.B. : <h3 id="glossar-s">Das Präfix selbst spielt lediglich für die spätere Verlinkung eine Rolle und vermeidet Überschneidungen mit bereits vorhandenen CSS-Deklarationen.
(Danke für den Hinweis @Stefan!)

2. Format

Um dem Benutzer (und der Suchmaschine übrigens auch) einen leichten Überblick über das Glossar zu ermöglichen, sollten wir unbedingt  ein bestimmtes Format wählen und danach auch beibehalten. Das ideale Format wäre natürlich eine Definitionsliste, also so etwas wie

<dl>
	<dt>Begriff</dt>
	<dd>Begriffserklärung</dd>
</dl>

Dieses HTML-Listenformat ist speziell für Begriffserklärungen konzipiert:

  • <dl> = definition list = macht kenntlich: es handelt sich um Definitionen
  • <dt> = definition term = der zu definierende Begriff
  • <dd> = definition definition = die Definition des voran stehenden Begriffs

Leider unterstützt der visuelle Editor in WordPress dieses Listenformat nicht von alleine, daher greife ich hier auf ein Format zurück, das für jede/n Anwender/in mit den Grundfunktionen des Editors umsetzbar ist:

<h4>Begriff</h4>
Begriffserklärung

Im visuellen Editor sieht das dann so aus:

Glossar mit WordPress-Bordmitteln: Formatierung der Begriffssammlung
Glossar mit WordPress-Bordmitteln: Formatierung der Begriffssammlung

3. Begriffe einfügen

Nun kommt die Fleißarbeit: Begriffe und Begriffserklärungen in alphabetischer Reihenfolge. 😉

<h3 id="glossar-a">A</h3>
<h4>Anastasia</h4>
<p>Russiche Zarentochter ungeklärter Abstammung.</p>
<h3 id="glossar-b">B</h3>
<h4>Bastian Balthasar Bux</h4>
<p>Romanfigur von Michael Ende in Die unendliche Geschichte.</p>
<h3 id="glossar-c">C</h3>
<h4>Cäsar</h4>
<p>Gaius Julius, römischer Imperator, der ganz Gallien besetzt hatte. Ganz Gallien?</p>

Bzw. im visuellen Editor:

Glossar mit WordPress-Bordmitteln: Eingabe der Begriffe
Glossar mit WordPress-Bordmitteln: Eingabe der Begriffe

4. Verlinken

Wann immer wir nun in einem Artikel von einem Begriff auf dessen Erklärung im Glossar verlinken wollen, verlinken wir auf die Glossarseite und fügen den Anker der alphabetischen Überschrift hinzu:

Glossar mit WordPress-Bordmitteln: Verlinkung
Glossar mit WordPress-Bordmitteln: Auswahl der zu verlinkenden Glossar-Seite und manuelle Eingabe des Ankers #c

Damit verweist der Link Julius Cäsar nun auf den Anker #c auf unserer Glossar-Seite:

Glossar mit WordPress-Bordmitteln: Linkziel mit Anker
Glossar mit WordPress-Bordmitteln: Linkziel mit Anker #c verweist auf die Überschrift C im Glossar, unter welcher Cäsar als (noch) einziger Begriff zu finden ist.

Fazit

Wird die Begriffssammlung umfangreicher, sollte man auf jeden Fall eine dynamische Lösung mittels Plugin in Erwägung ziehen: Zu umständlich und verwirrend wäre es für den Benutzer, wenn er einen Link ins Glossar anklickte, im alphabetischen Bereich von z.B. C landete und dann noch ellenlang scrollen müsste, bis der eigentlich gesuchte Begriff Cäsar erreicht wäre.

Solange die Begriffssammlung übersichtlich bleibt und jedem alphabetischen Bereich nur wenige Begriffe zugeordnet sind, lässt sich ein Glossar in WordPress jedoch ohne Weiteres mit Bordmitteln umsetzen.

6 reactions on “Tutorial: Einfaches Glossar ohne Plugin

  1. Stefan sagt:

    Vielen Dank für die tolle Info – für ein kleines Glossar absolut schnell und mit einfachen Mitteln umgesetzt. Das Problem das ich habe ist folgendes:

    Ab dem Buchstaben R-T werden die Buchstaben verschoben – Beispiel siehe hier:

    http://www.schluss-mit-haarausfall.de/haarausfall-lexikon/

    Gibt es eine einfache Lösung?

    Dankeschön 🙂

    1. Caspar sagt:

      Ja, gibt es, Artikel ist entsprechend aktualisiert. Sofern es sich um ein eigenes oder ein Child-Theme handelt und keine Gefahr besteht, dass Änderungen in den Theme-Dateien bei einem Update verloren gehen, kann alternativ auch die Datei style.css bearbeitet werden. Überall, wo #s { …etc. } steht, einfach das HTML-Element des Suchfelds mit dazu setzen: input#s { …etc. }

  2. Stefan sagt:

    Caspar, perfekt! Vielen Dank!

  3. Georg sagt:

    Vielen Dank. Das ist einer super Lösung, die für mich auch sicher umzusetzen ist.

    1. Caspar sagt:

      @Georg Freut mich, schick’ doch mal einen Link, wenn du’s umgesetzt hast!

  4. Peter sagt:

    Der Hinweis bringt mich auf eine Idee, die ich vielleicht in einem neuem Projekt verwenden kann. Auf jeden Fall (gleich ob es klappt oder nicht) vielen Dank, dass Ihr Euch solche Gedanken macht.

Reactions are closed.