Accordion Element automatisch aus Text generieren

Javascript Accordion

Bei der Programmierung einer Webseite für einen Kunden war es unter anderem die Aufgabe, die Seiten mit Text zu befüllen. Für die meisten der 300 Unterseiten sollten wir ein FAQ in Form eines Akkordeons anlegen. Da die FAQ’s sehr viele Einträge hatten, war es zu umfangreich ein Plug-in zu nutzen, wo man für jeden Eintrag Überschrift und Inhalt einzeln reinkopieren muss. Bei 300 Seiten und jeweils ca. 20 Einträge wäre das 6000-mal Copy & Paste gewesen. Deshalb haben wir ein JS Snippet geschrieben, das uns die Arbeit ein wenig erleichtert.

Der Code überprüft, ob es auf der Seite ein DIV mit der ID “accordeon” gibt. In dem DIV müssen Überschriften als H3 deklariert sein und normaler Text. Aus jedem H3 & Text wird ein Accordion erstellt. Der Vorteil hierbei ist das man seinem Texter, der Texterin oder ChatGPT einfach die Anweisung gibt den Text entsprechend zu formatieren. Dann kopiert man den Text einfach nur noch in das dafür vorgesehene Feld.

<div id="accordeon">
<h3>Überschrift</h3>
<p>Text</p>
<h3>Überschrift</h3>
<p>Text</p>
<h3>Überschrift</h3>
<p>Text</p>
</div>

FAQ Schema (Rich Snippet)

Das JS Snippet erstellt für das Accordion zudem ein FAQ-Schema. Ein FAQ-Schema ist gut für SEO, weil es Suchmaschinen hilft, den Inhalt der Seite besser zu verstehen und relevante Antworten direkt in den Suchergebnissen anzuzeigen, was die Klickrate erhöht. Es verbessert die Nutzererfahrung, indem es schnell zugängliche und strukturierte Informationen bietet, die häufige Fragen beantworten. Zudem kann es die Sichtbarkeit und die Platzierung der Website in den Suchergebnissen verbessern, da es Rich Snippets ermöglicht, die mehr Aufmerksamkeit erregen.

Optimierter Code

Der Code überprüft ob es auf der angezeigten Seiten ein DIV mit der ID accordeon gibt. Ist das nicht der Fall wird die Ausführung des Codes verhindert.

Vorschau:

Code in die eigene Webseite einfügen

Wir haben den Code als Funktion für WordPress geschrieben. Um ihn in Deine Webseite einzubauen solltest du ein Child Theme installiert haben. Dann kopierst du den Code einfach in die functions.php und das CSS in die styles.css. Alternativ kannst du auch ein Plug-in wie WPCode nutzen.