デザインのカスタマイズ(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ファイルは、WordPressのテーマフォルダ(アクティブなテーマのフォルダです)にアップロードしてください。
ファイル名は何でも大丈夫ですが、他のファイルを上書きしてしまわないようにご注意ください。
この説明では、aforms.cssというファイル名にしたものとして進めます。

次に、同じフォルダにAFormsの設定ファイル「aforms.ini」を作って、下記のように書いてください。

[general]
stylesheet = aforms.css

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

0 0