「Custom Field Suite」は、オリジナルのカスタムフィールドを設定できるプラグインです。
今回は、商品ページのSKU部分に表示する入力フィールドを作成します。
- １）レフトナビの「プラグイン」→「新規追加」をクリックします。
- ２）画面右のキーワード入力欄に、「Custom Field Suite」と入力します。検索され、画面にプラグインが表示されます。
- ３）「今すぐインストール」ボタンをクリックします。
- ４）インストールが完了したら「有効化」ボタンをクリックします。
- ５）有効化すると、レフトナビの一番下に「フィールドグループ」が表示されます。これでインストール完了です。
商品ページに必要なフィールドグループを作成します。
- １）レフトナビの「フィールドグループ」→「フィールドのすべてのグループ」をクリックします。
商品ページに必要なフィールドグループを作成します。
- ２）左上にある「新規追加」ボタンをクリックします。
- ３）タイトルを入力します。
今回は商品ページのSKUに入れるフィールドを作成したいので、わかりやすく「SKU詳細説明」と入力します。
- ４）「フィールド」エリアの右下にある「新規フィールドを追加」ボタンをクリックします。
- ５）「商品詳細説明欄」のフィールドを作成します。
今回は「商品詳細説明欄」と入力します。
今回は「iteminf」と入力します。
今回は「リッチエディタ」を選択します。
①～③の設定ができたら、次に「カートボタン下説明欄」のフィールドを作成するので、④「新規フィールドを追加」をクリックします。
- ６）「カートボタン下説明欄」のフィールドを作成します。
設定方法は上記の「商品詳細説明欄」と同様です。
今回作成するのは上記２つのフィールドになるので、「カートボタン下説明欄」の設定をした後に「新規フィールドを追加」ボタンはクリックしないでよいです。
- ７）「配置ルール」エリアの「投稿タイプ」入力欄に、「post」と入力します。
- ８）最後に、右上にある「公開」エリアの「公開」ボタンをクリックします。
- ９）下図のように表示されれば、フィールドの設定は完了です。
商品ページを確認すると、上記で設定した２つのフィールドが表示されています。
ビジュアルモードのみの表示になるので、テキストを入力したり画像を挿入するだけの編集ならこのままで構いませんが、HTMLタグで編集したい場合は「表示オプション」の設定が必要です。
【HTMLタグでの編集エリアを表示させる場合】
- １）商品ページ編集画面の右上にある「表示オプション」をクリックします。
- ２）表示オプションのボックスが開きますので、その中にある「カスタムフィールド」にチェックを入れてください。
- ３）先ほど設定した２つのフィールドエリアの下に、「カスタムフィールド」が表示されます。
- ４）「商品詳細説明欄」と「カートボタン下説明欄」のフィールドのビジュアル部分に、仮にテキストを入力して、商品ページの変更を保存します。
- ５）変更を保存すると、カスタムフィールドに２つのエリアが表示されます。
「名前」は、先ほど「フィールドグループ」でフィールドを作成した際に②で入力した半角英数字の名前です。
右側の「値」にタグを入力していきます。
カスタムフィールドの値エリアにタグを入力し編集したら、それぞれ名前の下に表示されている「更新」ボタンをクリックして変更を保存します。
「更新」ボタンをクリックすると背景が黄色に光り、元の色に戻ったら変更完了です。
※注意事項※
- １）入力編集後、こちらの「変更」ボタンを押さずにページ全体の「更新」ボタンをクリックしてしまうと、フィールドのビジュアル入力が優先されてしまうため、値エリアに入力したタグが消えてしまいます。
変更後は必ず、それぞれ名前の下に表示されている「更新」ボタンをクリックして保存してください。 - ２）名前の下に表示されている「更新」ボタンをクリックして変更を保存しても、フィールドのビジュアル入力エリアは更新されません。そのため、ページ全体の「更新」ボタンをクリックしてしまうと、１）と同じ状態になってしまうため、値エリアに入力したタグが消えてしまいます。
変更を保存した後には、一度商品ページの編集画面から離脱し、一旦違うページへ移ることをおすすめします。
一度違うページを表示してから戻った場合は、フィールドのビジュアル入力エリアが更新されているので、ページ全体の「更新」ボタンをクリックしても問題ありません。
「②SKU詳細説明のフィールドグループ作成」で作成したフィールドを、商品ページSKUの下図の位置に表示されるように設定します。
表示させるためには、「wc_item_single.php」と「wc_sku_select.php」の編集が必要です。
詳しくは『行列ショップカリキュラム 5-10』をご覧ください。
商品ページを構築する前に、必要なプラグインをインストール・設定しましょう。
プラグインのインストール・設定が完了したら、商品ページを構築しましょう。
