WordPress管理画面の背景に任意の壁紙を設定する　～あなたも「このはモード」にしてみませんか？

本記事では、WordPressの管理画面の背景にこのはちゃんの壁紙を設定する方法を紹介します。
具体的には上の画像みたいな感じです。

もちろん美雲このは以外の壁紙でもできます。
ただConoHa使ってる方は、せっかくですし「このはモード」にしてみませんか？

※このはの画像につき、(C)GMO Internet, Inc.

「このはモード」エディタ画面完成イメージ
美雲このは壁紙のダウンロード先
実装手順
まとめ

「このはモード」エディタ画面完成イメージ

通常画面は最初の画像を御参照ください。
エディタ画面はこんな感じになります。

どの画像を選んでも透明度を変えることで対処できます。

美雲このは壁紙のダウンロード先

美雲このは公式ページの壁紙コーナーからダウンロードできます。

https://conoha.mikumo.com/wallpaper/?btn_id=top–header_wallpaper

色々ありますのでお好きなものを選んで下さい。

実装手順

子テーマを使っていることを前提に説明します。

子テーマ直下に画像ファイルをアップロードする

ここでは名前を「conohawall.jpg」とします。

画像ファイルは予め圧縮して軽量化しておくこと！
圧縮はTinyPNGで。

TinyPNG – Compress AVIF, WebP, PNG and JPEG images

Free online image optimizer for faster websites! Reduce the file size of your AV...

なお、画像をアップロードし忘れると、とんでもないことになります。

美雲このはに去られた瞬間WordPressが動かなくなった

本記事は私のトラブルシューティング奮闘記。釣り感満載なタイトルの意味は、お読みいただければわかります。最初に断っておきますと、トラブルの原因は人災。その点で、ネ...

functions.phpにコードを追記する

以下のコードを追記してください。

/*このは管理画面*/
// フックする関数
function custom_enqueue($hook_suffix) {
 if( 'post.php' == $hook_suffix ||
 'post-new.php' == $hook_suffix ||
 'edit.php' == $hook_suffix ||
 'index.php' == $hook_suffix) {
 // 読み込むCSSファイル
 wp_enqueue_style('custom_css', get_stylesheet_directory_uri() . '/custom.css');
 }
}
// "custom_enqueue" 関数を管理画面のキューアクションにフック
add_action( 'admin_enqueue_scripts', 'custom_enqueue' );

DigiPress様の参考記事

特定のWordPress管理画面でのみ独自のCSSやJavaScriptを読み込む方法

自作で WordPress のテーマやプラグインをつくる場合、管理画面だけに自前の CSS や JavaScript を読み込ませたいときがあります。そんなと...

cssファイルを作成して子テーマ直下にアップロードする

「custom.css」という名前でcssファイルを作成。
以下のコードをコピペします。

.wrap {
 opacity: 0.9;
}
#edit-slug-box.hide-if-no-js {
 background-color: #FFF;
}
#wpwrap {
 background-image: url("conohawall.jpg") !important;
 background-position: center center !important;
 background-repeat: no-repeat !important;
 background-attachment: fixed !important;
 background-size: cover !important;
}