Yoast’s FAQ schließbar & aufklappbar machen

Das tolle am FAQ Gutenberg Block: Es stellt strukturierte Schema Daten für FAQ bereit, um Rich-Ergebnisse in den Suchergebnissen darzustellen. Da der FAQ Block alle visuellen Änderungen vom verwendeten WordPress Theme erbt, haben wir etliche Möglichkeiten unseren FAQ Block vom Stil her anzupassen.

Die Yoast FAQ visuell verbessern

Der folgende und simple CSS Code sorgt dafür, dass die FAQ Blöcke visuell etwas besser aussehen und sind die Vorbereitung dafür, das Plugin aufklappbar zu machen.

Tipp: Du kannst den Code ganz einfach zur styles.css deines Themes hinzufügen.

/* colors & borders */
.wp-block-yoast-faq-block {
    border-top:1px solid #eee;
}
.wp-block-yoast-faq-block .schema-faq-question {
    border-bottom:1px solid #eee;
}
.wp-block-yoast-faq-block .schema-faq-question:hover,
.wp-block-yoast-faq-block .fcp-opened .schema-faq-question {
    background-color:#fafafa;
}
.wp-block-yoast-faq-block .schema-faq-answer,
.wp-block-yoast-faq-block .fcp-opened .schema-faq-answer {
    border-bottom:1px solid #eee;
}

/* layout */
.wp-block-yoast-faq-block .schema-faq-question {
    display:block;
    padding:10px;
    position:relative;
}
.wp-block-yoast-faq-block.fcp-faq .schema-faq-question {
    cursor:pointer;
}
.wp-block-yoast-faq-block .schema-faq-answer {
    margin:0;
    padding:12px 10px;
}

/* bullet before a question */
.wp-block-yoast-faq-block .schema-faq-question:before {
    /* position gap */
    margin-top:-2px;
}
.wp-block-yoast-faq-block .schema-faq-question,
.wp-block-yoast-faq-block .schema-faq-answer {
    padding-left:34px;
}
.wp-block-yoast-faq-block .schema-faq-question:before {
    content:'';
    display:block;
    border:2px solid #dedede;
    border-width:0px 2px 2px 0px;
    width:9px;
    height:9px;
    box-sizing:border-box;
    position:absolute;
    left:14px;
}
.wp-block-yoast-faq-block.fcp-faq .schema-faq-question:before {
    top:16px;
    transform:rotate(-45deg);
    transition:all 0.3s 0.3s ease;
}
.wp-block-yoast-faq-block .schema-faq-question:before,
.wp-block-yoast-faq-block.fcp-faq .fcp-opened .schema-faq-question:before {
    top:14px;
    transform:rotate(45deg);
}

/* transition */
.wp-block-yoast-faq-block.fcp-faq .schema-faq-answer {
    max-height:0;
    overflow:hidden;
    border-bottom-width:0;
    padding-top:0;
    padding-bottom:0;
    transition:padding-bottom 0.3s ease-in, max-height 0.4s ease-in, padding-top 0.1s 0.4s ease-out, border-bottom-width 0s 0.5s linear;
}
.wp-block-yoast-faq-block .fcp-opened .schema-faq-answer {
    max-height:9999px;
    border-bottom-width:1px;
    padding-top:12px;
    padding-bottom:20px;
    transition:padding-top 0.2s ease-in, max-height 0.3s 0.2s linear, padding-bottom 0.4s 0.2s ease;
}

Dieser Code wird dafür sorgen, dass deine FAQ wie folgt aussieht. Schriftart, Farbe und Größe werden allerdings von eurem WordPress Theme bestimmt.

Beispiel für die FAQ

Code um die Yoast FAQ schließbar zu machen.

Zusammen mit dem oben genannten CSS-Code, macht der folgende Javascript Code eine FAQ aufklappbar und schließbar. Der folgende Code muss in deinem Child-Theme ergänzt werden.

jQuery( document ).ready( function($) {

    $( '.wp-block-yoast-faq-block' ).addClass( 'fcp-faq' );
    $( '.wp-block-yoast-faq-block .schema-faq-question' ).click( function() {
        $( this ).parent().toggleClass( 'fcp-opened' );
    });

});

