プラグイン「Custom Field Suite」のインストールとフィールド設定

更新日:2018/10/18

「Custom Field Suite」は、オリジナルのカスタムフィールドを設定できるプラグインです。
今回は、商品ページのSKU部分に表示する入力フィールドを作成します。

「Custom Field Suite」のインストール

  • 1)レフトナビの「プラグイン」→「新規追加」をクリックします。
プラグイン「Custom Field Suite」のインストールとフィールド設定
  • 2)画面右のキーワード入力欄に、「Custom Field Suite」と入力します。検索され、画面にプラグインが表示されます。
プラグイン「Custom Field Suite」のインストールとフィールド設定
  • 3)「今すぐインストール」ボタンをクリックします。
プラグイン「Custom Field Suite」のインストールとフィールド設定
  • 4)インストールが完了したら「有効化」ボタンをクリックします。
プラグイン「Custom Field Suite」のインストールとフィールド設定
  • 5)有効化すると、レフトナビの一番下に「フィールドグループ」が表示されます。これでインストール完了です。
プラグイン「Custom Field Suite」のインストールとフィールド設定
SKU詳細説明のフィールドグループ作成

商品ページに必要なフィールドグループを作成します。

  • 1)レフトナビの「フィールドグループ」→「フィールドのすべてのグループ」をクリックします。
プラグイン「Custom Field Suite」のインストールとフィールド設定

商品ページに必要なフィールドグループを作成します。

  • 2)左上にある「新規追加」ボタンをクリックします。
プラグイン「Custom Field Suite」のインストールとフィールド設定
  • 3)タイトルを入力します。
    今回は商品ページのSKUに入れるフィールドを作成したいので、わかりやすく「SKU詳細説明」と入力します。
プラグイン「Custom Field Suite」のインストールとフィールド設定
  • 4)「フィールド」エリアの右下にある「新規フィールドを追加」ボタンをクリックします。
プラグイン「Custom Field Suite」のインストールとフィールド設定
  • 5)「商品詳細説明欄」のフィールドを作成します。
プラグイン「Custom Field Suite」のインストールとフィールド設定
①ラベル
編集画面で表示される名前です。
今回は「商品詳細説明欄」と入力します。
②名前
phpに組み込むための名前なので、半角英数字で入力します。
今回は「iteminf」と入力します。
③フィードタイプ
編集画面で表示されるフィールドタイプを選択します。
今回は「リッチエディタ」を選択します。

①~③の設定ができたら、次に「カートボタン下説明欄」のフィールドを作成するので、④「新規フィールドを追加」をクリックします。

  • 6)「カートボタン下説明欄」のフィールドを作成します。
    設定方法は上記の「商品詳細説明欄」と同様です。
プラグイン「Custom Field Suite」のインストールとフィールド設定
①ラベル
今回は「カートボタン下説明欄」と入力します。
②名前
今回は「cartbot」と入力します。
③フィードタイプ
商品詳細説明欄と同様に、「リッチエディタ」を選択します。

今回作成するのは上記2つのフィールドになるので、「カートボタン下説明欄」の設定をした後に「新規フィールドを追加」ボタンはクリックしないでよいです。

  • 7)「配置ルール」エリアの「投稿タイプ」入力欄に、「post」と入力します。
プラグイン「Custom Field Suite」のインストールとフィールド設定
  • 8)最後に、右上にある「公開」エリアの「公開」ボタンをクリックします。
プラグイン「Custom Field Suite」のインストールとフィールド設定
  • 9)下図のように表示されれば、フィールドの設定は完了です。
プラグイン「Custom Field Suite」のインストールとフィールド設定

商品ページを確認すると、上記で設定した2つのフィールドが表示されています。

プラグイン「Custom Field Suite」のインストールとフィールド設定

ビジュアルモードのみの表示になるので、テキストを入力したり画像を挿入するだけの編集ならこのままで構いませんが、HTMLタグで編集したい場合は「表示オプション」の設定が必要です。

【HTMLタグでの編集エリアを表示させる場合】

  • 1)商品ページ編集画面の右上にある「表示オプション」をクリックします。
プラグイン「Custom Field Suite」のインストールとフィールド設定
  • 2)表示オプションのボックスが開きますので、その中にある「カスタムフィールド」にチェックを入れてください。
プラグイン「Custom Field Suite」のインストールとフィールド設定
  • 3)先ほど設定した2つのフィールドエリアの下に、「カスタムフィールド」が表示されます。
プラグイン「Custom Field Suite」のインストールとフィールド設定
  • 4)「商品詳細説明欄」と「カートボタン下説明欄」のフィールドのビジュアル部分に、仮にテキストを入力して、商品ページの変更を保存します。
プラグイン「Custom Field Suite」のインストールとフィールド設定
  • 5)変更を保存すると、カスタムフィールドに2つのエリアが表示されます。
    「名前」は、先ほど「フィールドグループ」でフィールドを作成した際に②で入力した半角英数字の名前です。
    右側の「値」にタグを入力していきます。
プラグイン「Custom Field Suite」のインストールとフィールド設定
カスタムフィールド編集・更新時の注意点

カスタムフィールドの値エリアにタグを入力し編集したら、それぞれ名前の下に表示されている「更新」ボタンをクリックして変更を保存します。

プラグイン「Custom Field Suite」のインストールとフィールド設定

「更新」ボタンをクリックすると背景が黄色に光り、元の色に戻ったら変更完了です。

※注意事項※

  • 1)入力編集後、こちらの「変更」ボタンを押さずにページ全体の「更新」ボタンをクリックしてしまうと、フィールドのビジュアル入力が優先されてしまうため、値エリアに入力したタグが消えてしまいます。
    変更後は必ず、それぞれ名前の下に表示されている「更新」ボタンをクリックして保存してください。
  • 2)名前の下に表示されている「更新」ボタンをクリックして変更を保存しても、フィールドのビジュアル入力エリアは更新されません。そのため、ページ全体の「更新」ボタンをクリックしてしまうと、1)と同じ状態になってしまうため、値エリアに入力したタグが消えてしまいます。
    変更を保存した後には、一度商品ページの編集画面から離脱し、一旦違うページへ移ることをおすすめします。
    一度違うページを表示してから戻った場合は、フィールドのビジュアル入力エリアが更新されているので、ページ全体の「更新」ボタンをクリックしても問題ありません。
商品ページへのフィールド表示

「②SKU詳細説明のフィールドグループ作成」で作成したフィールドを、商品ページSKUの下図の位置に表示されるように設定します。

プラグイン「Custom Field Suite」のインストールとフィールド設定

表示させるためには、「wc_item_single.php」と「wc_sku_select.php」の編集が必要です。
詳しくは『行列ショップカリキュラム 5-10』をご覧ください。


商品ページを構築する前に、必要なプラグインをインストール・設定しましょう。


プラグインのインストール・設定が完了したら、商品ページを構築しましょう。