プラグインを使用せずにWordPressでログインページを作成する方法

公開: 2022-01-03

プラグインなしでWordPressでログインページを作成する方法プラグインなしで、デフォルトのWordPressログインページをカスタマイズせずに、WordPressでログインページを作成するための最良の方法をお探しですか？人気のあるWordPressログインプラグインを使用せずにWordPressでログインページを作成する場合は、ショートコードまたはカスタムページテンプレートにログインコードを追加することで作成できます。

このチュートリアルでは、ショートコード関数を使用してWordPressでログインページを作成する方法と、カスタムページテンプレートのログイン関数を使用してWordPressでログインページを作成する方法を示します。

これらの各方法は、WordPressテーマまたはWordPressホスティング環境とシームレスに連携する必要があります。

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

このチュートリアルの目的は、ログイン後にWordPressダッシュボードにアクセスできるデフォルトのWordPressログインのようなログインページの作成を支援することです。

理想的には、このカスタムログインページは、サイトユーザーがログインするフロントエンドログインページである必要があります。冒頭で述べたように、このチュートリアルでは2つの方法を取り上げます。

ログインページのショートコード
カスタムページテンプレートログイン

ログインページのショートコードを作成する

WordPressのどこかにログインページを作成するときの最初のステップは、ショートコードを使用することです。ショートコードは、任意のページや投稿、さらにはウィジェットやカスタムページテンプレートに追加することもできます。

このステップでは、ログインフォームのショートコードを作成します。このショートコードは、WordPressの任意のページまたは投稿にログインフォームを公開するために使用されます。このアプローチにより、ユーザーはサイトの任意のセクションにログインページを柔軟に作成できます。

ショートコードを作成するには、次のコードを使用します。

 //ログインフォームのショートコードを作成します

関数njengah_add_login_shortcode（）{

                add_shortcode（ 'njengah-login-form'、 'njengah_login_form_shortcode'）;

}

後で初期化できるように、関数にショートコードを追加しました。 add_shortcode関数は、WordPressでショートコードを作成します。 add_shortcode（）関数の一般的な式は次のとおりです。

 add_shortcode（string $ tag、callable $ callback）

ご覧のとおり、この関数には次の2つのパラメーターがあります。

パラメータ	説明
$ tag	これは、ショートコードを公開するために投稿またはページエディタで使用されるテキストです。たとえば、この場合、「njengah-login-form」として取得します。ページに追加すると、角かっこで囲まれます：[njengah-login-form]
$コールバック	これは、ショートコードの関数をレンダリングするコールバック関数です。たとえば、この場合、以下のコードで共有されているように、このコールバック関数にログインフォームを表示するコードを追加します

 //ステップ2：ショートコードコールバック
関数njengah_login_form_shortcode（）{
	
	if（is_user_logged_in（））
		
	'<p>ようこそ。 ログインしています！</ p> '; ？> 
		
<div class = "njengah-login-tutorial">  
		
	<？php return wp_login_form（ 
		配列（ 
			'echo' => false、
			'label_username' => __（ 'あなたのユーザー名'）、
			'label_password' => __（ 'あなたのパスワード'）、
			'label_remember' => __（ 'Remember Me'）
			        ）。
	）; ？> 
		
            </ div>
  <？php 
   }

コードを鋭くチェックすると、ユーザーがWordPressにログインしているかどうかを確認する方法についての投稿で説明したように、ユーザーがログインしているかどうかを確認する関数を使用していることがわかります。

ユーザーがログインしていない場合は、wp_login_form（）関数を使用してログインフォームを表示します。ユーザーがログインしている場合、ログインフォームを表示する代わりに、そのページにウェルカムメッセージを条件付きで表示します。

WP関数wp_login_form（）

wp_login_form（）は、テーマ開発者にWordPressフォームをどこにでも表示する方法を提供するWordPress関数です。この関数は、一般的に次のように表すことができます。

 wp_login_form（array $ args = array（））

$ argsは、フォームの表示方法を制御するオプションの配列にすることができます。

以下は、フォームの表示方法を変更するために配列で使用できる引数です。

