【WordPress】ログイン画面、管理画面にヘッダーやフッターを追加する方法

この記事はWordPressのログイン画面や管理画面にヘッダーやフッターを追加する方法について書いてます。

外部の人と共有して使用する場合や、ライターさんが参加するようなサイトだとちょっと見た目にもこだわりたいとかありますよね。

そこで、ログイン画面や管理画面に、サイトと同じ（じゃなくてもよいですが）ヘッダーとフッターを追加する方法を紹介します。

【WordPress】ログイン画面、管理画面にヘッダーやフッターを追加する方法

ログイン画面と管理画面では読み込み方が違うので、それぞれ紹介しますね。

ログイン画面にヘッダーやフッターを追加する方法

以下のようなコードをfunctions.phpに追加してください。

add_action('login_head', function () {
  include_once(get_template_directory() . '/templates/header.php');
});

add_action('login_footer', function () {
  include_once(get_template_directory() . '/templates/footer.php');
});

add_action('login_enqueue_scripts', function () {
  wp_enqueue_style('css-login', get_template_directory_uri() . '/css/style.css');
});

簡単に解説します。

add_action(‘login_head’, function () {}

ヘッダー部分に追加するのがこっちです。

サンプルでは/templates/header.phpのファイルを読み込んでます。

ヘッダーのナビメニューが不要だったり、ログアウトボタン付けたかったりすると思いますが、管理面を考えると、/templates/header-admin.phpみたいな感じでフロントとはファイルを分けた方がよいです。

add_action(‘login_footer’, function () {}

こちらはフッター用です。

add_action(‘login_enqueue_scripts’, function () {}

ここでCSSとか読み込みます。

これも読み込むファイルはフロントと分けた方がよいかと。

管理画面にヘッダーやフッターを追加する方法

こちらもほぼ一緒なのですが、以下のような感じです。

add_action('admin_head', function () {
  include_once(get_template_directory() . '/templates/header-admin.php');
});

add_action('admin_footer', function () {
  include_once(get_template_directory() . '/templates/footer-admin.php');
});

add_action('admin_enqueue_scripts', function () {
  wp_enqueue_style('css-admin', get_template_directory_uri() . '/css/style.css');
});

先ほど「login_head」だったところが「admin_head」といった感じです。

管理画面は見た目の調整がちょっと面倒ですが、検証ツール使って、CSS上書きしていきます。

たとえば、以下のようにすると左側のメニューが消えます。

#adminmenumain { display:none; }

ログイン画面や管理画面に、ヘッダーとフッターを追加する方法は以上です。

以下、おまけです。

WordPress管理画面の投稿作成の見た目を変更する方法

投稿作成をしてみるとわかるのですが、ヘッダー・フッターが投稿作成のコンテンツの下に隠れてしまっていると思います。

ここは納得いく感じにするの難しいのですが、以下のあたりを調整してくとよいと思うので、参考までに書いておきます。

.interface-interface-skeleton {
  position: relative;
}

.block-editor__container {
  position: relative;
}

WordPressのバージョンによって変わると思いますが、v6では今のとここれでヘッダーとフッターが見えるようになります。

ただ、これだと右側のカテゴリー選択のところとか、更新ボタンとかも一緒にスクロールしちゃうので、その辺は調整してください。

以上です！