Da ich mein aktuelles Projekt mit dem neuen Thema erst einmal gestoppt habe, kann ich auch wieder über andere Themen zu schreiben. Diese Woche möchte ich über ein wichtiges globales HTML-Attribut schreiben: das lang-Attribut.
Vielleicht haben einige von euch dieses Attribut noch nie (aktiv) verwendet, aber es ist ziemlich wichtig. Es teilt nicht nur Suchmaschinen mit, in welcher Sprache der Inhalt eurer Website verfasst ist, sondern auch einer „Assistive Technology“ wie einem Screenreader, welche Stimme es beim Lesen des Textes verwenden soll. Es kann sogar „inline“ für ein einzelnes Wort oder Teile eines Textes gesetzt werden.
Das wichtigste lang Attribut wird aber im <html> Tag gesetzt. In WordPress wird das durch die Funktion language_attributes() erledigt, die man normalerweise in der Datei header.php eines klassischen Themes finden. In einem Block-Theme wird dies automatisch im Core erledigt.
Gründe für das Überschreiben des lang-Attributs
Normalerweise möchten man den Wert des lang Attributs nicht ändern, da WordPress immer den richtigen Wert verwendet, je nach Spracheinstellung eurer Website. Es gibt aber auch Fälle, in denen man es ändern möchte.
Mehrsprachige Websites
WordPress kann nur eine Frontend-Sprache haben, es sei denn, man installieren ein Plugin für Mehrsprachigkeit. Ich verwende MultilingualPress, welches auf Multisite basiert. In einer WordPress-Multisite kann man die Sprache für jede Unterseite festlegen. Dadurch wird automatisch das richtige lang Attribut in jeder Site verwendet.
Wenn deine Website kein Mehrsprachigkeit-Plugin verwendet, du aber eine Seite mit einer anderen Sprache hast, kannst du das lang Attribut mit etwas Code überschreiben.
Laden von externem Code
Ein weiterer Anwendungsfall ist die Verwendung von Plugins, die das lang Attribut zum Laden externer Daten verwenden. Ich bin diese Woche auf ein Cookie-Banner-Plugin gestoßen, das den Text für das Banner von einer externen Ressource lädt. Es hat den genauen Wert des lang Attributs verwendet. Dabei hat aber es einen Wert wie en erwartet, also einen Wert mit nur zwei Zeichen. WordPress verwendet jedoch einen Wert wie en-US, was für dieses Cookie-Banner nicht funktionieren würde. Wir müssen also den zweiten Teil des Wertes entfernen.
CSS verwendet das Attribut
Ein gutes Beispiel für einen Anwendungsfall in CSS ist die quotes Eigenschaft. In verschiedenen Sprachen werden unterschiedliche Anführungszeichen verwendet. Wenn man die richtigen Anführungszeichen in einem <q> HTML Tag verwenden möchte, muss man normalerweise nichts tun. Der Browser übernimmt dies für einen, weil der Wert auf quotes: auto gesetzt ist. Wenn man das überschreiben will, kann man Folgendes tun:
q {
quotes: "«" "»" "‹" "›";
}
Dies würde immer die Anführungszeichen verwenden, die im Französischen und anderen Sprachen verwendet werden, auch wenn das lang Attribut auf en gesetzt ist.
Einige CSS-Bibliotheken verwenden das lang Attribut wie folgt, um Stile zu ändern:
[lang="en"] q {
/* Some styles */
}
Dies würde nicht funktionieren, wenn der Wert für das lang Attribut auf en-US gesetzt ist. Es gibt allerdings die CSS-Pseudoklasse :lang(), mit der es funktionieren würde:
:lang(en) {
/* Some styles */
}
Wenn man hier en verwenden, würde es auch für die Werte en-US, en-GB, usw. funktionieren. Aber wenn man es auf en-US setzt, würde es umgekehrt nicht auch nur für den Wert en funktionieren.
Da das CSS in einem solchen Framework statisch sein könnte, wäre das Überschreiben vielleicht etwas zu kompliziert. In diesen Fällen möchte man einfacher den Wert des globalen lang Attributs des <html> Tags ändern.
Wie ändert man den Wert?
Angenommen, wir wollen den Wert für eine bestimmte Seite auf einen anderen statischen Wert ändern, dann könnte man es wie folgt umsetzen:
function my_static_lang_attribute( $output ) {
$object = get_queried_object();
if ( $object && str_contains( $object->post_name, 'english' ) ) {
return 'lang="en-US"';
}
return $output;
}
add_filter( 'language_attributes', 'my_static_lang_attribute' );
Dies würde das lang Attribut des <html> Tags für jede Seite und jeden Beitrag mit „english“ im Permalink mit lang="en-US" überschreiben.
Wie man aus der Funktion herauslesen kann, würde der Filter nicht nur den Wert, sondern auch den Namen des Attributs zurückgeben. Wenn man sich den vollständigen Code der Funktion get_language_attributes ansieht, wird klar, dass die Funktion auch andere Attribute wie dir zurückgeben kann:
function get_language_attributes( $doctype = 'html' ) {
$attributes = array();
if ( function_exists( 'is_rtl' ) && is_rtl() ) {
$attributes[] = 'dir="rtl"';
}
$lang = get_bloginfo( 'language' );
if ( $lang ) {
if ( 'text/html' === get_option( 'html_type' ) || 'html' === $doctype ) {
$attributes[] = 'lang="' . esc_attr( $lang ) . '"';
}
if ( 'text/html' !== get_option( 'html_type' ) || 'xhtml' === $doctype ) {
$attributes[] = 'xml:lang="' . esc_attr( $lang ) . '"';
}
}
$output = implode( ' ', $attributes );
/**
* Filters the language attributes for display in the 'html' tag.
*
* @since 2.5.0
* @since 4.3.0 Added the `$doctype` parameter.
*
* @param string $output A space-separated list of language attributes.
* @param string $doctype The type of HTML document (xhtml|html).
*/
return apply_filters( 'language_attributes', $output, $doctype );
}
Plugins könnten sich ebenfalls in diesen Filter einhängen, womit das Überschreiben von $output mit etwas Statischem möglicherweise nicht funktioniert. Unglücklicherweise gibt es auch keinen Filter, der nur den $lang Wert ändert, und ein Hook in get_bloginfo(), um die Sprache zu überschreiben, könnte an einigen anderen Stellen zu Problemen führen, an denen dieser Code verwendet wird. Wenn man den zweiten Teil des Wertes entfernen will, könnten man aber einen regulären Ausdruck wie diesen verwenden:
function my_dynamic_lang_attribute( $output ) {
return preg_replace( '/lang="(\w+)([^"]+)"/', 'lang="$1"', $output );
}
add_filter( 'language_attributes', 'my_dynamic_lang_attribute' );
Wenn man etwas noch Komplexeres benötigen, ist es wahrscheinlich am besten, einfach die gesamte Funktion zu überschreiben.
Fazit
Das lang Attribut ist ein sehr wichtiges Attribut, das jede Website immer setzen sollte. Aber der Wert ist vielleicht nicht immer so, wie man ihn brauchen. Für diese Fälle gibt es einen Filter, mit dem der Wert überschrieben werden kann. Dabei sollte man aber immer darauf achten, dass man keinen ungültigen Wert zurückgibt.