WordPress FSE – Fehlverhalten bei Sticky Header on Mobiles

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 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, minimum-scale=1"

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, minimum-scale=1">';
});

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, minimum-scale=1");
};

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