【WordPress】プレビュー時だけ上の黒いバー（管理バー）を非表示にする方法

ワードプレスで記事（投稿ページや固定ページ）を書く時、記事投稿前には必ずプレビューして確認しますが、この時、最上段に黒いバー（管理バー）が表示されます。

実際その記事に訪れる人にはこの黒いバーは表示されないことから、見る人の立場に立って表示を正確に確認するには「プレビュー時だけはこの黒いバー（管理バー）を表示しない」（でもその他では表示する）ということをしたい。

これには関数の追加とCSSで対応できたのでご紹介です。

Contents

1 プレビュー時のみのクラスを追加
- 1.1 １）クラスを追加
- 1.2 ２）コードの追加
2 CSSで管理バーを非表示に
- 2.1 CSSの設定
- 2.2 CSSの設定内容
3 補足）ユーザー設定から管理バーを非表示
4 今回のポイント

プレビュー時のみのクラスを追加

プレビュー時のみ上部の黒いバーを非表示にするには、手順的には以下2つ。

１）プレビュー時を判別するためのクラスを追加
２）追加したクラスに対して CSS を設定

全然難しくないので順にサクサクっと見て行きましょう。

１）クラスを追加

まずプレビュー表示をしているのかどうかを判別するために、プレビュー時のみ bodyタグに専用のクラスを追加します。

そのために、テーマのための関数（functions.php）に以下のコードを追加します。

add_filter( 'body_class', 'my_class_names_preview' );
function my_class_names_preview( $classes ) {
if(is_preview() == true){ // プレビュー時のみ
$classes[] = 'preview'; //専用のクラスを追加
}
return $classes;
}

add_filter( 'body_class', 'my_class_names_preview' );

function my_class_names_preview( $classes ) {

if(is_preview() == true){ // プレビュー時のみ

$classes[] = 'preview'; //専用のクラスを追加

}

return $classes;

}

このコードを追加することで、以下のように記事や固定ページのプレビュー時のみ、bodyタグのクラスに「preview」が追加されるようになります。

これでプレビュー表示かどうかの判別ができますね！
あとはこの追加されたクラスに対してCSSを設定すれば良いだけです。

２）コードの追加

テーマのための関数（functions.php）にコードを追加するには、以下の操作を行えば良いですね。

①：「外観」を選択
②：「テーマエディター」をクリック！

↓↓↓↓↓↓

①：「テーマのための関数」（functions.php）を選択
②：追加するコードをコピペ
③：「ファイルを更新」をクリック！

以上でコードの追加は終わりです。

bodyタグのクラスに「preview」が追加されたか、ソースの表示かグーグルクロームなどの開発者ツールで確認してみてくださいね。

注意

functions.php の編集は、間違うとブログが表示できなくなるなど、重大な問題にもつながります。できればローカル環境やテストサイトで一度問題ないか試してみると良いです。

参考）
ワードプレスをパソコン上で動かす！XAMPPのインストール方法を詳しく解説

CSSで管理バーを非表示に

CSSの設定

クラスが追加されたら、そのクラスに対して以下のようにCSSを追加すれば、投稿や固定ページのプレビューでのみ、管理バーは表示されなくなります。

/* プレビュー時のみ管理バーを非表示 */
body.single.preview,
body.page.preview {
margin-top: -32px; /* 管理バー空白を埋める */
}
@media screen and (max-width:782px){
body.single.preview,
body.page.preview {
margin-top: -46px; /* 管理バー空白を埋める */
}
}
body.single.preview #wpadminbar,
body.page.preview #wpadminbar{
display: none; /* 投稿、固定ページのプレビューで管理バー非表示 */
}