wordpressの管理バーはjQueryで操作できないのでしょうか？

Question

wordpressでログインすると画面上に出てくる管理バー#wpadminbarは、操作対象にならないのでしょうか？

たとえば下記のように#targetの中に管理バーを移動させようとしてもできませんし、prependToやbeforeやprependやappendToやafterやさらに、hideでさえ、、

とにかく何を使っても#wpadminbarが操作対象になりません。

(function($){
  $('#wpadminbar').prepend($('#target'));//効かない
  $('#wpadminbar').hide();//効かない
})(jQuery);
```原因や解決策に思い当たる方はいらっしゃいませんでしょうか？

Comments

[m.ts10806]

タイトルがprependで書いているコードがappendになっていますが、#target　って何を追加しようしているのでしょうか？

[minminzemkun]

失礼致しました。#targetは移動先で、#wpadminbarが移動したい管理バーです。

Answer 1

JSの読み込み位置に関係があるかもしれません。
試しに、質問に書かれているコードを</body>の直前に書いてみましたが、
hide() が効くことを確認しました。

<?php wp_footer(); ?>

よりもあとに、管理バーを操作するためのjQueryなどを書けば、効かせることができるかもしれません。

Comments

[minminzemkun]

そこに書くのでしたか。お見事です。ありがとうございます。

欲を言えば他のJSはfunctions.phpの「wp_enqueue_script」で呼んでいるので、このJSだけfooter.phpのテンプレートに書かざるを得ないというのもちょっとあれですね。汗

[marlboro_tata]

実際、回答を書いておいてあれなんですが、読込の場所だけで挙動が異なる、というのも、少々解せない現象でもあるので、あまり適切な解決法ではないような気がします。
本格的にきちんと解決しようと思うときは、下記のようなことが役にたつかもしれません。
http://web-wizardry.net/jquery/jqueryの読込みreadyとloadの順番について/

[minminzemkun]

これは勉強できそうです。ご親切にありがとうございます。

Answer 2

jQueryでなきゃいけないというわけではないのでしたら、下記のような方法があるようですが、

• 管理バー WP Admin Bar を徹底的にカスタマイズしてみる

例えば下記のように対応してみて、反映されない（非表示にならない）のでしたら
JavaScriptで動的に作られている要素なのではないでしょうか。動的に生成される要素であればDocumentReadyのタイミングでは存在しないので操作できないのは合点がいきます。

$('#wpadminbar').hide();
//対象になる要素をチェックしたいだけなら、半端に追記とかするよりいっそ非表示にするとか色かえるとか見た目で容易に変化が感じれるやり方の方が良いです。

それか、指定のID名称が間違っているとか。ハイフンでつなぐような名称つけられている印象がありますし。
※当方WP環境が手元にないのですぐには確認できませんので悪しからず・・・

Comments

[minminzemkun]

>jQueryでなきゃいけないというわけではないのでしたら
→ありがとうございます。たしかに管理バー全体を出力しないとか部分的な項目を出力しないという方法はあるのですけれど、実は今回は項目の１つを別の場所に移動させたいという目的がありまして、その過程で、項目どころか全体が移動できないぞ？と気づいたので、質問させて頂いた次第です。

>例えば下記のように対応してみて
→はい。hide() も効きませんね。

>JavaScriptで動的に作られている要素
→きっとそうかもしれませんね。困りました。

>当方WP環境が手元にないので
いいえ、お気遣いありがとうございます。またお気づきの点がありましたら是非。

[m.ts10806]

>→はい。hide() も効きませんね。
ではその名前のDOMが存在しないか、読み込まれてない状態で実行されているかのどちらかです。
動的であっても画面に出力されているものであればブラウザ開発ツールから確認はできます。
もし存在しているのであれば、下記の中で書くか、</body>の前にscript記述をすれば基本は問題ないかと思います。
$(function(){
//
});

特定項目だけ移動させたいのでしたらjavascriptから後で操作するよりも、
その項目を出力しているphpコードを特定して分岐で処理を入れたほうが確実とは思いますが、
モジュールやCMSのアップデートで元に戻るのでできそうなら子テーマで対応するとか、
そちらも分岐は必要と思います。

[minminzemkun]

あちらで投稿した「要素の監視」についての質問（https://teratail.com/questions/148273）は、今回の質問への打開策として聞いたつもりでした。しかし今回の質問は「要素の監視」でなくご回答にあるような「書く場所」だけで解決しましたね。
いつもありがとうございます。