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

2015-11-21

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

 

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

 

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

 

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

 

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

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

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

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

 

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

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

 

という会話って、

 

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

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

 

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

 

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

 

例えば

 

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

 

という人向けに。

 

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

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

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

 

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

 

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

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

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

 

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

 

なにはともあれ、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に追記すると、こんな感じでロゴと背景画像を登録することができます。

 

登録した画像を使う準備

//ログイン画面のロゴ
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を呼び出すことができます。

 

画像を置き換える設定

さらに、続きに、ログイン画面の画像を置き換える記述をします

※シンタックスハイライターが思うように書き出してくれないので断念

こんな感じ。

参考にした記事

『WordPress：ログイン画面をオリジナルにカスタマイズする方法』
http://www.nxworld.net/wordpress/wp-custom-login-page.html

ロゴマークがある場合は置き換えて、

一応、WordPressのロゴを小さめに配置する・・・的な。

 

これで、ログイン画面をオリジナルにすることができました。

 

WordPressで納品したいけれど、どこかで差別化はかりたいなーと思っている方は、

試してみると、無駄にテンション上がるかも。

 

ちなみに、僕は上がります（笑

こういう無駄なこと、結構好き。