WP Simple PayにカスタムCSSを追加する方法

WP Simple Pay の支払いフォームをカスタム CSS でスタイル設定する必要がありますか？ フォームやその他のページ要素にカスタム CSS を WordPress サイトに追加するには、いくつかの方法があります。

Simple Pay Pro → 設定 → 一般 → 詳細設定 にアクセスすることで、WP Simple Pay の「意見のあるスタイル」を無効にし、テーマのスタイルを継承できます。

1. テーマのスタイルシートファイルを直接編集します（通常は style.css）。ただし、テーマのアップデートで変更が上書きされる可能性があるため注意してください。そのため、#2 または #3 をお勧めします。
2. テーマに別の CSS ファイルを追加し、functions.php または個別のカスタムプラグインで参照するために `wp_enqueue_style` 関数を使用します。
3. 無料プラグインの WP Code を使用して、テーマのヘッダーに CSS を追加します。コードスニペット → ヘッダー & フッター に移動し、以下に示すように CSS を追加します。

一部のページからプラグインスタイルをデキューする必要がある場合は、コードスニペットライブラリ の このスニペット を参照してください。

カスタマイズのヒント

現時点では、WP Simple Pay の支払いフォーム用の CSS スタイルガイドはありません。変更が必要なクラス名と ID 名を見つける最善の方法は、ブラウザの開発者ツールを使用してページ要素を検査することです。

この方法の開始に役立つ素晴らしいガイドはこちらです：要素の検査の基本：DIY ユーザー向け WordPress のカスタマイズ

WP Simple Pay フォーム要素の CSS クラスと ID は、通常 `simpay-` で始まります。

フォーム ID が 83、テキストフィールド ID が 4 の例を次に示します。

<style>
#simpay-form-83 #simpay-text-4 { display: none; }
</style>

埋め込みまたはオーバーレイフォーム表示オプションを使用しているときに、チェックアウトボタンの色を緑から青に変更する例を次に示します。

<style>
.simpay-checkout-btn { background-color: #428bca !important; }
.simpay-checkout-btn:hover { background-color: #037ad0 !important; }
</style>