Is there a way to get the WP Admin Header to inject as the first element in the body instead of the last?

admin管理员组

文章数量:1122846

The default approach is to inject it at the end of the html and fix position it at the top.

That approach has worked for years but these days we have something better - position: sticky - and that would keep it on the top and keep elements of the page from sliding underneath it. But for sticky positioning to work it must be the first body element in DOM order.

EDIT: Nevermind. Just make the body "display: flex; flex-flow: column;" and set the order of all children to 1 and the admin-header's order to 0. This will pop it to the top regardless of its DOM position.

The default approach is to inject it at the end of the html and fix position it at the top.

That approach has worked for years but these days we have something better - position: sticky - and that would keep it on the top and keep elements of the page from sliding underneath it. But for sticky positioning to work it must be the first body element in DOM order.

EDIT: Nevermind. Just make the body "display: flex; flex-flow: column;" and set the order of all children to 1 and the admin-header's order to 0. This will pop it to the top regardless of its DOM position.

• wp-admin
• headers

Share Improve this question edited Aug 23, 2024 at 21:43 Michael Morris asked Aug 21, 2024 at 12:06 Michael MorrisMichael Morris 111 bronze badge 3

• 1 are you talking about the toolbar across the top? Is there a particular reason to change this for position: sticky? Are you trying to make a contribution to WP core? A lot of code has been built based on how that toolbar is positioned that would break with that change – Tom J Nowell ♦ Commented Aug 21, 2024 at 12:27
• Yes, the toolbar across the top. And I realize there is likely code based on it being up there that would break so I'm guessing that if there is a way to move it there it would need to be a setting controllable by the theme. Position sticky relieves the theme of the nuisance of having to pad the body top to make sure it's elements do not scroll under it at a minimum. But if the theme's own header is position sticky then positioning it when the toolbar is present becomes a lot easier as no special code is needed - sticky elements stack. – Michael Morris Commented Aug 22, 2024 at 0:19
• hmm that's trivial to account for using the body tag classes, what you're trying to do will take a lot more effort to make it use sticky nicely than it would to just add the 1 line of CSS to fix this, there's no benefit and an arguable downside that putting the admin toolbar first delays the recieving and rendering of the page, as well as causing problems for some plugins that depend on this, e.g. query monitor would be crushed by that change unless you introduced output buffering and crippled time to first byte, how can it tell you what happened on the page before it happened? – Tom J Nowell ♦ Commented Aug 22, 2024 at 16:08

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You don't:

• the admin toolbar isn't trying to be sticky, it's trying to be fixed, they aren't the same thing
• in a modern block theme it already appears before the main site blocks container
• there are already simple solutions for when content slides under it

That approach has worked for years but these days we have something better - position: sticky - and that would keep it on the top and keep elements of the page from sliding underneath it.

Ignoring that the admin toolbar behaves differently on mobile, the problem of sliding underneath already has a solution:

.thing { top: 0; }
.admin-bar .thing { top: 32px; }

Other solutions exist but it's not something that just vanishes by using position: sticky.

But this all ignores that position: sticky doesn't match the intended behaviour of the admin toolbar. The admin toolbar is position: fixed and isn't trying to reproduce the sticky behaviour. Sticky helps when you want something to appear on page then "stick" once the user has scrolled past a certain threshold which isn't what the admin toolbar does.

本文标签： Is there a way to get the WP Admin Header to inject as the first element in the body instead of the last