本記事では、WordPressの管理画面・ログイン画面の背景に任意の壁紙を設定する方法を紹介します。
今回はmuプラグインで実装します。
muプラグイン（Must-Use Plugins）：wp-content/mu-plugins フォルダに置くだけで自動的に有効になるプラグインです。
テーマを変更しても影響を受けないため、管理画面のカスタマイズなどに適しています。
テーマを変えても背景そのまま！
壁紙にはこちらを使います。
AIで作成したオリジナルキャラクターです。
完成イメージ
※ログイン画面にも別画像を設定できますが、本記事では管理画面のみ紹介します。
管理画面
エディタ画面
うっすら透過しているのがわかると思います。
どの程度透過させるかは透明度を変えることで対処できます（見本は0.5）。
実装手順
PHPファイル作成
admin-wallpaper.phpの名前でファイルを作成し、次のコードを記述します。
<?php
/**
* Plugin Name: Simple Admin Wallpaper
* Description: 管理画面とログイン画面に任意の背景画像を設定するMUプラグイン。
* Version: 1.0.0
*/
if ( ! defined( 'ABSPATH' ) ) exit;
const SAW_OPTION = 'simple_admin_wallpaper_options';
function saw_get_options() {
$defaults = [
'admin_bg' => '',
'login_bg' => '',
'admin_opacity' => '0.92',
'login_opacity' => '0.92',
];
return wp_parse_args( get_option( SAW_OPTION, [] ), $defaults );
}
add_action( 'admin_menu', function() {
add_options_page(
'管理画面壁紙',
'管理画面壁紙',
'manage_options',
'simple-admin-wallpaper',
'saw_settings_page'
);
});
add_action( 'admin_init', function() {
register_setting( 'saw_settings', SAW_OPTION, [
'type' => 'array',
'sanitize_callback' => 'saw_sanitize_options',
'default' => [],
]);
});
function saw_sanitize_options( $input ) {
return [
'admin_bg' => isset( $input['admin_bg'] ) ? esc_url_raw( $input['admin_bg'] ) : '',
'login_bg' => isset( $input['login_bg'] ) ? esc_url_raw( $input['login_bg'] ) : '',
'admin_opacity' => isset( $input['admin_opacity'] ) ? saw_sanitize_opacity( $input['admin_opacity'] ) : '0.92',
'login_opacity' => isset( $input['login_opacity'] ) ? saw_sanitize_opacity( $input['login_opacity'] ) : '0.92',
];
}
function saw_sanitize_opacity( $value ) {
$value = (float) $value;
if ( $value < 0.3 ) $value = 0.3;
if ( $value > 1 ) $value = 1;
return (string) $value;
}
function saw_settings_page() {
if ( ! current_user_can( 'manage_options' ) ) return;
$options = saw_get_options();
?>
<div class="wrap">
<h1>管理画面壁紙</h1>
<form method="post" action="options.php">
<?php settings_fields( 'saw_settings' ); ?>
<table class="form-table" role="presentation">
<tr>
<th scope="row">管理画面の背景画像URL</th>
<td>
<input type="url" name="<?php echo esc_attr( SAW_OPTION ); ?>[admin_bg]" value="<?php echo esc_attr( $options['admin_bg'] ); ?>" class="regular-text" placeholder="https://example.com/image.webp">
</td>
</tr>
<tr>
<th scope="row">管理画面の透明度</th>
<td>
<input type="number" step="0.01" min="0.3" max="1" name="<?php echo esc_attr( SAW_OPTION ); ?>[admin_opacity]" value="<?php echo esc_attr( $options['admin_opacity'] ); ?>">
<p class="description">0.3〜1。数字が小さいほど背景が見えます。</p>
</td>
</tr>
<tr>
<th scope="row">ログイン画面の背景画像URL</th>
<td>
<input type="url" name="<?php echo esc_attr( SAW_OPTION ); ?>[login_bg]" value="<?php echo esc_attr( $options['login_bg'] ); ?>" class="regular-text" placeholder="https://example.com/login.webp">
</td>
</tr>
<tr>
<th scope="row">ログインフォームの透明度</th>
<td>
<input type="number" step="0.01" min="0.3" max="1" name="<?php echo esc_attr( SAW_OPTION ); ?>[login_opacity]" value="<?php echo esc_attr( $options['login_opacity'] ); ?>">
</td>
</tr>
</table>
<?php submit_button(); ?>
</form>
</div>
<?php
}
add_action( 'admin_head', function() {
$options = saw_get_options();
if ( empty( $options['admin_bg'] ) ) return;
?>
<style>
body.wp-admin #wpwrap {
background-image: url('<?php echo esc_url( $options['admin_bg'] ); ?>') !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
background-size: cover !important;
}
body.wp-admin #wpbody-content > .wrap,
body.wp-admin .postbox,
body.wp-admin .notice,
body.wp-admin .metabox-holder,
body.wp-admin #screen-meta,
body.wp-admin #contextual-help-wrap {
background-color: rgba(255,255,255,<?php echo esc_attr( $options['admin_opacity'] ); ?>);
}
</style>
<?php
});
add_action( 'login_head', function() {
$options = saw_get_options();
if ( empty( $options['login_bg'] ) ) return;
?>
<style>
body.login {
background-image: url('<?php echo esc_url( $options['login_bg'] ); ?>') !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
background-size: cover !important;
}
body.login #loginform,
body.login #lostpasswordform,
body.login #registerform {
background-color: rgba(255,255,255,<?php echo esc_attr( $options['login_opacity'] ); ?>);
}
</style>
<?php
});
PHPファイルをアップロード
admin-wallpaper.phpをwp-content配下のmu-pluginsフォルダにアップロードします。
もしなければ作成してください。
設定
設定→管理画面壁紙を開きます。
管理画面・ログイン画面の背景画像URLに、壁紙にしたい画像のURLを入れます。
透明度で、画像の見え方を調整します。
企業案件での活用方法
納品の際、ログイン画面にクライアントのブランドロゴを設定しておくといい感じかも？
クライアントの担当者がログインしようとしたら、そこには自社のロゴが!？
事前にリクエストを確認した方がいいですからドッキリとはいかないでしょうが。
それでも特にリニューアル案件だと、見違えたログイン画面に担当者はにんまりされるのではないかと思います。
まとめ
いつも開く画面だからこそ、世界観にこだわりたいもの。
お気に入りの背景で記事を書けば、きっと筆が進むこと請け合いですよ！
私はConoHa以外を勧めない。
2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。
レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。
※ConoHaに初めて入会の方限定。
本CTAの画像もしくはボタンを押してWINGパック12か月以上を契約すると、最大5000円割引してもらえます。