概要説明
記事の編集画面の上の黒いバー（管理バー）の「投稿を表示」を、別のタブで開くようにする functions.php のコード。編集画面を開いたまま公開ページを確かめられます。前のコードとの違い、作業環境で確かめた結果つき。
コード：「投稿を表示」を別のタブで開く
記事を編集しているとき、上の黒いバー（管理バー）の「投稿を表示」を押すと、同じタブで公開ページに移ってしまいます。確かめるたびに編集画面に戻るのは手間ですし、編集画面をいくつも開くと、どれが新しいか分からなくなります。
次のコードで、「投稿を表示」と「プレビュー」を別のタブで開くようにします。
functions.php
/**
* 管理バーの「投稿を表示」「プレビュー」を、別のタブで開く
*/
add_action( 'admin_bar_menu', function ( $wp_admin_bar ) {
foreach ( array( 'view', 'preview' ) as $id ) {
$node = $wp_admin_bar->get_node( $id );
if ( ! $node ) {
continue; // その画面にないときは何もしない
}
$wp_admin_bar->add_node( array(
'id' => $id,
'meta' => array_merge( (array) $node->meta, array(
'target' => '_blank',
'rel' => 'noopener',
) ),
) );
}
}, 100 );
| 書き方 | 役目 |
|---|---|
| admin_bar_menu（優先度 100） | WordPress が「投稿を表示」などを作ったあとに動かす |
get_node( 'view' ) |
今ある「投稿を表示」を取り出す。その画面になければ何もしない |
| array_merge で meta に足す | もとから付いている設定（class など）は残して、target と rel を足す |
| rel => noopener | 別のタブで開くときの決まりの書き方（開いたページから元のタブを操作させない） |
前のコードとの違い
前はこの記事で、id を view にして、meta に target だけを入れて add_node する書き方を紹介していました。この書き方だと、「投稿を表示」がない画面（ダッシュボードなど）でも、題名も URL もない空の項目を作ってしまいます。今のコードは、今ある項目だけに足すようにしています。
確かめた結果
このサイトの作業環境（WordPress 7.1）で、管理バーに「投稿を表示」「プレビュー」を作ってから、このコードを動かしました。
| 見たこと | 結果 |
|---|---|
| 題名と URL | そのまま（投稿を表示・記事の URL） |
| 別のタブで開く設定 | target="_blank" と rel="noopener" が付いた |
| 「プレビュー」がない画面 | 何もしない（空の項目を作らない） |
| 前のコードを「投稿を表示」がない画面で動かす | 題名も URL もない view の項目ができた |
編集画面で、別のタブで開くかを確かめる
編集画面を開いたまま、別のタブで公開ページを確かめられるようになります。直して、更新して、別のタブを読み込み直す、の繰り返しが楽になります。
