menu
閉じる
  1. CSSでグラデーションテキスト
  2. Gutenberg ブロックエディタに設定した内容をカスタムフィールド…
  3. メニューのリンクが空の場合はa要素を出力しない
  4. 管理画面でのカスタム投稿一覧の並び順を日付降順に変更
  5. ログイン画面をカスタマイズ
  6. WordPressのヘッダーから余分なMETA情報や絵文字関連を削除
  7. Advanced Custom Fields : Repeater F…
  8. カスタム投稿タイプとタクソノミー、ターム追加スニペット
  9. WordPressで複数の条件を組み合わせた検索フォーム
  10. カテゴリをチェックした時に、並び順が変更にならないようにする
閉じる
閉じる
  1. Gutenberg ブロックエディタに設定した内容をカスタムフィールド…
  2. 投稿ページが複数カテゴリに紐づく場合のパンくずリスト
  3. MW WP Formのフォームに投稿やカスタム投稿、タクソノミーを選択…
  4. jQueryプラグイン「VEGAS」にテキストを追加して背景の切り替え…
  5. 親ターム子ターム毎にまとめて記事一覧を表示する
  6. ビジュアルエディタにTinyMCEの機能を追加する覚書(プラグインなし…
  7. Really Simple CSV Importerプラグインでパーマ…
  8. Advanced Custom Fields PROの「オプションペー…
  9. 管理画面のカスタム投稿記事一覧ページでカスタムタクソノミーで絞り込み
  10. 【令和追加】date()関数を日本の元号に対応させる
閉じる

Mana Design Lab.

ログイン画面をカスタマイズ

WordPressのログイン画面をオリジナルにカスタマイズする方法まとめ。

任意のCSSやJavaScriptを使用する

function custom_login() {
  $files = '<link rel="stylesheet" href=" ' . get_bloginfo( 'template_directory' ) . ' /css/login.css" />
      <script src="' . get_bloginfo( 'template_directory' ) . ' /js/jquery.js"></script>
      <script src="' . get_bloginfo( 'template_directory' ) . '/js/login.js"></script>';
  echo $files;
}
add_action( 'login_enqueue_scripts', 'custom_login' );

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

背景を変更する

function custom_login() { ?>
  <style>
    .login {
      background: url(<?php echo get_stylesheet_directory_uri(); ?>/images/bg_login.png) no-repeat center center;
      background-size: cover;
    }
  </style>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login' );

ロゴを変更する

function custom_login_logo() { ?>
  <style>
    .login #login h1 a {
      width: 300px;
      height: 39px;
      background: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo_login.png) no-repeat 0 0;
    }
  </style>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login_logo' );

ロゴのリンク先を変更する

function custom_login_logo_url() {
  return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

ロゴのtitle属性を変更する

function custom_login_logo_title() {
  return get_bloginfo( 'name' );
}
add_filter( 'login_headertitle', 'custom_login_logo_title' );

「ログイン状態を保存する」を初期状態で選択済みにする

function login_checked_rememberme() { ?>
  <script src="<?php echo get_bloginfo('template_directory') ?>/js/jquery.js"></script>
  <script>
    $(document).ready(function(){
      $('#rememberme').prop('checked', true);
    });
  </script>
<?php }
add_action( 'login_enqueue_scripts', 'login_checked_rememberme' );

ログインエラー時のシェイクを止める

function stop_login_error_shake() {
  remove_action( 'login_head', 'wp_shake_js', 12 );
}
add_action( 'login_head', 'stop_login_error_shake' );

ログインエラー時のエラー文を変更する

add_filter( 'login_errors', create_function('$a', "return '<strong>エラー:</strong> ログインできませんでした';") );

エラー文そのものを非表示にするなら

add_filter( 'login_errors', create_function('$a', "return null;") );

入力欄のラベルをプレースホルダーに置き換える

function login_user_pass_placeholder() { ?>
  <script src="<?php echo get_bloginfo('template_directory') ?>/js/jquery.js"></script>
  <script>
    $(document).ready(function(){
      $('#loginform label[for="user_login"], #loginform label[for="user_pass"]').contents().filter(function() {
        return this.nodeType === 3;
      }).remove();

      $('#loginform input[type="text"]').attr('placeholder', 'Username');
      $('#loginform input[type="password"]').attr('placeholder', 'Password');
    });
  </script>
<?php }
add_action( 'login_enqueue_scripts', 'login_user_pass_placeholder' );

「パスワードをお忘れですか ?」と「← ○○○ へ戻る」を非表示にする

function login_nav_backtoblog_hide() { ?>
  <style>
    .login #nav,
    .login #backtoblog {
      display: none;
    }
  </style>
<?php }
add_action( 'login_enqueue_scripts', 'login_nav_backtoblog_hide' );

「パスワードをお忘れですか ?」と「← ○○○ へ戻る」を任意の文言に変更する

function login_nav_backtoblog_change() { ?>
  <script src="<?php echo get_bloginfo('template_directory') ?>/js/jquery.js"></script>
  <script>
    $(document).ready(function(){
      $('#nav').html('<a href="http://example.com" title="Lorem ipsum">Lorem ipsum</a>');
      $('#backtoblog').html('<a href="http://example.com" title="foo bar baz">foo bar baz</a>');
    });
  </script>
<?php }
add_action( 'login_enqueue_scripts', 'login_nav_backtoblog_change' );

 

関連記事

  1. ビジュアルエディタの見出しや段落を制御する

  2. 管理画面の左メニューカスタマイズ

  3. ユーザーリスト(投稿者)をランダムで取得

  4. カテゴリをチェックした時に、並び順が変更にならないようにする

  5. 投稿ページが複数カテゴリに紐づく場合のパンくずリスト

  6. 親ターム子ターム毎にまとめて記事一覧を表示する

おすすめ記事

  1. Gutenberg ブロックエディタに設定した内容をカスタムフィールドを含め他のページで表示する
  2. Really Simple CSV Importerプラグインでパーマリンクの末尾に付く「-2」をSQLで一括削除
  3. 【令和追加】date()関数を日本の元号に対応させる
  4. WordPressで複数の条件を組み合わせた検索フォーム
  5. ログイン画面をカスタマイズ

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


ピックアップ記事

  1. 他のページで設定したブロックの内容を表示したかった時の覚書。汎用性からショートコードにまとめ…
  2. 大量の記事をCSVで一気に流し込めるプラグイン「Really Simple CSV Importer…
  3. 未だに明治やら大正やら昭和やら平成やら日本の元号がちょくちょく利用されますが、素晴らしいdate()…

最新記事

  1. Gutenberg ブロックエディタに設定した内容をカスタムフィールドを含め他のページで表示する
  2. 投稿ページが複数カテゴリに紐づく場合のパンくずリスト
  3. MW WP Formのフォームに投稿やカスタム投稿、タクソノミーを選択項目として表示
ページ上部へ戻る