デザインのカスタマイズ（1） 大まかな手順

AFormsは、scssを編集してデザインをカスタマイズできるように作られています。
今回から、3つの記事に分けて、フォームのデザインをカスタマイズする方法を説明していきます。

第1回の今回は、デザインカスタマイズの大まかな手順を説明します。

元のscssファイルを取ってくる

AFormsには標準のデザインを記述したscssファイルが同梱されていますので、それを修正するのがオススメです。
標準のscssファイルは次の場所にあります。

wp-content/plugins/aforms/src/asset/front.scss

これをローカルにコピーしましょう。

なお、scssファイルは他にもありますが、それらは管理画面のデザインを記述したものですので、フォームのデザインカスタマイズでは使いません。

scssを編集する

取ってきたscssファイルを好みのデザインに編集してください。
scssファイルの中身については、別の記事で解説します。

cssへの変換

デザイン変更したscssファイルをcssに変換します。

変換の方法はたくさんありますので、ご自身が慣れた方法でやっていただくのが良いです。
この記事では、慣れていない方向けに、手軽に変換できる方法を2つご紹介します。

• sassmeister
  ブラウザで動くツールで、scssの内容を貼り付けるとcssに変換して表示してくれます。
  これで元ファイルをcssに変換してしまって、cssの状態でデザインを変更する手もありますね。
• Easy Sass
  コードエディタVisualStudio Codeのプラグインで、scssファイルを保存すると勝手にcssに変換してくれます。
  別のエディタをお使いの場合でも、似たようなプラグインを探してみてはいかがでしょうか。

cssファイルの設置

出来上がったcssファイルを、サーバー上のブラウザからアクセスできる位置にアップロードしてください。
最後に、 aforms_get_stylesheet フィルタを使ってcssファイルの位置をAFormsに知らせます。

たとえば、下記のような記述をご利用中のテーマのfunctions.phpに追記します。

function my_aforms_get_stylesheet($url, $form) {
    return "https://example.com/wp-content/themes/my-theme/aforms-front.css";
}
add_filter("aforms_get_stylesheet", "my_aforms_get_stylesheet", 3, 2);

ここまでで手順はおしまいです。
フォームを表示してみて、デザイン変更がうまくいっているか確認してみてください。