WordPressカスタマイザーを使用する場合、ログインやユーザー登録やウィジェットのフォームは「ログインしている状態」の時に表示できます。カスタマイザーはWordPress の様々なオプションを視覚的に管理できる便利なツールです。特にいくつかの小さな変更をのみを加える必要がある場合に、フォームにカスタム CSSを適用するために使用できます。

  • WordPress カスタマイザーを使用するには、ご自身がログインしていることを確認してください。次にサイトのWordPress ツールバーから「カスタマイズ」を選択します。通常であればメニューの左側にあります。 (注意:フルサイト編集 (FSE)をサポートしているテーマを使用している場合、このオプションがメニューから消えていることに気づくでしょう。この簡単な方法でメニューに再追加することができます。)
  • カスタマイザーが開いたら、作業するフォーム (ログインやユーザー登録など) があるページを開きします。
  • カスタマイザーのメニューから「WP-Members」を選択します。「WP-Members」メニュー内には「ログアウト状態のフォーム表示」チェックボックスがあります。 チェックを入れるとフォームの表示が許可されます。
  • これでカスタマイザー画面からフォームのCSSのカスタマイズを行えるようになります。メインメニューに戻って「追加 CSS」を選択してください。
原文を見る

The login, registration, and widget forms can be viewed in the “logged in state” when using the WordPress Customizer. The Customizer is a helpful tool that allows you to manage various WordPress options visually, and it can be used to apply custom CSS for your forms, especially if you just need to make a few minor changes.

  • To use the WordPress Customizer, make sure you are signed in. Then from the WordPress Toolbar on your site, select “Customize”, which will usually be to the left side of the menu. (NOTE: If you use a theme that supports Full Site Editing (FSE), you may notice this option is gone from the menu. You can add it back in with this simple trick.)
  • Once the Customizer is open, browse to a page that has the form you want to work on (such as login or register).
  • From the Customizer menu, select “WP-Members”. In the WP-Members Customizer menu item, you will have a checkbox to “show forms as logged out.”  Check that to allow the form to display.
  • Now you can begin customizing CSS for the form in the Customizer. Go back to the Customizer main menu and select “Additional CSS.”
https://rocketgeek.com/plugins/wp-members/docs/customizing-forms/using-the-wordpress-customizer/

カスタマイザーの使用例

以下はカスタマイザーを使用してログインフォームのラベルタグのフォントの太さのカスタム プロパティを作成する例です。

ログインフォームのショートコード ([wpmem_form login])が実装されたページを開きます。自分がログインしていることを確認し、WordPress ツールバーからカスタマイザーを開きます。カスタマイザー画面でWP-Members のメニューをクリックします(以下画像を参照):

カスタマイザーのWP-Membersメニュー項目を開いた状態で、「ログアウト状態のフォーム表示」チェックボックスをオンにします。ページにはログインしていないかのようにフォームが表示されます (下の画像を参照):

これでカスタマイザーのメインメニューに戻っても大丈夫です (カスタマイザーの左上にある「カスタマイズ中 WP-Members」の横にある戻る矢印をクリックします)。今度はカスタマイザーのメニューから「追加CSS」を選択します。これによりカスタムCSSエリアが開きます。 特定の要素を識別するためにブラウザインスペクターを使用することもできます。これを行うにはフォーム内の「ユーザー名」ラベルを右クリックします (この例ではこれをカスタマイズします)。設定に応じてインスペクタが右側または下に表示されます。 このスクリーンショットでは下部全体に表示されるように設定しています。右側の「label」タグのプロパティを見ると、font-weightが 800 であることがわかります。これを 300 に変更します。

HTML に注目してください。 WP-Members フォームの CSS をカスタマイズする際によくある質問は、「カスタマイズするにはどのタグを使用すればよいですか?」というものです。その答えはインスペクターを見れば分かります。この場合、フォームはID「wpmem_login」のdivタグでラップされているため、#wpmem_loginを指定します。HTML の label タグをカスタマイズしてプロパティに「label」を追加します。

その定義ではfont-weight: 300;を指定します。Note that anything applied in the Customizer’s Custom CSS is loaded after any theme or plugin styles so that the Customizer CSS will be the priority (latest has priority) without the need for a messy !important property. またカスタマイザーのカスタム CSS はライブビューなので変更がどのように表示されるかをすぐに確認できます。これにより変更を公開することなく必要に応じて調整を行うことができます。ただし、変更が完了したらそれが保存されるよう「公開」をクリックすることを忘れないでください!

変更を公開すると即座に適用されます。カスタマイザーとWordPress からログアウトしてログインページにアクセスすると変更が適用されていることがわかります。

この機能を使用すると、プラグインのカスタムスタイルシートを作成して読み込む必要がなく、プラグインのフォームやその他の要素をカスタマイズしてテーマとよりシームレスに溶け込むことができます。適用するカスタマイズのレベルによっては、プラグイン用に完全にカスタムしたスタイルシートが使用になる場合があることに注意してください。 ですが単純な変更であればカスタマイザーで十分です。

原文を見る

ere is an example of using the Customizer to create a custom property for the font weight of the login form label tag.

Browse the page containing the login form shortcode ([wpmem_form login]).  Make sure you are logged in and open the Customizer from the WordPress Toolbar. Click the WP-Members menu item in the Customizer (see image below):

With the WP-Members Customizer menu item open, check the box to “Show forms as logged out.”  The page should display the form as if you were not logged in (see image below):

Now you can go back to the main Customizer menu (click the back arrow next to “Customizing WP-Members” in the upper left of the Customizer). Now select “Additional CSS” from the Customizer menu.  This will open the Custom CSS area.  You may also want to use the browser inspector to help you identify certain elements.  To do that, right click the “username” label in the form (which is what we are going to customize in this example).  Your inspector may display to the right or the bottom depending on your settings. In this screenshot, we have it set to display across the bottom.  Note by looking at the “label” tag properties to the right that the font-weight is 800.  We will change it to 300.

Take note of the HTML. A common question when customizing CSS for the WP-Members forms is, “What specific tag do I use to customize?” But all this information is in the Inspector for you. In this case, the form is wrapped with a div tag with the ID “wpmem_login” so we will specify #wpmem_login.  We will be customizing the HTML label tag so we’ll add “label” to our property.

In that definition, we will specify font-weight: 300;  Note that anything applied in the Customizer’s Custom CSS is loaded after any theme or plugin styles so that the Customizer CSS will be the priority (latest has priority) without the need for a messy !important property.  AND the Customizer Custom CSS is a live view so you’ll see what the change looks like right away.  That way you can make adjustments as needed without having the publish to see them.  But don’t forget to click “Publish” when you are done so that it saves your changes!

Once you publish your changes, they will be applied live.  If you log out of the Customizer and from WordPress and browse to the login page, you’ll see your change applied.

Use this feature to customize your forms and other elements in the plugin to blend more seamlessly with your theme without the need to create and load a custom stylesheet for the plugin.  Keep in mind that depending on the level of customization you are applying, working with an entirely custom stylesheet for the plugin may be necessary.  But for simple changes, use the Customizer.

https://rocketgeek.com/plugins/wp-members/docs/customizing-forms/using-the-wordpress-customizer/