Alternativ kannst du den folgenden Code verwenden um die FAQ zu einem Akkordeon zu transformieren. Der Unterschied zwischen aufklappbar und dem Akkordeon ist, dass ein Akkordeon die zuvor geöffnete FAQ Box schließt.

jQuery( document ).ready( function($) {

    $( '.wp-block-yoast-faq-block' ).addClass( 'fcp-faq' );
    $( '.wp-block-yoast-faq-block .schema-faq-question' ).click( function() {
        $( '.fcp-opened' ).removeClass( 'fcp-opened' );
        $( this ).parent().addClass( 'fcp-opened' );
    });

});

Implementierung

WordPress bietet dir viele Möglichkeiten Front-End Code zu deiner Webseite hinzufügen. Wir empfehlen den Code in deinem Child Theme zu ergänzen, so dass dieser bei einem Update nicht verloren geht.

Für den Fall dass du nicht weißt, wie man folgende Codes implementiert, haben wir folgendes WordPress-Plugin geschrieben, um dir bei der Implementierung zu helfen.

Ein Hinweis

Wir haben diesen Code derzeit auf 30 Projekten in Verwendung. Lediglich in 4 Fällen gab es Komplikationen im FAQ-Block Verhalten, bei dem der ausgelieferte HTML Code etwas durch die Implementierungsmethode beschädigt wurde.

• Als der Gutenberg Editor als zusätzliches WordPress Plugin installiert wurde
• Innerhalb vom WP-Bakery PageBuilder. Wird Yoast FAQ im Gutenberg Editor innerhalb des PageBuilders verwendet, führt das zu fehlerhaften Schema Code.

Zur Kontrolle: Das korrekte HTML Layout

<div class="schema-faq wp-block-yoast-faq-block">
  <div class="schema-faq-section">
    <strong class="schema-faq-question">Question?</strong>
    <p class="schema-faq-answer">
      Answer
      <br>
      <br>
      Second paragraph
    </p>
  </div>
</div>

Fazit: Nutzt du den WordPress-Standard Gutenberg Editor, dann werden die strukturierten Daten auch korrekt von Yoast SEO generiert. Auch mit unseren Modifizierungen.

Beispiele für fehlerhaften HTML Code

Gutenberg Plugin:

<div class="schema-faq wp-block-yoast-faq-block">
  <div class="schema-faq-section">
    <strong class="schema-faq-question">Question</strong>
    <p></p>
    <p class="schema-faq-answer">Answer</p>
    <p>Second paragraph</p>
    <p></p>
  </div>
</div>

Gutenberg Block des WPBakery Page Builders:

<div class="schema-faq wp-block-yoast-faq-block">
  <div class="schema-faq-section">
    <p><strong class="schema-faq-question">Quesion?</strong></p>
    <p class="schema-faq-answer">Answer</p>
    <p>Second paragraph</p>
  </div>
</div>

Der Unterschied zwischen beiden Codes ist schnell gefunden. Damit unser Änderung am Yoast FAQ trotzdem korrekt umgesetzt wird, müssten wir Änderungen am CSS vornehmen. Aber wir haben auch eine einfachere Lösung gefunden:

jQuery( document ).ready( function($) {

    // change the WPBakery layout to common
    $( '.wp-block-yoast-faq-block p > .schema-faq-question' ).parent().replaceWith( function() {
        return $( '.schema-faq-question', this );
    });

    // change the Gutenberg plugin layout to common
    $( '.wp-block-yoast-faq-block p:empty' ).remove();

    // replace paragraphs break to <br>
    $( '.wp-block-yoast-faq-block .schema-faq-answer ~ p' ).each( function() {
        var $self = $( this ),
            $answer = $self.parent().children( '.schema-faq-answer' );
        $answer.html( $answer.html() + '<br><br>' + $self.html() );
        $self.remove();
    });
});

Der obige Code muss in der functions.php oder in deinen jeweiligen Child-Theme .js eingesetzt werden. Es wird den korrupten Code-Block aus dem WPBakery Page Builder Code entfernen, so dass dieser wieder wie im Ursprungszustand dargestellt wird.

Hinweis: Unser WordPress Plugin enthält diese Funktion bereits. Sie muss nicht extra ergänzt werden.