タブ付きWordPressログインと登録ウィジェットを作成します

キーテイクアウト

• この記事では、デフォルトのWordPressページと比較して、クライアントまたはWeb開発者のデザインとブランディングをよりよく反映できるカスタムタブのWordPressログインと登録ウィジェットの構築方法に関する詳細なガイドを提供します。
ウィジェットは、QuickFlip jQueryライブラリを使用して構築され、ログインと登録タブの間に反転効果を作成します。登録フォームには、ユーザー名、パスワード、電子メールフィールドが含まれていますが、ログインフォームにはCaptchaがありません。
• 著者は、出力バッファリングをオンにすること、標準のWP_Widgetクラスの拡張、子供クラスの作成、ウィジェットの登録など、ウィジェットを作成するプロセスを進めます。この記事では、ログインと登録フォームのHTMLコードを作成し、新しいユーザー登録を処理し、ユーザーにサインインし、バックエンドウィジェット設定フォームを作成する方法についても説明しています。
この記事は、ウィジェットのカスタマイズ、コーディングなし、WordPress管理者へのアクセスに関する問題を解決する方法など、タブ付きWordPressログインと登録ウィジェットの構築に関するよくある質問にも回答します。デフォルトのWordPressログインURLを変更し、ウィジェットのセキュリティを確認し、登録フォームをサイドバーに追加し、ウィジェットが正しく機能しない問題を解決し、ソーシャルログインを追加しますオプション。
• ここ数年、WordPressのカスタマイズされた登録ウィジェットに対する需要が高まっています。クライアントやWeb開発者のデザインとブランディングを反映していないため、直感的ではないという理由だけで、WordPressのデフォルトログインと登録ページには健全な無礼があります。 この問題を解決するために、いくつかの開発者がいくつかの種類のログインと登録ページをリリースしましたが、良いものには価格があり、安くなりません。 ただし、WordPressプラグインリポジトリで無料で利用できるものにフェンスに乗っているか、全体的に失望している場合は、タブ付きWordPressログインと登録ウィジェットを無料で作成する方法を学ぶことができるため、スピリットを持ち上げることができます。プロセス全体を把握するために、短い時間を犠牲にするだけです。かなり簡単な知識を習得したら。 WordPress搭載サイトには、機能が豊富な登録ページが必要です。 この記事では、QuickFlip jQueryライブラリによって可能になったフリッピング効果を備えた簡単なタブ付きログインと登録フォームウィジェットを構築します。
チュートリアルの前にジャンプしたい場合は、

ログインと登録ウィジェットのデモを表示し、ウィジェットプラグインをダウンロードできます。

物事をシンプルに保つために、登録フォームはユーザー名、パスワード、電子メールフィールドで構成されます。ログインフォームにはCaptchaが含まれません

それ以上の騒ぎなしで、ウィジェットの開発を始めましょう。

ウィジェット開発

最初に、プラグインヘッダーを含めてください。

<span><span><?php </span></span><span><span>/*
</span></span><span><span>Plugin Name: Tabbed Login Registration Widget
</span></span><span><span>Plugin URI: https://www.sitepoint.com
</span></span><span><span>Description: A tabbed login and registration widget for WordPress
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>License: GPL2
</span></span><span><span>*/</span></span></span>

ウィジェット開発に適切に入力する前に、警告を防ぐために出力バッファリングをオンにする必要があります。ヘッダー情報を変更できません - ヘッダーはすでにエラーを送信しました。

WordPressウィジェットを作成するには、標準のWP_Widgetクラスを拡張し、必要な方法を含め、最後にウィジェットを登録します。

<span>// Turn on output buffering
</span><span>ob_start();</span>

WP_Widgetクラスを拡張する子供クラスを作成します

staticプロパティ$ login_registration_statusは、登録とログインフォーム生成されたエラーメッセージを保存します。

__construct（）Magic Methodを使用してウィジェットに名前と説明を与えます。

