WordPress-Archivseiten für Kategorien und Schlagworte zeigen meist nur eine Beitragsliste, was für Nutzer und SEO oft unzureichend ist. Eine dynamische FAQ liefert sofort relevante Informationen und erhöht die Chance auf Rich Snippets in Google. Diese Anleitung erklärt, wie Sie mit ACF Pro eine FAQ in WordPress-Archivseiten integrieren und mit Schema.org-Daten optimieren.
Warum FAQ auf Archivseiten sinnvoll sind
Archivseiten in WordPress, insbesondere für Kategorien und Schlagworte, sind oft statisch und bieten lediglich eine Liste von Beiträgen zu einem bestimmten Thema. Das reicht jedoch häufig nicht aus, um Besucher länger auf der Seite zu halten oder ihnen die wichtigsten Fragen direkt zu beantworten. Eine gut strukturierte FAQ kann dabei helfen, die Benutzerfreundlichkeit erheblich zu verbessern und gleichzeitig das SEO-Ranking zu optimieren.
Sie können sich das Ergebnis auf unserer Website zum Beispiel auf der Archiv-Seite für das Themea DSGVO ansehen.
Vorteile einer FAQ auf Archivseiten
- Bessere Sichtbarkeit in Google durch Rich Snippets
Eine FAQ mit strukturierten Daten nach Schema.org kann in den Suchergebnissen als erweitertes Snippet (Rich Snippet) erscheinen. Das bedeutet, dass Google die Fragen und Antworten direkt in den Suchergebnissen anzeigen kann, was die Klickrate (CTR) erheblich steigert. - Verbesserte Nutzererfahrung
Nutzer erhalten sofort Antworten auf ihre häufigsten Fragen, ohne erst einzelne Beiträge durchsehen zu müssen. Dies reduziert die Absprungrate und erhöht die Verweildauer auf der Seite. - Stärkere interne Verlinkung
In der FAQ können relevante Inhalte oder Blogbeiträge direkt verlinkt werden. Dies verbessert nicht nur die Navigation für Besucher, sondern stärkt auch die SEO-Struktur der Website. - SEO-Vorteil durch strukturierte Daten
Durch die Einbindung von Schema.org-FAQ-Daten werden Suchmaschinen in die Lage versetzt, den Inhalt der FAQ besser zu interpretieren. Dadurch steigen die Chancen, dass die FAQ als hervorgehobenes Suchergebnis erscheint.
Voraussetzungen
Damit die FAQ erfolgreich implementiert werden kann, sind einige technische Voraussetzungen erforderlich. Zunächst benötigen Sie eine WordPress-Installation ab Version 5.8, um sicherzustellen, dass alle notwendigen Funktionen und Schnittstellen verfügbar sind. Zudem ist das Plugin Advanced Custom Fields Pro (ACF Pro) erforderlich, da es erweiterte Felder und das leistungsstarke Repeater-Feld bietet, das für die Verwaltung der FAQ genutzt wird.
Da Anpassungen an den Template-Dateien des Themes vorgenommen werden, wird dringend empfohlen, ein Child Theme zu verwenden. Dies verhindert, dass Ihre Änderungen durch zukünftige Updates des Haupt-Themes überschrieben werden. Zusätzlich sind grundlegende Kenntnisse in HTML, CSS und JavaScript von Vorteil, um das Layout anzupassen, die FAQ interaktiv zu gestalten und strukturierte Daten für Suchmaschinen korrekt zu implementieren. Auch ein grundlegendes Verständnis der WordPress-Template-Struktur erleichtert die Integration erheblich.
Voraussetzungen
- WordPress (ab Version 5.8)
- Advanced Custom Fields Pro (ACF Pro)
- Ein Child Theme für WordPress (damit Anpassungen erhalten bleiben)
- Grundlegende Kenntnisse in HTML, CSS und JavaScript
Wie man eine FAQ in Archivseiten integriert
Um eine dynamische FAQ auf Archivseiten hinzuzufügen, benötigen Sie Advanced Custom Fields Pro (ACF Pro). Damit lassen sich FAQ-Bereiche flexibel über das WordPress-Backend verwalten. Zusätzlich wird ein individuelles Template für die Archivseiten benötigt, in das der Code zur Darstellung der FAQ eingefügt wird.
Schritt 1: Erstellen eines Repeater-Felds für die FAQ in ACF Pro
Damit die FAQ flexibel verwaltet werden kann, nutzen wir das Repeater-Feld von Advanced Custom Fields Pro (ACF Pro). Dieses ermöglicht es, mehrere Frage-Antwort-Paare innerhalb eines einzigen Feldes zu speichern und einfach über das WordPress-Backend zu bearbeiten. Voraussetzung ist, dass ACF Pro bereits installiert und aktiviert ist.
Falls das Plugin noch nicht installiert ist, können Sie es über die offizielle ACF-Website erwerben und anschließend über das WordPress-Plugin-Menü hochladen und aktivieren.
1. Neue Feldgruppe erstellen
- Melden Sie sich in Ihrem WordPress-Backend an.
- Navigieren Sie zu Custom Fields > Feldgruppen.
- Klicken Sie auf „Neue Feldgruppe hinzufügen“ und vergeben Sie einen aussagekräftigen Namen, z. B. „FAQ für Archivseiten„.
2. Repeater-Feld anlegen
Klicken Sie auf „Feld hinzufügen„, um ein neues Feld innerhalb der Feldgruppe zu erstellen.
Wählen Sie unter Feldtyp die Option „Repeater“ aus.
Vergeben Sie einen eindeutigen Feldnamen (Slug), z. B. „archive_faq„.
Geben Sie eine Bezeichnung ein, z. B. „FAQ-Bereich„, damit das Feld im Backend verständlich benannt ist.
3. Unterfelder für Frage und Antwort hinzufügen
Innerhalb des Repeater-Feldes klicken Sie auf „Unterfeld hinzufügen“ und legen die folgenden Felder an:
- Frage
- Feldname: „archiv_frage“
- Feldtyp: „Text“
- Beschreibung: „Geben Sie die Frage ein, die in der FAQ erscheinen soll.“
- Antwort
- Feldname: „archiv_antwort“
- Feldtyp: „Textarea“
- Beschreibung: „Geben Sie die dazugehörige Antwort ein.“
4. Feldgruppe auf Kategorien und Schlagworte beschränken
- Scrollen Sie nach unten zum Abschnitt „Lage„.
- Wählen Sie unter „Regeln für die Anzeige dieser Feldgruppe“ die Option:
- Taxonomie ist gleich „Kategorien“
- Taxonomie ist gleich „Schlagwörter“
Dadurch wird sichergestellt, dass das FAQ-Feld nur auf den Seiten für Kategorien und Schlagworte erscheint und nicht auf einzelnen Beiträgen oder Seiten.
5. Speichern und testen
Klicken Sie oben rechts auf „Speichern“, um die neue Feldgruppe zu sichern.
Gehen Sie nun zu einem beliebigen Kategorie- oder Schlagwort-Archiv in WordPress (Beiträge > Kategorien oder Beiträge > Schlagwörter) und öffnen Sie eine vorhandene Kategorie. Sie sollten anschließend die neue FAQ-Sektion sehen, in der Sie Fragen und Antworten als Repeater-Feld hinzufügen können.
Jetzt ist das Repeater-Feld eingerichtet und kann mit dynamischen Fragen und Antworten gefüllt werden. Im nächsten Schritt wird erklärt, wie die FAQ auf der Website ausgegeben wird.
Schritt 2: FAQ in das WordPress-Archiv-Template einfügen
Öffnen Sie die Datei archive.php oder erstellen Sie ein eigenes Archiv-Template. Fügen Sie diesen Code ein:
<?php get_header(); ?>
<div class="archive-container">
<h1><?php single_cat_title(); ?></h1>
<?php if( have_rows('archive_faq') ): ?>
<div class="faq-container">
<?php while( have_rows('archive_faq') ): the_row(); ?>
<div class="faq-item">
<div class="faq-question"><?php the_sub_field('archiv_frage'); ?></div>
<div class="faq-answer"><?php the_sub_field('archiv_antwort'); ?></div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
<?php if (have_posts()) : ?>
<div class="post-list">
<?php while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="excerpt"><?php the_excerpt(); ?></div>
</article>
<?php endwhile; ?>
</div>
<?php the_posts_pagination(); ?>
<?php else : ?>
<p>Keine Beiträge gefunden.</p>
<?php endif; ?>
</div>
<?php get_footer(); ?>
Schritt 3: Gestaltung der FAQ mit CSS
Fügen Sie diesen CSS-Code in die Datei style.css oder unter „Zusätzliches CSS“ im WordPress-Customizer ein.
.repeater {
border-top: 1px solid #ddd;
}
.w-post-elm .repeater-row {
display: flex;
flex-direction: column;
margin: 0;
}
.w-post-elm .repeater-field.archiv_frage {
cursor: pointer;
font-size: 1.2em;
line-height: 1.4;
font-weight: 600;
padding: 1em 2.7em 1em 1.5em;
background-color: transparent;
color: #333;
transition: background-color 0.3s ease;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
border: none;
}
.w-post-elm .repeater-field.archiv_frage:hover {
background-color: #f5f5f5;
color: #000;
}
.w-post-elm .repeater-field.archiv_frage:before {
content: '';
position: absolute;
top: 36%;
right: 20px;
height: 0.55em;
width: 0.55em;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(135deg);
transition: transform 0.3s ease;
}
.w-post-elm .repeater-row.active .repeater-field.archiv_antwort {
max-height: 1000px;
padding: 1em 2.5em 1em 1.5em;
}
Schritt 4: Interaktive FAQ und strukturierte Daten mit JavaScript
Damit die interaktive FAQ reibungslos funktioniert, muss das JavaScript im Child-Theme eingebunden werden.
- Erstellen Sie eine neue Datei z. B. faq-accordion.js im Verzeichnis /wp-content/themes/IHR-CHILD-THEME/js/.
- Fügen Sie den folgenden JavaScript-Code in diese Datei ein.
document.addEventListener('DOMContentLoaded', function () {
const faqRows = document.querySelectorAll('.w-post-elm .repeater-row');
const faqData = [];
faqRows.forEach(row => {
const question = row.querySelector('.archiv_frage');
const answer = row.querySelector('.archiv_antwort');
if (question && answer) {
const questionText = question.textContent.trim();
const answerText = answer.textContent.trim();
faqData.push({
"@type": "Question",
"name": questionText,
"acceptedAnswer": {
"@type": "Answer",
"text": answerText
}
});
question.addEventListener('click', () => {
faqRows.forEach(otherRow => {
otherRow.classList.remove('active');
otherRow.querySelector('.archiv_antwort').style.maxHeight = '0';
});
answer.style.maxHeight = `${answer.scrollHeight}px`;
row.classList.add('active');
});
answer.style.maxHeight = '0';
}
});
if (faqData.length > 0) {
const script = document.createElement('script');
script.type = 'application/ld+json';
script.textContent = JSON.stringify({
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": faqData
});
document.head.appendChild(script);
}
});
- Öffnen Sie die functions.php des Child-Themes und fügen Sie folgenden Code hinzu:
// Javasript für FAQ der Taxonomien laden
function enqueue_faq_accordion_script() {
// Überprüfen, ob wir uns auf einer Archivseite befinden
if (is_archive() || is_category() || is_tag()) {
// JavaScript-Datei laden
wp_enqueue_script(
'faq-accordion', // Einzigartiger Name für das Skript
get_stylesheet_directory_uri() . '/js/faq-accordion.js', // Pfad zur Datei
array('jquery'), // jQuery als Abhängigkeit (nur wenn benötigt)
'1.0', // Version des Skripts
true // Im Footer laden
);
}
}
add_action('wp_enqueue_scripts', 'enqueue_faq_accordion_script');
- Speichern Sie die Datei und laden Sie die Seite neu, um sicherzustellen, dass das Skript geladen wird.
Schritt 5: FAQ für eine Kategorie oder ein Schlagwort anlegen
- Gehen Sie in WordPress zu Beiträge > Kategorien oder Beiträge > Schlagwörter.
- Klicken Sie auf eine vorhandene Kategorie oder ein Schlagwort oder erstellen Sie eine neue Kategorie.
- Scrollen Sie nach unten zu den zusätzlichen ACF-Feldern, die durch das vorher erstellte Repeater-Feld verfügbar sind.
- Klicken Sie auf „Eintrag hinzufügen“, um eine neue Frage-Antwort-Kombination zu erstellen.
- Tragen Sie die gewünschte Frage in das Feld „Frage“ ein.
- Geben Sie die dazugehörige Antwort im Feld „Antwort“ ein.
- Wiederholen Sie diesen Vorgang, falls Sie mehrere FAQ-Einträge hinzufügen möchten.
- Speichern Sie die Kategorie oder das Schlagwort.
- Jetzt sind die FAQs für die jeweilige Kategorie oder das Schlagwort hinterlegt und können im Frontend ausgegeben werden.
Theme-Integartion am Beispiel des Impreza-Themes
Das bei uns häufig im Einsatz befindliche Impreza-Theme basiert auf den WPBakery Page Builder und hat diesen durch eine benutzerfreundliche Möglichkeit ergänzt, eigene Felder über das Benutzerdefinierte Beitragsfeld einzubinden. Statt PHP-Code im Template zu hinterlegen, können Sie die FAQ direkt über das Impreza-Interface integrieren.
- Erstellen Sie das Repeater-Feld wie oben beschrieben in ACF Pro.
- Öffnen Sie den Bereich Page Templates von Impreza und erstellen Sie eine Vorlage für die Archivseiten.
- Fügen Sie das Element „Benutzerdefiniertes Beitragsfeld“ hinzu.
- Tragen Sie als Feldname archive_faq ein.
- Unter Theme-Optionen > Archivlayout wählen Sie das erstellte Page Template.
- Verwenden Sie den folgenden JavaScript-Code für Ihre Datei faq-accordion.js:
document.addEventListener('DOMContentLoaded', function () {
const faqRows = document.querySelectorAll('.w-post-elm .repeater-row');
const faqData = []; // Array für die strukturierten Daten
faqRows.forEach(row => {
const question = row.querySelector('.archiv_frage');
const answer = row.querySelector('.archiv_antwort');
if (question && answer) {
// Frage und Antwort auslesen
const questionText = question.textContent.trim();
const answerText = answer.textContent.trim();
// Strukturierten Daten hinzufügen
faqData.push({
"@type": "Question",
"name": questionText,
"acceptedAnswer": {
"@type": "Answer",
"text": answerText
}
});
// Höhe der Antwort berechnen
const answerHeight = answer.scrollHeight;
// Klick-Event hinzufügen
question.addEventListener('click', () => {
const isActive = row.classList.contains('active');
// Alle anderen FAQs schließen
faqRows.forEach(otherRow => {
const otherAnswer = otherRow.querySelector('.archiv_antwort');
if (otherRow !== row) {
otherAnswer.style.maxHeight = '0';
otherRow.classList.remove('active');
}
});
if (isActive) {
// Aktuelle FAQ schließen
answer.style.maxHeight = '0';
row.classList.remove('active');
} else {
// Aktuelle FAQ öffnen
answer.style.maxHeight = `${answerHeight}px`;
row.classList.add('active');
}
});
// Initial max-height auf 0 setzen
answer.style.maxHeight = '0';
}
});
// JSON-LD-Skript erstellen und einfügen
if (faqData.length > 0) {
const script = document.createElement('script');
script.type = 'application/ld+json';
script.textContent = JSON.stringify({
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": faqData
});
document.head.appendChild(script);
}
});
- Hier ein Beispiel unserer CSS-Anpassungen für das FAQ-Accordion:
/* FAQ-Container */
.repeater {
border-top: 1px solid var(--color-content-border);
}
.w-post-elm .repeater-row {
display: flex;
flex-direction: column; /* Frage und Antwort untereinander */
margin: 0; /* Kein äußerer Abstand */
}
/* Fragen-Design */
.w-post-elm .repeater-field.archiv_frage {
cursor: pointer;
font-size: var(--sections-title-size);
line-height: var(--h3-line-height);
font-weight: var(--h1-font-weight);
padding: 1em 1.5em; /* Innenabstand für bessere Lesbarkeit */
background-color: transparent; /* Transparenter Hintergrund */
color: var(--color-content-heading); /* Dunkle Schriftfarbe */
transition: background-color 0.3s ease; /* Hintergrundfarbe beim Hover ändern */
position: relative;
display: flex;
align-items: center;
justify-content: space-between; /* Platz für Chevron rechts */
border: none; /* Kein Rand */
}
/* Frage-Hover-Effekt */
.w-post-elm .repeater-field.archiv_frage:hover {
background-color: var(--color-alt-content-bg); /* Farbe beim Hover */
color: var(--color-alt-content-heading);
}
/* Chevron-Pfeil: Standardzustand (nach unten) */
.w-post-elm .repeater-field.archiv_frage:before {
content: ''; /* Chevron erstellen */
position: absolute;
top: 36%; /* Vertikale Zentrierung */
right: 20px; /* Position rechts */
height: 0.55em; /* Dicke der Chevron-Linie */
width: 0.55em; /* Länge der Chevron-Linie */
border-top: 2px solid currentColor; /* Obere Linie des Pfeils */
border-right: 2px solid currentColor; /* Rechte Linie des Pfeils */
transform: rotate(135deg); /* Chevron zeigt nach unten */
transition: transform 0.3s ease; /* Sanfte Rotation */
}
/* Chevron-Pfeil: Aktivzustand (nach oben) */
.w-post-elm .repeater-row.active .repeater-field.archiv_frage:before {
transform: rotate(-45deg); /* Chevron zeigt nach oben */
}
/* Antworten-Design */
.w-post-elm .repeater-field.archiv_antwort {
max-height: 0; /* Standardmäßig geschlossen */
overflow: hidden;
padding: 0 1.5em; /* Kein Innenabstand standardmäßig */
background-color: var(--color-content-bg-alt); /* Weißer Hintergrund */
border-bottom: 1px solid var(--color-content-border); /* Rand um die Antwort */
transition: max-height 0.3s ease, background-color 0.3s ease; /* Sanftes Ein-/Ausblenden */
margin: 0; /* Kein äußerer Abstand */
}
/* Antwort aktiv anzeigen */
.w-post-elm .repeater-row.active .repeater-field.archiv_antwort {
max-height: 1000px!important; /* Platzhalter für dynamische Höhe */
padding: 1em 1.5em!important; /* Innenabstand sichtbar machen */
}
.repeater-row.active .repeater-field.archiv_frage {
background-color: var(--color-alt-content-bg);
color: var(--color-alt-content-heading);
}
/* Abstand unter Paginierung */
.g-loadmore {
min-height:0;
}
Fazit
Durch die Ergänzung von WordPress-Archivseiten mit einer SEO-optimierten FAQ verbessern Sie die Nutzerfreundlichkeit und das Google-Ranking. Die FAQ kann als Rich Snippet in den Suchergebnissen erscheinen, Besucher finden schneller relevante Informationen und die Verweildauer auf den Archivseiten erhöht sich. Diese Lösung ermöglicht eine dynamische und SEO-optimierte FAQ, die sich einfach über ACF Pro verwalten lässt.
Mit dieser Anleitung können Sie eine interaktive, SEO-optimierte FAQ in WordPress-Archivseiten integrieren – entweder allgemein mit ACF Pro oder speziell mit den Funktionen des Impreza-Themes.