h1-Tag in der WordPress Sidebar

Das ursprüngliche Blogsystem WordPress wurde in den letzten Jahren immer mehr zum vollwertigen CMS ausgebaut und erfreut sich heuer auch im Bereich der Unternehmenswebseiten einer grossen Beliebtheit. Zum einen liegt das wohl daran, dass die redaktionelle Bedienung schnell erlernbar ist, zum anderen sicherlich an der grossen Flexibilität des Systems. Eine Vielzahl an verfügbaren Plugins sorgt für nahezu unbegrenzte Erweiterungsmöglichkeiten und in Kombination mit der ebenfalls schier unendlichen Anzahl an bereits fertigen Themes, lässt sich mit vergleichsweise wenig Aufwand, eine funktionale und ansprechende Webseite erstellen. Wie jedes System hat aber auch WordPress seine Tücken und der Teufel liegt manchmal im Detail. Bei der Überprüfung einiger Details im Zusammenhang mit SEO ist uns aufgefallen, dass alle Überschriften in der Sidebar der betreffenden Seite <h1>, also Überschriften erster Ordnung, sind. Dieses Verhalten ist vom jeweiligen Theme vorgegeben und im konkreten Fall erhält jedes zur Sidebar hinzugefügte Widget eben einen h1-Tag.

Nun ist die Struktur einer Webseite aber nicht nur aus visuellen oder User Experience-Gründen relevant, sondern auch für gängige Suchmaschinen. Und der h1-Tag ist nach wie vor ein relevanter Parameter wenn es darum geht, einer Suchmaschine Auskunft über den Inhalt einer Webseite zu geben. Verwendet man mehrere Überschriften erster Ordnung, führt das im schlechtesten Fall zur „Verwirrung“ der Suchmaschine und damit dazu, dass die eigenen Inhalte entweder gar nicht, schlecht oder im falschen Zusammenhang gefunden werden. Bei einem vorgefertigten WordPress-Theme hat man allerdings nur bedingt Einfluss auf die Auszeichnung der verschiedenen Elemente. Wurde bei der Entwicklung des Themes aus irgendeinem Grund entschieden die Widget-Titel mit h1-Tags auszuzeichnen, hat das eben zur Folge, dass auf einer Seite nicht nur eine, sondern gleich mehrere Überschriften erster Ordnung zu finden sind.

Der Folgende Code-Schnipsel zeigt, wie das Sidebar-Widget, in diesem Fall ein Kalender, im HTML-Code der Seite aussieht.

<aside id="calendar-2" class="widget widget_calendar">
<h1 class="widget-title">Archives</h1>
<div id="calendar_wrap" class="calendar_wrap">
.
.
.
</div>
</aside>

Je mehr Widgets in der Sidebar geladen werden, desto mehr <h1>-Tags ergeben sich also.

Wie bekomme ich den h1-Tag aus der Sidebar?

Eine Möglichkeit wäre, den entsprechenden Part im Source-Code des Themes zu suchen und dort die <h1>-Tags zu ersetzen. Sollte das ursprüngliche Theme allerdings upgedated werden, würden diese Änderungen überschrieben und müssten anschliessend erneut hinzugefügt werden. Besser ist es daher, wenn man mit einem Child-Theme arbeitet und in dessen function.php eine entsprechende Anweisung hinterlegt. In unserem Fall fügen wir eine Filterfunktion hinzu, die den Inhalt des angesprochenen Elements während der Laufzeit – also dann wenn der Code im Browser ausgeführt wird – verändern kann. In unserem Fall empfiehlt es sich übrigens, auf Überschriften komplett zu verzichten, weshalb der h1-Tag durch einen <span>-Tag ersetzt werden soll.

function filter_sidebar_widget_title( $params ) {
// hier passiert die Magie...
$params[0]['before_title'] = '<span class="widget-title">' ;
$params[0]['after_title'] = '</span>' ;

return $params;
};

Um den Filter überhaupt und vor allem an der richtigen Stelle anzuwenden, muss die neue Funktion noch aufgerufen werden. Dies geschieht mit:

// Filter anwenden
add_filter( 'dynamic_sidebar_params', 'filter_sidebar_widget_title', 10, 3 );

Wobei ‚dynamic_sidebar_params‘ der Hook ist, also die Stelle die im Source Code definiert wo wir unsere neu erstellte Filterfunktion filter_sidebar_widget_title‘ einhaken.

Weiterführende Informationen:

Wer das Prinzip in Gänze verstehen will, dem Sei die offizielle Dokumentation zu WordPress Filtern ans Herz gelegt. Die Beschreibung zum verwendeten Hook gibt es hier. Wer einen Schritt vorher einsteigen will, findet die wichtigsten Infos zu WordPress Child-Themes im offiziellen WordPress Child-Theme-Codex.

2 Kommentare zu “h1-Tag in der WordPress Sidebar

  1. Hallo,
    Bei mir hat es gut funktioniert, mit der Ausnahme des obersten Titels im Sidebar:
    xxx Basel
    bleibt so.

    (WP 4.9.8, Theme twenty fourteen)
    Code in functions.php (Child):
    // H1 aus Widget-Area entfernen
    function filter_sidebar_widget_title( $params ) {
    // hier passiert die Magie…
    $params[0][‚before_title‘] = “ ;
    $params[0][‚after_title‘] = “ ;
    return $params;
    };
    // Filter anwenden
    add_filter( ‚dynamic_sidebar_params‘, ‚filter_sidebar_widget_title‘, 10, 3 );

    Eine Idee?
    Danke im Voraus!

    • Hallo Urs,
      ohne einen Blick darauf zu werfen ist, dass schwer zu sagen. Vielleicht wird die H1 an dieser Stelle nicht als Widget Title aufgerufen, sondern ist im Widget anders definiert? Dies könnte vor allem der Fall sein, wenn es sich um ein externes Plugin handelt.
      Bei Deiner Funktion werden übrigens explizit keine „Tags“ für den Titel definiert. Ich nehme an, dass das so beabsichtigt ist. Andernfalls kann man daraus z.B. immer auch ein „unverfängliches“ span-Element machen…
      Viele Grüsse und viel Erfolg bei Deinem Projekt.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.