<span>class Tab_Login_Registration extends WP_Widget {</span>

2つのメソッド - login_form（）とregistration_form（） - ログインと登録フォームのHTMLコードを返すことは、後で再利用するために作成されます。

<span>static private $login_registration_status;</span>

以下のRegister_user（）は、新しいユーザーの登録を処理します。

<span>/**
</span><span>	 * Register widget with WordPress.
</span><span>	 */
</span>	<span>function __construct() {
</span>		<span><span>parent::</span>__construct(
</span>			<span>'tab_login_registration', // Base ID
</span>			<span>__( 'Tabbed Login Registration Widget', 'text_domain' ), // Name
</span>			<span>array( 'description' => __( 'A tabbed login and registration widget for WordPress', 'text_domain' ), ) // Args
</span>		<span>);
</span>	<span>}</span>

メソッドが新しいユーザーを登録する方法は次のとおりです。

最初に、ユーザーが実際にアカウントを登録していることを確認します。これは、「サインアップ」ボタンがクリックされたことを検出することによって行われます。 /** * Returns the HTML for the login form * @return string */ static function login_form() { $html = '

';

$html .= '
'; $html .= '
'; $html .= ' Remember Me
'; $html .= '
'; $html .= ''; return $html; }

<span>/**
</span><span>	 * Returns the HTML code for the registration form
</span><span>	 * <span>@return <span>string</span>
</span></span><span>	 */
</span>	<span>static function registration_form() {
</span>		<span>$html = '<form method="post" action="'%20.%20esc_url(%20%24_SERVER%5B'REQUEST_URI'%5D%20)%20.%20'">';
</form></span>		<span>$html .= '<input type="text" name="registration_username" placeholder="Username"><br>';
</span>		<span>$html .= '<input type="password" name="registration_password" placeholder="Password"><br>';
</span>		<span>$html .= '<input type="email" name="registration_email" placeholder="Email"><br>';
</span>		<span>$html .= '<input type="submit" name="reg_submit" value="Sign Up"><br>';
</span>		<span>$html .= '';
</span>
		<span>return $html;
</span>	<span>}</span>

ユーザーが入力したユーザー名、パスワード、および電子メールはwp_create_user（）関数に渡され、新しいユーザーをWordPressデータベースに挿入します。

すべてがうまくいけば、プロパティ$ login_registration_statusがテキスト登録に設定されます。

ログインフォームが送信されると、login_user（）関数の下にユーザーのサイン。

<span>/**
</span><span>	 * Register new users
</span><span>	 */
</span>	<span>function register_user() {
</span>
		<span>if ( isset( $_POST['reg_submit'] ) ) {
</span>
			<span>$username = esc_attr( $_POST['registration_username'] );
</span>			<span>$password = esc_attr( $_POST['registration_password'] );
</span>			<span>$email    = esc_attr( $_POST['registration_email'] );
</span>
			<span>$register_user = wp_create_user( $username, $password, $email );
</span>
			<span>if ( $register_user && ! is_wp_error( $register_user ) ) {
</span>
				<span><span>self::</span>$login_registration_status = 'Registration completed.';
</span>			<span>} elseif ( is_wp_error( $register_user ) ) {
</span>				<span><span>self::</span>$login_registration_status = $register_user->get_error_message();
</span>			<span>}
</span>
		<span>}
</span>	<span>}</span>

login_user（）ユーザーにWordPressにどのようにサインインするかを説明させてください。 前述のRegister_user（）と同様に、最初に、$ _Post ['login_submit']が設定されているかどうかを確認して、ユーザーがログインしようとしていることを確認してください。

ユーザーが入力したログイン資格情報の関連配列$クレジットが作成されます。

アソシティブアレイは、認証のためにwp_signonに渡されます。

資格が有効であるとみなされ、wp_signonによってユーザーはwp_redirectによってwordpressダッシュボードにリダイレクトされます。

バックエンドウィジェット設定フォームは、ウィジェットのタイトルを含むフィールドで構成されるフォーム（）メソッドによって作成されます。

ウィジェットタイトルがフォームフィールドに入力されると、更新（）メソッドはデータベースにデータを消毒して保存して再利用します。

Widget（）メソッドは、WordPressのフロントエンドにタブ付きログインと登録フォームを表示します。

<span><span><?php </span></span><span><span>/*
</span></span><span><span>Plugin Name: Tabbed Login Registration Widget
</span></span><span><span>Plugin URI: https://www.sitepoint.com
</span></span><span><span>Description: A tabbed login and registration widget for WordPress
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>License: GPL2
</span></span><span><span>*/</span></span></span>

コード説明：JavaScriptコードは、タブとフリッピング効果をウィジェットに追加します。

login_user（）およびregister_user（）は、それぞれ登録ユーザーに署名するか、新しいユーザーを登録するために含まれています。

login_form（）およびregistration_form（）の静的メソッドが呼び出され、ログインと登録フォームが表示されます。

最後に、ウィジェットクラスを閉じます。

ウィジェットクラスTAB_LOGIN_REGISTRATIONは、Widgets_initフックを使用して登録する必要があるため、WordPress Internalsによって認識されます。

<span>// Turn on output buffering
</span><span>ob_start();</span>

jquery、ウィジェットCSS、QuickFlipライブラリを含めて、タブを取得してウィジェットの効果を繰り返す必要があります。

jQuery、およびQuickFlip JavaScriptとCSSが含まれています/WP_ENQUEUE_STYLEおよびWP_ENQUEUE_SCRIPT。

<span>class Tab_Login_Registration extends WP_Widget {</span>

ログインと登録ウィジェットのコーディングが完了しました。

以下は、ウィジェットのスクリーンショットです。

ウィジェットのデモを表示します

<span>static private $login_registration_status;</span>

wlap up

ウィジェットの構築方法とWordPressサイトでそれを実装する方法をさらに理解するには、jQuery、QuickFlip、およびウィジェットStyleSheetファイルを含むウィジェットプラグインをダウンロードします。

コード改善のための質問や提案がある場合は、コメントでお知らせください。

タブの構築についてよく尋ねるWordPressログインと登録ウィジェット

WordPressログインと登録ウィジェットの外観をカスタマイズするにはどうすればよいですか？

WordPressログインと登録ウィジェットの外観をCSSを使用して実行できます。 WordPressカスタマイザーまたはテーマのstyle.cssファイルに独自のCSSを追加できます。ウェブサイトのデザインに合わせて、色、フォント、サイズなどを変更できます。コードに変更を加える前に、常にサイトをバックアップすることを忘れないでください。

コーディングなしでログインと登録ウィジェットをWordPressサイトに追加できますか？コーディングせずにWordPressサイトにウィジェットします。これを行うことができるいくつかのプラグインがあります。いくつかの一般的なオプションには、ログインサイドバーウィジェットとユーザー登録とユーザープロファイルが含まれます。これらのプラグインは、使いやすいインターフェイスとカスタマイズオプションを提供します。

ログインと登録ウィジェットを追加した後にWordPress管理者にアクセスできない場合はどうすればよいですか？ tログインと登録ウィジェットを追加した後、WordPress管理者にアクセスすると、問題を引き起こすプラグインを無効にする必要がある場合があります。これを行うには、FTPを介してサイトのファイルにアクセスし、プラグインのフォルダーの名前を変更できます。これを行ったら、もう一度ログインしてみてください。まだ問題が発生している場合は、ホスティングプロバイダーに連絡するか、WordPressの専門家に助けを求める必要があるかもしれません。

WordPressのサイドバーにログインフォームを追加するにはどうすればよいですか？

WordPressサイドバーにログインフォームを追加することは、ウィジェットを使用して実行できます。 WordPressダッシュボードの外観>ウィジェットに移動し、メタウィジェットをサイドバーにドラッグします。メタウィジェットには、クリック時にログインフォームを表示するログインリンクが含まれています。 。これは、WPS Hide Loginなどのプラグインを使用して、またはサイトの.htaccessファイルを編集して手動で実行できます。新しいログインURLを書き留めて安全に保つことを忘れないでください。

WordPressサイトにログインウィジェットを追加するために使用できる他のプラグインはありますか？これにより、WordPressサイトにログインウィジェットを追加できます。いくつかの一般的なオプションには、カスタムログインページカスタマイザー、ログインデザイナー、テーマのログインが含まれます。これらのプラグインは、さまざまな機能とカスタマイズオプションを提供します。

WordPressログインと登録ウィジェットのセキュリティを確保するにはどうすればよいですか？強力でユニークなパスワードを使用して、WordPressサイトとプラグインを最新の状態に保ちます。 WordfenceやSucuriなどのセキュリティプラグインを使用して、追加の保護層を追加することもできます。ウィジェットを使用したWordPressサイドバー。ユーザー登録やユーザープロファイルなど、これを行うことができるいくつかのプラグインがあります。これらのプラグインは、使いやすいインターフェイスとカスタマイズオプションを提供します。

ログインと登録ウィジェットが正しく機能していない場合はどうすればよいですか？ 、プラグインを無効にして再アクティブ化してみてください。これが問題を解決しない場合、それは別のプラグインまたはあなたのテーマとの競合かもしれません。他のプラグインを1つずつ非アクティブにして、問題が解決されるかどうかを確認してください。そうでない場合は、プラグインのサポートに連絡したり、WordPressの専門家から助けを求めたりする必要があるかもしれません。

WordPressログインと登録ウィジェットにソーシャルログインオプションを追加できますか？ WordPressログインと登録ウィジェットへのソーシャルログインオプション。 NextEndソーシャルログインやWPソーシャルログインなど、これを行うことができるいくつかのプラグインがあります。これらのプラグインを使用すると、ユーザーはソーシャルメディアアカウントを使用して登録およびログインし、プロセスをより迅速かつ簡単にします。

以上がタブ付きWordPressログインと登録ウィジェットを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。