WordPressのログイン画面をカスタマイズするとちょっと気持ちいい

WordPress

2015-11-21

WordPressのログイン画面って、シンプルで素敵ですよね。

スクリーンショット 2015-11-21 13.05.00

Movable typeも、慣れ親しんだ感じで好きですが。

スクリーンショット 2015-11-21 13.05.53

a-blog cmsも、シンプルで素敵

スクリーンショット 2015-11-21 13.06.53

ちなみに、Craftは、なかなか元気なログイン画面です（笑

概ね、共通していることとしては、（Craft以外は）ブランドカラーを出しすぎないように、ログインについては裏方になろうとしていることかなと。

このシンプルさが好きなんですが、

中にはWordPressでクライアントに納品をしたり、

ユーザー登録を開放していて、ログイン画面を不特定多数の人がみたりすることもあると思います。

「WordPressって、みんなが使っている無料のやつでしょ？」

「いいえ、弊社ではオリジナルなログイン画面を用意しています」

という会話って、

「たこ焼きって、具材はみんな同じでしょ？」

「いいえ、弊社では赤い鉄板を使っています」

くらい、論点のずれた会話なんだけど、

でも、時々やっぱり、オリジナルな画面を見せたい時って、あると思うのです。

例えば

「オリジナル画面だと、なんだか気持ちが前向きになる」

という人向けに。

どんなくだらないことだって、

自分用にカスタマイズされているというだけでテンションが上がる人種は

僕以外にも必ずいると信じているのです。

そんな方のために、WordPressのログイン画面をカスタマイズする方法をご紹介します。

テーマカスタマイザーで、画像をアップできるように

WordPressのテーマ機能には、便利な「カスタマイザー」があります。

スクリーンショット 2015-11-21 13.14.42

ここで、色とか細かく設定して、グリグリカスタマイズするんですが。

スクリーンショット 2015-11-21 13.14.57

今回は、ここに画像のフィールドを追加してみます。

なにはともあれ、functions.phpに書く

function healings_theme_customizer( $wp_customize ) {

$wp_customize->add_section( 'menu_section' , array(
     'title' => '画像設定', //セクション名
     'priority' => 50, //カスタマイザー項目の表示順
     'description' => 'テーマ画像の設定', //セクションの説明
 ) );

//ログイン画面のロゴ
 $wp_customize->add_setting( 'login_logo' );
 $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'login_logo', array(
     'label' => 'ログイン画面のロゴ', //設定ラベル
     'section' => 'menu_section', //セクションID
     'settings' => 'login_logo', //セッティングID
     'description' => 'ログイン画面のWordPressのロゴを差し替え',
 ) ) );
 
 //ログイン画面の背景
 $wp_customize->add_setting( 'login_bkg' );
 $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'login_bkg', array(
     'label' => 'ログイン画面の背景', //設定ラベル
     'section' => 'menu_section', //セクションID
     'settings' => 'login_bkg', //セッティングID
     'description' => 'ログイン画面に背景を挿入',
 ) ) );
 
 
}
add_action( 'customize_register', 'healings_theme_customizer' );//カスタマイザーに登録

こんな感じ。

これを、functions.phpに追記すると、こんな感じでロゴと背景画像を登録することができます。

スクリーンショット 2015-11-21 13.18.36

登録した画像を使う準備

//ログイン画面のロゴ
function get_the_login_logo(){
    return esc_url( get_theme_mod( 'login_logo' ) );
}

//ログイン画面の背景
function get_the_login_bkg(){
    return esc_url( get_theme_mod( 'login_bkg' ) );
}

登録した画像を使うための関数を、先ほどの続きに書きます。

これで、get_the_login_bkg()　とかで、画像のURLを呼び出すことができます。