WordPressのログイン画面をカスタマイズする方法

WordPressをコミュニティとして使用する場合、管理者だけではなく他のメンバーもログインフォームを利用してサイトにログインすることができます。

初期状態のログイン画面はWordpressのロゴとシンプルなフォームが表示されるだけのものとなっており、Wordpressをよく知らないメンバーにとってはサイトのデザインとは違った印象のログイン画面に対して警戒心を抱く人もいるかもしれません。

そのような場合でも、サイトのデザインとログイン画面のデザインに統一感を持たせることができれば安心感を与えることができるでしょう。

WordPressのログイン画面のカスタマイズにはプラグインを使用することもできますが、ここでは、より柔軟に自分でCSSを記述してカスタマイズする方法について見ていきましょう。

スポンサーリンク




ロゴ画像を変更する

ロゴ画像を変更してみましょう。

現在のログイン画面には青いWordpressのロゴが表示されています。

これを下の黒いロゴへ変更してみます。

ログイン画面のロゴ画像を変更する場合は、login_enqueue_scriptsフックを使用します。

アクションフックの詳細については、WordPress開発で覚えておきたいアクションフックとフィルターフックをご参考ください。

変更したいロゴ画像を所定のフォルダへ追加して、functions.phpに以下のコードを記述しましょう。

function my_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/wp-logo.png);
      /* urlには画像のパスを指定してください */
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

ロゴ画像を変更することができました。

ロゴのリンク先の変更

初期の状態ではロゴのリンク先はWordPress.orgのホームページとなっています。

これをブログのトップページへのリンクに変更してみましょう。

ロゴのリンク先の変更はlogin_headerurlをフックします。

functions.phpに以下のコードを記述しましょう。

function my_login_logo_url() {
     return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

home_url()というテンプレートタグを使用することでブログのトップページへリンクすることができます。

外部CSSファイルの読み込み

ログイン画面をカスタマイズする際に、通常のCSSと同様に外部ファイルを読み込み、外部ファイル内で必要な修正をすることができます。

テーマフォルダ直下にstyle-login.cssを作成し、functions.phpに以下のコードを記述しましょう。

function my_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style-login.css' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

必要な修正があれば、このstyle-login.cssへ書き込むことで、ロゴ画像を変更するで見たように、functions.phpの関数内にCSSのコードを記述する必要がなくなります。

ログイン画面をカスタマイズする際によく使用されているセレクタには以下のようなものがあります。

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

背景画像を変更する

実際に、作成した外部ファイルを利用してログイン画面の背景色を変更してみましょう。

style-login.cssへ以下のコードを記述します。

body.login {
     background:#f7f8e0;
}

背景色をうすい黄色へ変更しました。

外部ファイルの読み込みが正しく反映されていることがわかりますね。

ログインフォームの幅を広げる

ログインフォームの幅を広げてみましょう。

同じ要領で、style-login.cssへ以下のコードを記述します。

body.login div#login {
   width:600px;
}

ログインフォームの幅が大きくなったことがわかりますね。

ログインボタンを大きくする

ログインボタンを大きくしてみましょう。

style-login.cssへ以下のコードを記述します。

div#login form#loginform p.submit input#wp-submit {
 	float:none;
 	width:100%;
 	margin-top:3%;
 	height:70px;
}

ログインボタンの横幅と高さが大きくなったことがわかります。

トップへ戻るリンクを非表示にする

トップへ戻るリンクを非表示にしてみましょう。

style-login.cssへ以下のコードを記述します。

body.login div#login p#backtoblog {
     display: none;
}

トップへ戻るリンクが表示されなくなりましたね。

カスタムログインページを作成する

カスタムページテンプレートを使用してカスタムログインページを作成することもできます。

テーマフォルダ直下に、custom-login.phpを作成し、以下のコードを記述しましょう。

<?php
/**
 *
 *Template Name:カスタムログインテンプレート
 *
 **/


