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

この記事は約4分で読めます。

2017-07-21KUSANAGI for ConoHa, WordPressカスタマイズ

本記事はWordPressの管理画面の背景に任意の壁紙を設定する方法を紹介するものです。
当然、美雲このは以外の壁紙でもできます。
ただConoHa使ってる方は、せっかくですし「このはモード」にしてみませんか?

なお、管理画面を「このはモード」にする方法は、もともと別の方が紹介していたもの。
私もリンクを貼って紹介していたのですがサイトを削除したようで……。
この手のカスタマイズは需要が多いだろうということで書かせていただくことにしました。

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

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

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

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

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

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

実装手順

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

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

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

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

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

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様の参考記事

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

完成

ブラウザをリロードすると、このはモードになっているはずです。

  • エディタの文字が読みづらい
  • もっとこのはをくっきり見たい

などの場合は、CSSの以下の数値を調整してください。

 opacity: 0.9;

まとめ

解答者の写真

簡単でしょ?

速い、安い、応援団長がかわいい♪
これであなたもConoHaを使いたくなぁ~る