プラグインなしで WordPress カスタムログインページを作成する

公開: 2022-09-01

WordPress のデフォルトのログインページに飽きたことはありませんか?

ログインページをウェブサイトのデザインと一致させる方法があるかどうか疑問に思ったことはありませんか?

はいの場合は、適切な場所に来ました。この記事では、プラグインを使用せずにログインページをカスタマイズするさまざまな方法について説明します。

今日は何を含めましたか？

WordPress のデフォルトのログインページ
カスタムログインページを作成する必要があるのはなぜですか?
WordPress のデフォルトのログインページをカスタマイズする
- ログインページのロゴをカスタマイズする
- WordPress ログインページの言語スイッチャーを無効にする
新しいカスタムログインページを作成する

WordPress のデフォルトのログインページ

デフォルトでは、サイト URL の末尾に /login/、/admin/、または wp-login.php を追加することで、WordPress のログインページにアクセスできます。

毎回、このログイン画面が表示されますね。

PPWP Pro: WordPress のデフォルトログインページ

ご覧のとおり、WordPress のログインページには次の要素が含まれています。

デフォルトの背景
WordPress のロゴ
入力フィールド (ユーザー名とパスワード)
[記憶する] チェックボックス
送信ボタン
パスワード紛失のリンク
リンクに戻る

たとえば、ブランディングの目的で、この一般的なページをカスタムページに置き換えたい場合はどうすればよいでしょうか。

ブログの最後まで読み続けてください。あなたにはいくつかの驚きがあります。

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

何よりもまず、カスタムログインページはユーザーエクスペリエンスを大幅に向上させます。サイトにログインするユーザーが少数の小規模なビジネスを運営している場合は、WordPress のデフォルトのログインページを完全に使用できます。

しかし、あなたのサイトがオンラインストアであると想像してみてください。顧客が退屈でブランド化されていないゲートウェイを介してサイトにログインできるようにすることは、良い判断ではありません。

ベストプラクティスは、ログインページを Web サイトのスタイルと一致させることです。

WordPress カスタムログインページを持つもう 1 つの利点は、サイトのセキュリティを強化することです。デフォルトの WordPress ログイン URL を変更することで、歓迎されないユーザーが管理者ログインページに簡単にアクセスできなくなります。これにより、サイトへの望ましくない攻撃を回避できます。

それでは、次のセクションに移りましょう。ここでは、独自のログインページを作成するための詳細な手順について説明します。

WordPress のデフォルトのログインページをカスタマイズする

WordPress のデフォルトログインページのロゴとリンクを独自のものに置き換えることができることをご存知ですか?

ログインページのロゴをカスタマイズする

WordPress ロゴを置き換えるには、次のコードスニペットを (子) テーマの functions.php ファイルに追加するだけです。

 関数 ppwp_custom_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
背景画像: url( https://passwordprotectwp.com/wp-content/themes/ppwp/img/ppwp-org-logo.png );
        高さ: 100px ;
        幅: 300px ;
        背景サイズ: 300px 100px ;
        バックグラウンドリピート:ノーリピート;
        パディング下部: 10px ;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'ppwp_custom_login_logo' );

このアクションは、ロゴのみを置き換えるのに役立ちます。ロゴをクリックすると、WordPress ページにリダイレクトされます。

ユーザーをサイトにリダイレクトするにはどうすればよいですか?

次のコードスニペットを使えば簡単です。

 関数 ppwp_custom_login_url() {
    home_url() を返します。
}
add_filter( 'login_headerurl', 'ppwp_custom_login_url' );
関数 ppwp_login_logo_url_redirect() {
    return ' https://passwordprotectwp.com/ ';
}
add_filter( 'login_headertitle', 'ppwp_login_logo_url_redirect' );

サイトの URL をサイトの実際の名前に置き換えることを忘れないでください。ログイン画面のカスタムロゴがサイトのホームページを指すようになりました。

WordPress ログインページの言語スイッチャーを無効にする

WordPress 5.9 には、ユーザーがサイトにログインするときに言語を選択する機能が含まれています。

多言語サイトを運営している場合に便利です。 Web サイトが単一の言語で利用できる場合は、その機能を無効にしてログインフォームを簡素化することをお勧めします。

どうやってそれができる？

次のコードスニペットを (子) テーマの functions.php ファイルまたはコードスニペットプラグインに追加するだけです。

 add_filter( 'login_display_language_dropdown', '__return_false' );

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

ロゴやリンクを変更するだけでなく、それ以上のことをしたい場合はどうしますか?

WordPress では、独自のログインページを作成し、WordPress のデフォルトのページを自分のページに置き換えることができますか?

はい！あなたは絶対にできます！

以下の手順に従ってください。このガイドでは、コーディングの知識が少し必要であることに注意してください。コードに慣れていない場合は、代わりにプラグインを使用してください。

開始する前に、サイトをバックアップすることを忘れないでください。

ステップ 1: 新しいテンプレートファイルを作成する

これを行うには、[外観] > [テーマファイルエディター] に移動します。

