フォームをカスタマイズする - 海外ドキュメント翻訳サイト

WP-Members フォームにおけるスタイル要素とレイアウト要素は全てCSSによって定義されます。このプラグインにはフォームの見た目や印象、その他要素をカスタマイズするためのいくつかの選択肢があります。

WordPressカスタマイザーを使用して基本的な変更をCSSに適用する。
プラグインのメインオプションタブで別のスタイルシートを選択する。
カスタムスタイルシートを作成して読み込む。

このプラグインではフォームのコードを直接編集しないでください。

原文を見る

All of the style and layout elements of the WP-Members forms are driven by CSS. There are several options for customizing the look and feel of the forms and other elements in the plugin.

Use the WordPress Customizer to apply basic CSS changes.

Select a different stylesheet in the plugin’s main Options tab.

Create and load a custom stylesheet.

You should NOT edit the form code directly in the plugin.
https://rocketgeek.com/plugins/wp-members/docs/customizing-forms/

CSSの範疇を超えたカスタマイズ

大抵のカスタマイズではスタイルシートをカスタマイズするだけで十分です。しかしながら、このプラグインや付属のスタイルシートにあるものだけでは足りず、特定のスタイル定義や特定のHTMLタグやその他の要素を挿入する必要がある場合があります。

このプラグインのフォーム構築機能には、フォームに出力されるHTMLをカスタマイズできるフィルターフックがいくつかあります。これを使うことでタグやクラスやIDを追加できるようになります。

原文を見る

Customizing the stylesheets should suffice for most customization. However, there may be times when you need to insert certain style definitions, specific HTML tags, other elements beyond what is already in the plugin or in the included stylesheets..

There are several filter hooks in the plugin’s form building functions that allow you to customize the HTML that is output for the forms. This allows you to add your tags, classes, or IDs.
https://rocketgeek.com/plugins/wp-members/docs/customizing-forms/

フォームフィルターフック

利用可能なフォームフィルターフックはいくつかあります。これらのフィルターフックを使用するとプラグインによって生成されるフォーム要素を独自のものに置き換えることができます。このサイトにはこれらのフィルターを使用してさまざまなフォームをカスタマイズするための多くのサンプル例とチュートリアルがあります。

原文を見る

There are a number of form filter hooks available. These filter hooks give you the ability to replace what is generated by the plugin with your own form elements. There are many examples and tutorials on this site on how to use these filters to enable various form customizations.

wpmem_sidebar_form (tag)

wpmem_login_form_be fore (tag)

wpmem_login_form (tag)

wpmem_register_form_before

wpmem_register_form (tag)

wpmem_register_heading

wpmem_user_edit_heading

wpmem_recaptcha (tag)

wpmem_tos_link_txt

https://rocketgeek.com/plugins/wp-members/docs/customizing-forms/

サンプル例

以下はこのプラグインのいくつかのフィルターフックを使用したカスタムフォームレイアウトのサンプル例が書かれた投稿です。:

原文を見る

Here are some posts that have some custom form layout examples using some of the plugin’s filter hooks:

Customizing form CSS: Adjusting floated form elements [free]

Customizing form CSS: Setting maximum form width [free]

Customizing form CSS: Custom login form with side-by-side inputs [free]

Customizing form CSS: Login widget with inline inputs [member only]

https://rocketgeek.com/plugins/wp-members/docs/customizing-forms/