引数$ arg	説明
エコー	ログインフォームを表示するか、フォームのHTMLコードを返す場合。デフォルトはtrue（エコー）。
リダイレクト	リダイレクト先のURL。「<ahref =” https://example.com/mypage/”> https://example.com/mypage/ </a>」のように、絶対である必要があります。デフォルトでは、リクエストURIにリダイレクトされます。
form_id	フォームのID属性値。デフォルトの「loginform」。
label_username	ユーザー名またはメールアドレスフィールドのラベル。デフォルトの「ユーザー名または電子メールアドレス」。
label_password	パスワードフィールドのラベル。デフォルトの「パスワード」。
label_remember	記憶フィールドのラベル。デフォルトの「RememberMe」。
label_login	送信ボタンのラベル。デフォルトの「ログイン」。
id_username	ユーザー名フィールドのID属性値。デフォルトの「user_login」。
id_password	パスワードフィールドのID属性値。デフォルトの「user_pass」。
id_remember	記憶フィールドのID属性値。デフォルトの「rememberme」。
id_submit	送信ボタンのID属性値。デフォルトの「wp-submit」。
覚えて	フォームに「rememberme」チェックボックスを表示するかどうかを確認します
value_username	ユーザー名フィールドのデフォルト値。
value_remember	「RememberMe」チェックボックスをデフォルトでチェックする必要があるかどうかをチェックします。デフォルトfalse（チェックなし）

たとえば、arguments配列を設定し、次のようにこの関数に渡すことができます。

 <？php 

wp_login_form（ 

	 配列（
			'echo' => true、
			//デフォルトの「redirect」値はユーザーをリクエストURIに戻します。
			'redirect' =>（is_ssl（）？ 'https：//'： 'http：//'）。 $ _SERVER ['HTTP_HOST']。 $ _SERVER ['REQUEST_URI']、
			'form_id' => 'loginform'、
			'label_username' => __（ 'あなたのユーザー名'）、
			'label_password' => __（ 'あなたのパスワード'）、
			'label_remember' => __（ 'Remember Me'）、
			'label_log_in' => __（ 'ログイン'）、
			'id_username' => 'user_login'、
			'id_password' => 'user_pass'、
			'id_remember' => 'rememberme'、
			'id_submit' => 'wp-submit'、
			'覚えている' => true、
			'value_username' => ''、
			// 'value_remember'をtrueに設定すると、デフォルトで[Rememberme]チェックボックスがオンになります。
			'value_remember' => false、
		）;
		
）; ？>

フォームは、デフォルトのWordPressログインフォームラベルではなく、アレイに追加した新しいラベルで表示されます。上記のコードでは、ユーザー名をあなたのユーザー名に変更し、パスワードをあなたのパスワードに変更しました。

プラグインなしでWordPressにログインページを作成するログインページテンプレート

ショートコードとコールバック関数を作成したら、それを初期化して、WordPressの投稿またはページのどこでもショートコードを使用してカスタムログインフォームを追加できるようにする必要があります。

以下は、ログインフォームのショートコードを初期化するコードです。

 //ステップ3：ショートコード関数を初期化します

add_action（ 'init'、 'njengah_add_login_shortcode'）;

WordPressでログインフォームのショートコードを作成するためのフルコードスニペット

これで、これらすべてのコードスニペットを1つのコードスニペットにまとめ、アクティブなWordPressテーマのfunctions.phpにコードを追加してから、ショートコード[njengah-login-form]を使用してWordPressログインフォームを表示できます。

以下は、WordPressログインフォームのショートコードを追加するためにfunctions.phpファイルに追加する必要がある完全なコードスニペットです。

 / **
 *プラグインなしでカスタムWordPressログインフォームを作成する[WordPressログインフォームショートコード] 
 * @author Joe Njengah 
 * @ gist-https：//gist.github.com/Njengah/fa96025717308df1b979e77e5da3eef2
 * / 


//ステップ1：ショートコードを作成する
関数njengah_add_login_shortcode（）{
	add_shortcode（ 'jay-login-form'、 'njengah_login_form_shortcode'）;
}

//ステップ2：ショートコードコールバック
関数njengah_login_form_shortcode（）{
	
	if（is_user_logged_in（））
		
		'<p>ようこそ。 ログインしています！</ p> '; ？> 
		
		<div class = "njengah-login-tutorial">  
		
			<？php return wp_login_form（ 
							配列（ 
								'echo' => false、
								'label_username' => __（ 'あなたのユーザー名'）、
								'label_password' => __（ 'あなたのパスワード'）、
								'label_remember' => __（ 'Remember Me'）
			              ）。
			）; ？> 
		
		</ div>
  <？php 
   }

//ステップ3：ショートコード関数を初期化します
add_action（ 'init'、 'njengah_add_login_shortcode'）;

//ステップ4：ショートコード[njengah-login-form]を使用して、ログインフォームをページまたは投稿に埋め込みます