template-parts セクションの下に、新しい .php ファイルを追加し、好きな名前を付けます (例: custom-login-page.php)。

まず最初に、次の行をカスタムテンプレートファイルに追加します。

 <?php /* テンプレート名:カスタム ログイン ページ*/ ?>

このアクションにより、作成した PHP ファイルがページテンプレートになります。したがって、バックエンドでページを編集するときにテンプレート名が表示されます。

ステップ 2: 作成したテンプレートファイルをカスタマイズする

次のステップでは、PHP コードを追加して、完全なログインフォームを作成します。

ログインフォームを追加する

<?php
/**
* テンプレート名:カスタム ログイン ページ
*/
get_header();
if ( ! is_user_logged_in() ) {
    $args = 配列
        'redirect' => admin_url(), // 管理ダッシュボードにリダイレクトします。
        'form_id' => 'custom_loginform',
        'label_username' => __( 'ユーザー名: ' ),
        'label_password' => __( 'パスワード: ' ),
        'label_remember' => __( ' Remember Me ' ),
        'label_log_in' => __( 'ログインしてください' ),
         「覚えている」=>真
    );
wp_login_form( $args );
}
get_footer();

wp-login.php をカスタムログインページにリダイレクトする

カスタムログインページが正常に作成されました。ただし、ユーザーは、サイト URL の後に wp-admin または wp-login.php を入力することで、WordPress のデフォルトのログインページに直接アクセスできます。

これを回避するには、WordPress のデフォルトのログイン URL からカスタムのログイン URL にユーザーをリダイレクトする必要があります。

これを行うには、次のカスタムコードを (子) テーマの functions.php またはコードスニペットプラグインに追加します。

 関数 redirect_login_page() {
    $login_url = home_url( '/login' );
    $url = basename($_SERVER['REQUEST_URI']); // リクエストされた URL を取得
    isset( $_REQUEST['redirect_to'] ) ? ( $url = "wp-login.php" ): 0; // ユーザーが wp-admin にリクエストを送信した場合
    if( $url == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
        wp_redirect( $login_url );
        出口;
    }
}
add_action('init','redirect_login_page');

ログインエラー処理

カスタムログインページの作成が完了すると、正しいログイン情報を入力したユーザーがダッシュボードにアクセスできるようになります。失敗したログインリクエストは、WordPress のデフォルトのリクエストにリダイレクトされます。

ログイン試行の失敗に対処するには、次のコードを (子) テーマの functions.php ファイルに追加します。

 関数 error_handler() {
    $login_page = home_url( '/login' );
    グローバル $errors;
    $err_codes = $errors->get_error_codes(); // WordPress の組み込みエラー コードを取得する
    $_SESSION["err_codes"] = $err_codes;
    wp_redirect( $login_page ); // ユーザーを同じページに留める
    出口;
}
add_filter( 'login_errors', 'error_handler');

次に、以下のコードを custom_login_page.php に追加します。

 $err_codes = isset( $_SESSION["err_codes"] )? $_SESSION["err_codes"]: 0;
    if( $err_codes !== 0 ){
        echo display_error_message( $err_codes );
}
関数 display_error_message( $err_code ){
    // 無効なユーザー名。
    if ( in_array( 'invalid_username', $err_code ) ) {
        $error = '<strong>エラー</strong>: ユーザー名が無効です。';
    }
    // パスワードが正しくありません。
    if ( in_array( 'incorrect_password', $err_code ) ) {
        $error = '<strong>エラー</strong>: 入力したパスワードが正しくありません。';
    }
    // 空のユーザー名。
    if ( in_array( 'empty_username', $err_code ) ) {
        $error = '<strong>エラー</strong>: ユーザー名フィールドが空です。';
    }
    // 空のパスワード。
    if ( in_array( 'empty_password', $err_code ) ) {
        $error = '<strong>エラー</strong>: パスワード フィールドが空です。';
    }
    // 空のユーザー名と空のパスワード。
    if( in_array( 'empty_username', $err_code ) && in_array( 'empty_password', $err_code )){
        $error = '<strong>エラー</strong>: ユーザー名とパスワードが空です。';
    }
$ エラーを返します。
}

ステップ 3: 新しいページを作成し、作成したテンプレートをカスタムページに割り当てる

次に、管理ダッシュボードの下の [ページ] セクションに移動して、新しいページを作成します。

[ページ属性] セクションの [テンプレート] ドロップダウンで、作成したテンプレートを選択します。

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

ページを保存します。

これで、独自のログインページが作成されました。

カスタムログインページの作成は成功しましたか?

管理者ログインページをカスタマイズするための詳細な手順を説明しました。

WordPress のデフォルトのログインフォームで、ロゴと関連する URL を変更できます。

または、新しいページテンプレートを作成して、独自の WordPress カスタムログインページを作成することもできます。 2 番目の解決策は、最初はコーディングの知識が必要なように見えますが、明確なステップバイステップガイドを使用すると非常に簡単です。だから、まったく心配しないでください。

カスタムログインページを作成できましたか?

さらに情報が必要ですか？

以下のコメントセクションでお知らせください！