WordPress FSE – Fehlverhalten bei Sticky Header on Mobiles

trinidad scorpion 6302895 1920
Foto von Gabriele Lässer

So kommt der der sticky Header in die Templates:

<!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"},"spacing":{"blockGap":"0"}},"backgroundColor":"base","layout":{"type":"default"}} -->
<div id="site-header" class="wp-block-group has-base-background-color has-background">
    <!-- wp:template-part {"slug":"header","theme":"mytheme","tagName":"header","className":"site-header"} /-->
</div>
<!-- /wp:group -->

Beim Umschalten auf die Browser-Testeinstellung für Mobile Devices fiel mir auf, dass der Sticky Header in meinem Theme beim Scrollen verschwand. Das passierte hingegen nicht, wenn ich nur das Browserfenster ganz schmal machte.

Den #site-header.is-position-sticky in der CSS – Datei mit top:0 oben zu fixieren klappte zwar, der Header blieb stehen. Das allerdings machte er das nicht gleich, sondern tauchte ein Stück weit unter den oberen Browserrand. Das sah nicht schön aus.

Offenbar lässt sich das aber über geeignete Viewport-Parameter verhindern.

"height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, target-densitydpi=device-dpi"

Quelle stack overflow

Blockthemes bekommen von WordPress Ihr viewport Tag über wp-includes/block-template.php, hier das Snippet.

/**
 * Renders a 'viewport' meta tag.
 *
 * This is hooked into {@see 'wp_head'} to decouple its output from the default template canvas.
 *
 * @access private
 * @since 5.8.0
 */
function _block_template_viewport_meta_tag()
{
	echo '<meta name="viewport" content="width=device-width, initial-scale=1" />' . "\n";
}
add_action('wp_head', '_block_template_viewport_meta_tag', 0);

Nun möchte man meinen, dass

remove_action('wp_head', '_block_template_viewport_meta_tag', 0);

das viewport-Tag entfernt, und man anschließend sein eigenes reinhängen kann. Ich hab‘ verschiedenes versucht, auch als Funktion über den init-Hook. Was funktioniert, um das viewport-Tag loszuwerden ist:

add_action('pre_get_posts', function() {
    remove_action('wp_head', '_block_template_viewport_meta_tag', 0);
});

Nachfolgender Viewport-Tag behebt die Verschiebung auf Mobiles, und der Header bleibt tatsächlich an Ort und Stelle „sticky“. top:0 im CSS zu verwenden ist hierfür nicht erforderlich und wäre der original-Positionierung, mit der ggf. die admin-bar einbezogen wird, nicht zuträglich.

add_action('wp_head', function()
{
    echo '<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, target-densitydpi=device-dpi">';
});

Quelle core.trac.wordpress.org

Eine Alternative zur PHP-Lösung ist das Umschreiben über ein kleines Javascript.

window.onload = function() {
    document.querySelector("meta[name=viewport]").setAttribute("content", "height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, target-densitydpi=device-dpi");
};

Das Beispiel stammt aus der Entwicklung eines Block-Themes. Für classic Themes sollte allerdings die Javascript-Lösung ebenfalls funktionieren.

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden. Die Angabe einer E-Mail-Adresse und eines Namens ist nicht erforderlich. Einen (Spitz)-Namen zu nennen wäre aber doch nett.

Schreibe einen Kommentar

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

Hinweis: Sowohl angegebener Name als auch E-Mail-Adresse (beides ist optional, dafür werden alle Kommentare vor Veröffentlichung geprüft) werden dauerhaft gespeichert. Du kannst jeder Zeit die Löschung Deiner Daten oder / und Kommentare einfordern, direkt über dieses Formular (wird nicht veröffentlicht, und im Anschluss gelöscht), und ich werde das umgehend erledigen. – Mit hinterlassenen Kommentaren hinterlegte IP-Adressen werden nach zwei Monaten automatisch gelöscht

publicly queryable