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>
#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:
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:
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:
Damit verweist der Link Julius Cäsar nun auf den Anker #c auf unserer Glossar-Seite:
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.
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 🙂
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. }
Caspar, perfekt! Vielen Dank!
Vielen Dank. Das ist einer super Lösung, die für mich auch sicher umzusetzen ist.
@Georg Freut mich, schick’ doch mal einen Link, wenn du’s umgesetzt hast!
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.