if ( ! is_user_logged_in() ) { // ログインをしていない場合はログイン画面を表示
    $args = array(
        'redirect' => admin_url(), 
        'form_id' => 'loginform-custom',
        'label_username' => __( 'ユーザー名' ),
        'label_password' => __( 'パスワード' ),
        'label_remember' => __( 'ログイン状態を保存する' ),
        'label_log_in' => __( 'ログイン' ),
        'remember' => true
    );
    wp_login_form( $args );
} else { // ログインをしている場合
    wp_loginout( home_url() ); //トップページへ
    echo " | ";
    wp_register('', ''); //管理画面へ
}

ログイン画面用の固定ページを作成し、作成したカスタムログインテンプレートを適用しましょう。

ログイン画面用の固定ページへアクセスしてみます。

http://(WordPressをインストールしたフォルダのURL)/wordpress/login
(パーマリンクはご自身で設定されたURLになります)

スタイルが何も適用されていないログインフォームが表示されることを確認しましょう。

このページにスタイルを適用して、メンバー専用のログイン画面として使用しても良いでしょう。

【中級者向け】カスタムログインページをデフォルトのログインページへ置き換える

WordPressのログインページへアクセスした際に、デフォルトのログインページではなく、カスタムログインページへリダイレクトさせたいという場合があります。

その場合はfunctions.phpへ以下のコードを記述することで実現できます。

<?php

$page_id = "";
$product_pages_args = array(
'meta_key' => '_wp_page_template',
'meta_value' => 'custom-login.php'
);

$product_pages = get_pages( $product_pages_args );
foreach ( $product_pages as $product_page ) {
$page_id.= $product_page->ID;
}

function goto_login_page() {
global $page_id;
$login_page = home_url( '/?page_id='. $page_id. '/' );
$page = basename($_SERVER['REQUEST_URI']);

if( $page == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
wp_redirect($login_page);
exit;
}
}
add_action('init','goto_login_page');

function login_failed() {
global $page_id;
$login_page = home_url( '/?page_id='. $page_id. '/' );
wp_redirect( $login_page . '&login=failed' );
exit;
}
add_action( 'wp_login_failed', 'login_failed' );

function blank_username_password( $user, $username, $password ) {
global $page_id;
$login_page = home_url( '/?page_id='. $page_id. '/' );
if( $username == "" || $password == "" ) {
wp_redirect( $login_page . "&login=blank" );
exit;
}
}
add_filter( 'authenticate', 'blank_username_password', 1, 3);

//echo $login_page = $page_path ;

function logout_page() {
global $page_id;
$login_page = home_url( '/?page_id='. $page_id. '/' );
wp_redirect( $login_page . "&login=false" );
exit;
}
add_action('wp_logout', 'logout_page');

$page_showing = basename($_SERVER['REQUEST_URI']);

if (strpos($page_showing, 'failed') !== false) {
echo '<p class="error-msg"><strong>ERROR:</strong> Invalid username and/or password.</p>';
}
elseif (strpos($page_showing, 'blank') !== false ) {
echo '<p class="error-msg"><strong>ERROR:</strong> Username and/or Password is empty.</p>';
}

?>

/wp-login.phpへアクセスし、リダイレクトされることを確認しましょう。

しかし、このコードでは/wp-adminへアクセスした場合に正常にリダイレクトがされず、真っ白な画面になってしまいますので、使用する際は注意が必要です。

/wp-adminへアクセスした場合でも正常にリダイレクトさせることができる方法をご存知の方がいらっしゃいましたら、教えてください。

まとめ

ログイン画面のカスタマイズは外部のCSSファイルを読み込み、そこでスタイルを修正していくという方法がベターでしょう。

上で挙げた項目以外にもいろいろとカスタマイズの余地はありますので、よく使用されているセレクタ一覧を参考に、是非いろいろと試してみてください。

Wordpressの中級者以上を目指すなら

Wordpressの中級者以上を目指すのであればオンラインスクールもおすすめです。

筆者も講師(メンター)の一人ですが、オンラインスクールの一つ「Techacademy」ではWordpressをカスタマイズするために必要なカリキュラムが用意されています。

オンラインブートキャンプ WordPressコース

Wordpressにも利用されているPHPを利用してWebアプリケーションを開発してみたい方には「PHP/Laravelコース」がおすすめです。

オンラインブートキャンプ PHP/Laravelコース
スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする