#wpadminbarの出力先を指定する方法

###前提
以下の構成でWordPressテーマを作成しています。

↓header.php

php
1<!DOCTYPE html>
2<html>
3<!-- 略 -->
4<head>
5<!-- 略 -->
6</head>
7<body>
8	<div class="wrapper">

↓footer.php

php
1	</div><!-- .wrapper -->	
2</body>
3</html>

実現したいこと

#wpadminbarを出力したいのですが、同時に.wrapperの中身を次のように.replaceWith()で書き換えたいです。

jQuery
1$( window ).on( 'load', function() {
2  $( '.wrapper' ).replaceWith( '<div class="wrapper"></div>' );
3}
4```
5
6###発生している問題
7しかし`.replaceWith()`を実行すると`#wpadminbar`までなくなってしまいます。
8
9###試したこと
10`.replaceWith()`を`.prepend()`にしたら、`#wpadminbar`はなくなりませんでした。
11
12つまり原因は、`#wpadminbar`の出力先が`.wrapper`の中なので、`.replaceWith()`でなくなってしまうということのようです。
13
14それならばと次のようにして、`.wrapper`の外に`.test-area`というクラスを追加しました。
15
16こうすれば、`.test-area`直下に`#wpadminbar`が入るかもしれないと考え、もうそうなれば`#wpadminbar`と同じ階層である`.wrapper`を`.replaceWith()`してもなくなりはしないためです。
17
18↓header.php
19```php
20<!DOCTYPE html>
21<html>
22<!-- 略 -->
23<head>
24<!-- 略 -->
25</head>
26<body>
27<div class="test-area">
28	<!-- ここに#wpadminbarが入ってくれれば .wrapper を書き換えても大丈夫 -->
29	<div class="wrapper">
30```
31↓footer.php
32```php
33	</div><!-- .wrapper -->	
34</div><!-- .test-area -->	
35</body>
36</html>
37```
38ですが、`#wpadminbar`はやはり`.wrapper`の中に入ってしまい、`.replaceWith()`で消えてしまいました。
39
40いったい`#wpadminbar`の出力先はどのようにして決まるのでしょうか？
41
42そして`.wrapper`に対しての`.replaceWith()`はこのままで、どうしたら`#wpadminbar`を出力できるでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

ツールバーの出力そのものは wp_footer();関数の中に含まれるようですので、こちらが呼び出されている場所を確認してみてください。

投稿2020/03/14 14:30

Eggpan

総合スコア3205

marusankakun

2020/03/14 14:32

あwp_footer();で出ていたんですね。すみませんありがとうございます。勉強になりました。

Eggpan

2020/03/14 14:39

前後にアクションフックはあるので、タグで囲ったり、追加のhtmlタグを出力する、等の操作はfunctions.phpで可能みたいです。ご参考までに。 --- add_action('wp_before_admin_bar_render', function() { echo '<div class="adminbar-wrapper">'; }); add_action('wp_after_admin_bar_render', function() { echo '</div>'; });

行動規範の内容に同意します