カスタムスタイルシートを作成したら、それをどこかに保存する必要があります。アップグレードの際に上書きされる可能性があるため、このプラグインのフォルダー内に保存することはお勧めしません。

このプラグインをダウンロードすると全部で11個のスタイルシートが付いて来るので、それらを雛形として使うことができます。:

  • generic-no-float.css (このプラグイン既定の非フローティング要素 – このスタイルシートを雛形に使用することをお勧めします)
  • generic-rigid.css
  • wp-members-2016-no-float.css (Twenty Sixteenスタイルの非フローティング要素)
  • wp-members-2015-no-float.css (Twenty Fifteenスタイルの非フローティング要素)
  • wp-members-2015.css (Twenty Fifteenの基本css)
  • wp-members-2014-no-float.css (Twenty Fourteenスタイルの非フローティング要素)

このプラグインのcssフォルダには追加のスタイルシートが含まれている可能性があるので注意してください。また上記一覧にないスタイルシートは、このプラグインの過去バージョンとの互換性の目的でのみ保持されているため使用しないでください。

原文を見る

Once you have created a custom stylesheet, you will need to store it somewhere.  It is not recommended that you store it in the plugin folder structure as this may be overwritten in the event of an upgrade.

There are a total of eleven stylesheets included in the plugin download that you may use as a starting point:

  • generic-no-float.css (the plugin default, non-floated elements – this is the recommended stylesheet to use)
  • generic-rigid.css
  • wp-members-2016-no-float.css (non-floated elements in a Twenty Sixteen style)
  • wp-members-2015-no-float.css (non-floated elements in a Twenty Fifteen style)
  • wp-members-2015.css (based on Twenty Fifteen)
  • wp-members-2014-no-float.css (non-floated elements in a Twenty Fourteen style)

Note that there may be additional stylesheets included in the plugin’s css folder, but those not listed here should not be used as they are only maintained in the plugin for legacy purposes.

https://rocketgeek.com/plugins/wp-members/docs/customizing-forms/create-a-custom-stylesheet/

カスタムスタイルシートの読み込み

スタイルシートを読み込むには以下3つの方法があります。

原文を見る

There are three methods in which you may load a stylesheet.

https://rocketgeek.com/plugins/wp-members/docs/customizing-forms/create-a-custom-stylesheet/

用意されているスタイルシートから選ぶ

前述の4つの事前に用意されたスタイルシートから1つを選択するには、このプラグインのWP-Membersオプションタブに「スタイルシート:」というラベルのドロップダウンリストがあります。リストからスタイルシートの 1 つを選択して、このプラグインとともに読み込まれるスタイルシートを変更します。

このリストにはwpmem_admin_style_list filter フックを使って項目を追加できます。このフックを使用すると、ドロップダウンリストに独自のカスタムスタイルシートを追加するフィルター関数を記述できます。

原文を見る

To choose from one of the four preloaded stylesheets listed above, there is a dropdown selector in the plugin’s Options Tab labeled “Stylesheet:”  Choose one of the stylesheets from the list to change the stylesheet that will load with the plugin.

This list can be added to using the wpmem_admin_style_list filter hook.  This hook allows you to write a filter function that will add your own custom stylesheet(s) to the dropdown selector.

https://rocketgeek.com/plugins/wp-members/docs/customizing-forms/create-a-custom-stylesheet/

カスタムスタイルシートのアドレスを設定する

自分でカスタムスタイルシートを作成した場合にそれを読み込むようプラグインを設定する最も簡単な方法は、このプラグインのWP-Membersオプションタブの「カスタムスタイルシート」フィールドに絶対URLを指定することです。

このフィールドにアドレスを入力すると、デフォルトのスタイルではなくあなたの作成したカスタムスタイルが自動的に読み込まれます。この設定にURLが指定されている場合、このプラグインは前述のドロップダウンリストにあるスタイルシートの代わりにそちらを読み込みます。 

このスタイルシートには必ずhttpのフルパスを設定してください(このような: http://www.mysite.com/wp-content/my-theme/my-wp-members-styles.css)。ブラウザを使ってURLが間違ってないか再確認することをお勧めします。ブラウザにスタイルシートが表示されない場合はURLが間違っています。

この方法でスタイルシート設定する詳細についてはこの投稿を参照してください。そうすればテーマブラウザでもスタイルシートを編集できるようになります。

原文を見る

If you have created a custom stylesheet, the simplest way to set the plugin to load it is to specify its full URL in the “Custom Stylesheet” field in the plugin’s Options Tab.

If you provide a location in this field, your custom styles will be loaded automatically rather than the default styles.  When a value is provided in this setting, the plugin will load this instead of any stylesheet from the dropdown list above.

You must provide the full http path to the stylesheet (such as: http://www.mysite.com/wp-content/my-theme/my-wp-members-styles.css).  It is recommended that you double check the URL in your browser.  If you can’t see the stylesheet in the browser, your URL is incorrect.

See this post for more information on setting up a stylesheet this way so that it can also be edited in your theme browser.

https://rocketgeek.com/plugins/wp-members/docs/customizing-forms/create-a-custom-stylesheet/

wp_enqueue_scriptsを使ってスタイルシートを読み込む

これはカスタムスタイルシートを読み込むためのより洗練された、より信頼性の高い方法です。やり方についてはこの記事で説明しています。wp_enqueue_scripts を使ってカスタムスタイルシートを読み込む場合でも、前のやり方で説明したようにテーマフォルダに保存してオンライン編集を行うことができます。

原文を見る

This is the more elegant way of loading a custom stylesheet, and it is more reliable. This post will describe how to do it.  If you use the wp_enqueue_scripts method of loading a custom stylesheet, you can still store it in your theme folder to allow online editing as described in the previous method.

https://rocketgeek.com/plugins/wp-members/docs/customizing-forms/create-a-custom-stylesheet/