How to Add Custom CSS Styles for Your WPForms

Markdownを表示

サイトにカスタムCSSスタイルを追加しますか？このチュートリアルでは、サイトにこれらのスニペットを追加する方法について、選択した各オプションの手順を追って説明します。

この役立つガイドを使用すると、サイトにスニペットを追加する方法を簡単に選択できます。実装方法を選択したら、開発者ドキュメントを探索して、サイトに追加したいCSSスニペットを選択し始めることができます！

利用可能なすべてのスニペットを確認するには、開発者ドキュメントをご覧ください。

サイトにカスタムCSSスニペットを追加する方法を実際に確認するには、ビデオチュートリアルをご覧ください。

実装オプション

CSSは、サイトやフォームのスタイリングに強力なツールです。サイトにカスタムCSSを追加するには、主に3つのアプローチがあります。

WPCodeプラグインを使用する（推奨）

WPCodeプラグインを使用すると、サイトにCSSスニペットを非常に迅速かつ簡単に追加できます。

このプラグインをサイトへのカスタムスニペットの追加に強く推奨する多くの理由の1つは、スニペットを保存する前に組み込みチェックがあることです。セミコロンが欠落している場合や、余分な括弧が追加されている場合、スニペットは保存されません。これにより、コピー＆ペーストしたCSSスニペットが正しくないためにサイトで問題が発生するのを防ぐことができます。そして、無料バージョンでも、スニペットがアクティブになる前にこの追加監査を受け取ることができます。

このプラグインの詳細については、専用ドキュメントを含む詳細情報については、サイトをご覧ください。

プラグインをインストールしたら、WordPressダッシュボードの左側メニューからコードスニペットメニューに移動し、+スニペットを追加を選択します。次に、カスタムコードを追加（新規スニペット）をクリックし、青いスニペットを使用ボタンをクリックして新しいCSSスニペットを作成します。

WPCodeメニューから、「+スニペットを追加」をクリックします

新しいスニペット画面が表示されたら、スニペットの目的を理解できるように、わかりやすい名前を付けます。コードタイプドロップダウンから、このスニペットにはCSSのみを追加するため、CSSを選択します。

コードプレビューセクションにCSSを追加します。ここでは、このドキュメントの目的で使用する例を示します。

/* write your CSS code here */
	ul#wpforms-999-field_27 li label, 
	ul#wpforms-999-field_26 li label {
    padding: 10px;
    transition: all ease 0.3s;
    background: linear-gradient(to right, #e27730 50%, #cd631d 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    color: white;
	}
	
	ul#wpforms-999-field_27 li.wpforms-selected label, 
	ul#wpforms-999-field_27 li label:hover, 
	ul#wpforms-999-field_26 li.wpforms-selected label, 
	ul#wpforms-999-field_26 li label:hover {
		cursor: pointer;
		border-radius: 2px;
		background-position: right top;
	}
	
	ul#wpforms-999-field_27 li input, 
	ul#wpforms-999-field_26 li input {
		display: none;
	}
	
	ul#wpforms-999-field_27 li, 
	ul#wpforms-999-field_26 li {
		float: left;
		width: auto;
		display: inline-block;
		padding: 10px 10px 10px 0!important;
	}

次に、挿入セクションが表示されます。CSSを追加するため、挿入方法で自動挿入を、場所でサイト全体ヘッダーを選択します。

スニペットを追加したら、スニペットを保存をクリックします。これによりスニペットは保存されますが、自動的に有効にはなりません。最初に保存すると、スニペットのステータスはデフォルトで非アクティブに設定されていることに気づくでしょう。単に非アクティブからアクティブにスイッチを切り替え、更新をクリックしてスニペットをアクティブに設定します。

WPCodeは、サイトにCSSを追加するための非常にシンプルで簡単な方法を提供します

CSS Heroの使用

コードに一切触れたくない場合は、WPFormsにCSS Heroの使用方法に関する完全なチュートリアルがあります。詳細については、このチュートリアルに従ってください。

子テーマの作成

子テーマは、より高度な開発に推奨されます。子テーマの作成方法については、このチュートリアルに従ってください。

各子テーマには必須のstyle.cssがあり、このファイルにカスタムCSSを追加します。

WordPress カスタマイザーの使用

WordPress 4.5以降、WordPressにはテーマやインストール済みのプラグインにカスタムCSSスタイルを追加するための組み込みツールが用意されており、CSSを追加するのに人気の選択肢となっています。

WordPress カスタマイザーの詳細については、ドキュメントを確認してください。

WordPress カスタマイザーは、外観 » カスタマイズ » 追加 CSS に移動することで見つけることができます。

カスタムCSSを追加するためのWordPressカスタマイザー

CSSを追加したら、公開ボタンをクリックして変更を保存することを忘れないでください。テーマがアクティブである限り、カスタムCSSは適用されます。

テーマを非アクティブ化すると、ここに追加されたカスタムCSSはテーマ自体にアタッチされているため、カスタムCSSは削除されます。

注記

サイトにカスタムコードを追加する場合は、コードを保護することが重要です。したがって、どの方法を選択しても、常にまずサイトをバックアップすることをお勧めします。そうすれば、必要に応じてサイトファイルやデータベースの古いバージョンにアクセスできます。

追加リンク

WPFormsのカスタムCSSに関する追加情報については、これらの参照リンクを確認してください。

よくある質問

Q: WPFormsのカスタムCSSを追加するのに、これはどのように役立ちますか？

A: このチュートリアルは、WPFormsのカスタムCSSに特化したものではありませんが、サイトに追加したいあらゆるカスタムCSSに適用されます。

上記のオプションの中から、チュートリアルセクションやスニペットセクションで言及されているWPFormsコードスニペットを含むコードスニペットを追加するのに最も簡単なものを見つけてください。

WPFormsのカスタムCSSスタイルを追加する方法

AI要約