このコードをfunctions.phpに追加するときは、ログインページを作成し、ショートコード[njengah-login-form]を追加してログインフォームを公開する必要があります。以下の画像に示すように、ログインフォームが表示されます。

プラグインなしでWordPressにログインページを作成するログインページテンプレート

WordPressログインフォームのスタイリング

ログインフォームを魅力的にし、使用しているテーマのデザインを取り入れるために、次のスタイルを追加しました。

 .njengah-login-tutorial {
    背景：＃6379a4;
    パディング：20px;
    最大幅：70％;
    マージン：0自動;
    色：#fff;
}

.login-パスワードラベル{
    マージン右：120px;
}

.login-username {
    パディングトップ：30px;
}

ログインフォームのカスタムページテンプレートを作成する

プラグインを使用せずにWordPressでログインページを作成する別の方法は、カスタムページテンプレートを作成し、wp_login_form（）関数を使用してそのページにログインフォームを公開することです。

以下は、カスタムページテンプレートにあるカスタムログインページを作成するためのコードです。

 <？php
/ **
 *テンプレート名：ログインページ 
 * /
 
 get_header（）; 
 
 
 if（is_user_logged_in（））{
	 
	     echo '<p>ようこそ。 ログインしています！</ p> '; 
		 
 }それ以外{ 
	 
	 wp_login_form（ 

		 配列（
				'echo' => true、
				//デフォルトの「redirect」値はユーザーをリクエストURIに戻します。
				'redirect' =>（is_ssl（）？ 'https：//'： 'http：//'）。 $ _SERVER ['HTTP_HOST']。 $ _SERVER ['REQUEST_URI']、
				'form_id' => 'loginform'、
				'label_username' => __（ 'あなたのユーザー名'）、
				'label_password' => __（ 'あなたのパスワード'）、
				'label_remember' => __（ 'Remember Me'）、
				'label_log_in' => __（ 'ログイン'）、
				'id_username' => 'user_login'、
				'id_password' => 'user_pass'、
				'id_remember' => 'rememberme'、
				'id_submit' => 'wp-submit'、
				'覚えている' => true、
				'value_username' => ''、
				// 'value_remember'をtrueに設定すると、デフォルトで[Rememberme]チェックボックスがオンになります。
				'value_remember' => false、
			）。
						
		）;
    }			
	
get_footer（）;

このコードをファイルに保存し、login-page.phpという名前を付けて、WordPressテーマのルートフォルダーに保存されていることを確認します。

新しいページを作成すると、以下に示すように、ログインテンプレートがページ属性テンプレートオプションで利用できるようになります。

プラグインなしでWordPressにログインページを作成するログインページテンプレート

テンプレートを選択してページを公開します。フロントエンドを確認すると、ログインしていないユーザーにはログインフォームが表示され、ログインしているユーザーにはウェルカムメッセージが表示されます。

ログインページテンプレートワードプレスを作成する方法

結論

この投稿では、WordPressページにログインフォームを追加する2つの方法の概要を説明しました。ショートコード関数を使用してWordPressログインフォームのショートコードを作成するか、カスタムページテンプレートを使用してプラグインなしでWordPressにログインページを作成できます。これらのメソッドの1つを実装して、WordPressサイトにカスタムフロントエンドログインフォームを作成できるようになったことを願っています。

同様の記事

カスタム投稿タイプのWordPressページ付けを作成する方法
あなたのサイトを保護するための30の最高のWordPressセキュリティプラグイン
プログラムでWordPressでページを作成する方法
WordPress管理ダッシュボードにアクセスする方法またはWordPressダッシュボードにログインする方法
カスタムオーダー受信ページWooCommerceを作成する方法
PrintfulをWooCommerceに接続する方法
WooCommerce拡張機能を更新する方法
ページ上部のストアフロントテーマに検索ボックスを追加する方法
簡単な連絡のための40以上の最高のWordPressお問い合わせフォームプラグイン
WordPressWooCommerceで未分類のカテゴリを削除する方法
WordPressページからサイドバーを削除する方法またはWordPressサイドバーを非表示にする方法
例を使用してWordPressでカスタムクエリページネーションを作成する方法
WooCommerceとMagento：どちらが最高のEコマースプラットフォームですか？
WooCommerceデータベースをバックアップする方法
トップ30以上の最高のWordPressフォームプラグイン»最高のWordPressフォームプラグイン
WooCommerceで個別のログインページと登録ページを作成する方法
35以上の最高のフリーフォームプラグインWordPress
ShopifyからWooCommerceに移行する方法