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

本記事では、WordPressの管理画面の背景にConoHa応援団長・美雲このはの壁紙を設定する方法を紹介します。
具体的には上の画像みたいな感じです。

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

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

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

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

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

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

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

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

美雲このはオフィシャルサイト｜美雲このはオフィシャルサイト

このはの情報がい～っぱい！ぜひチェックしてね♪

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

実装手順

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

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

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

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

TinyPNG – Compress WebP, PNG and JPEG images intelligently

Make your website faster and save bandwidth. TinyPNG optimizes your WebP, PNG and JPEG images by 50-80% while preserving full transparency!

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

美雲このはに去られた瞬間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 を読み込ませたいときがあります。そんなときは WordPress のアクションフックを使って色々と方法がありますが、ここでは1回のアクション関数で CSS もスクリプトも読み込んで、さらに対象の管理画...

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;
}