カスタムメイドのWordPressログインページを作成する方法

公開: 2018-04-11

ああ、そうです、WordPressのログインページ(WordPressで最も有名なページの1つ)ですね。

デフォルトのログインワードプレス

しかし同時に、WordPressサイトにこのページをデフォルトの形式で表示することが常に最良のアイデアであるとは限りません。

なんで? - あなたが尋ねる。

答えは次のとおりです。

カスタムメイドのWordPressログインページが必要なのはなぜですか?

問題は3つあります。

  1. トラフィック。 より多くのトラフィックを取得するほど、直接的な結果としてより多くの「悪い」トラフィックを取得します。 悪いトラフィックとは、悪意のあるスクリプトやボット、スパマー、およびあらゆる種類のユーザーが悪意を持ってサイトにアクセスすることを意味します。 WordPressのログインページをカスタマイズすると、サイトの安全性が高まります。
  2. マルチユーザーサイト。 サイトが複数の人(管理者または作成者/ブロガー)によって管理されている場合、ログインが複数回発生します。 カスタムログインフォームを提供すると、プロセス全体がより快適になります。
  3. ブランディング。 デフォルトのログインページはすべて問題ありませんが、真ん中に大きなWordPressロゴがあります。 これを切り替えて、ログインページを自分のもののように見せることは、ブランディングの良いタッチになります。 これは、クライアント用のWebサイトを構築している場合に特に有効です。 クライアントに一貫した体験を提供することは、確かに彼らが高く評価するものです。

上記のいずれかに説得力があると思われる場合は、ログインページをカスタムページに切り替えることを検討してください。 方法は次のとおりです。

カスタムメイドのWordPressログインページを作成する方法

あなたがそれについて行くことができる2つの主な方法があります:

  • 手動の方法、
  • プラグインの方法。

どちらの方法にも長所と短所があります。 手動で行うと、最終ページの外観をより細かく制御できます。 特にコーディングスキルがない場合は、プラグインの方法に従うのが簡単ですが、プラグインでできることを理解する必要があります。

両方をカバーしましょう。

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

これには、テーマのソースファイルの一部を微調整する必要がありますが、それほど難しいことではありません。 ここでは、例としてTwentyFifteenを使用します。

楽しみは、 page.phpファイルとcontent-page.phpファイルのコピーを作成することから始まります。

これらの新しいコピーの名前をそれぞれpage-login.phpcontent-login.phpします。

page-login.phpを開き、1行だけ変更します。 これから:

 get_template_part( 'content', 'page' );

これに:

 get_template_part( 'content', 'login' );

それでは、 content-login.phpを編集して、 <?php the_content(); ?>のすぐ下に1行追加しましょう。 <?php the_content(); ?> 。 そのようです:

 <?php the_content(); ?> <?php wp_login_form( array('redirect' => home_url()) ); ?> <?php wp_link_pages( array( ...

ノート。 この段階で、必要に応じて他のさまざまなカスタマイズを実行できます(デザイン/レイアウトの調整、サイドバーの削除など)が、すべてオプションです。 新しいWordPressログインページで非常に最小限のアプローチをとる場合は、これらの2行だけを変更するだけでうまくいきます。

それでは、 wp-adminで新しいページを作成し、それを単に「ログイン」と呼びましょう。 パーマリンクも「ログイン」していることを確認してください。

ログインページ

これを行うと、WordPressがpage-login.phpテンプレートファイルを自動的に使用するようになります。

今すぐ新しいページにアクセスすると、次のようになります。

新しいログインページ

この段階で、あとはリダイレクトを設定して、WordPressのデフォルトのログインページを最終的に削除するだけです。 これを行うには、 functions.phpファイルの最後に次の行を配置します。

 /* Main redirection of the default login page */ function redirect_login_page() { $login_page = home_url('/login/'); $page_viewed = basename($_SERVER['REQUEST_URI']); if($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') { wp_redirect($login_page); exit; } } add_action('init','redirect_login_page'); /* Where to go if a login failed */ function custom_login_failed() { $login_page = home_url('/login/'); wp_redirect($login_page . '?login=failed'); exit; } add_action('wp_login_failed', 'custom_login_failed'); /* Where to go if any of the fields were empty */ function verify_user_pass($user, $username, $password) { $login_page = home_url('/login/'); if($username == "" || $password == "") { wp_redirect($login_page . "?login=empty"); exit; } } add_filter('authenticate', 'verify_user_pass', 1, 3); /* What to do on logout */ function logout_redirect() { $login_page = home_url('/login/'); wp_redirect($login_page . "?login=false"); exit; } add_action('wp_logout','logout_redirect');

([1] [2]に基づいて構築されたコードスニペット。)

現在、アクセス可能な唯一のログインページは、あなたが作成した新しいページです。 ここでの素晴らしい点は、WordPressのデフォルトのページエディタを使用して自由に編集できることです(他のページを編集するのと同じように)。

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

完全に新しいログインページを作成する代わりに、実際にはデフォルトのログインページを変更しているため、この方法の動作は少し異なります。

まず、使用するプラグインは、カスタムログインページカスタマイザーです。

カスタム-ログイン-ページ-カスタマイザー

インストールしてアクティブ化した後、 [外観]> [ログインカスタマイザー]に移動します。ここで、カスタマイザーパネルを起動できます。

このプラグインのオプションは非常に優れており、次のような調整が可能です。

  • デフォルトのWordPressロゴの代わりに表示されるロゴを設定します。
  • ログインページ全体の背景を設定します。
  • フォーム自体の背景を設定します。
  • フォームのスタイルとフォームの細部(フォント、サイズ、色、フィールド)を調整します。
  • セキュリティアドオンをインストールして、フォームに追加のキャプチャフィールドを取得します(スパムログイン/ボットを防ぐのに最適です)。

たとえば、プラグインを数分間使用すると、次の結果が得られます。

ログインデモ

別のプラグインオプション

確認する価値のあるもう1つのカスタムログインページプラグインは、LoginDesignerです。 このプラグインは、WordPressのログインページを非常に簡単にカスタマイズできるようにすると同時に、デザインに柔軟性を持たせることを目的としています。

使いやすさを実現する1つの方法は、カスタマイズプロセスを使い慣れさせることです。 すべてのオプションとツールは、WordPressカスタマイザーに直接統合されています。 したがって、テーマオプションを変更するためにカスタマイザーを使用することに慣れている場合は、自宅にいるように感じるでしょう。

プラグインがどのように機能するかの概要については、このビデオをチェックしてください。

手動またはプラグイン経由

あなたの選択の方法は何ですか? 手動でコーディングするのが好きですか、それともプラグインですべてを処理するのが好きですか? お気軽に共有してください。