Advanced Custom Fieldsでフィールドの追加ができない。

WordPressにオリジナルの項目(フィールド)を追加する事ができ、オリジナル投稿(Post)やタクソノミーなどにもフィールドを追加できる非常に便利なWordpressのプラグイン「Advanced Custom Fields」。

今回は、「Advanced Custom Fields」を導入したもののフィールドの追加ができない事象に遭遇し、はまった事がありましたので、その内容のご紹介となります。

(結論から言うと、単純なのですが。)

はじめに
Advanced Custom Fieldsでフィールド追加ができない。
調査した内容
気づいた内容
結論

はじめに

Advanced Custom Fields

「Advanced Custom Fields」(以降、ACFで略)の便利なところは、Wordpressのコンテンツにオリジナルのフィールドを追加できます。

追加できるフィールドは、テキスト、テキストエリア、画像のアップロード、セレクトボックスなど・・・様々。

例えば、Wordpressの管理画面にオリジナルの投稿(Post)として「商品」を追加したとします。

本来であれば、この商品に関する情報の入力部分をプログラムで一つ一つ書かなければなりませんが、この「ACF」があれば、GUIで簡単に追加ができます。

つまり、「商品」に関する情報、例えば、「商品名」、「商品価格」、「商品説明」、「商品画像」・・・などを自由に追加することができます。

取り出せる関数も準備されていますので(get_field関数)、この関数を使って管理画面から追加した「商品」に関する情報を取得し、Webサイトに掲載する事ができます。

もちろん、Wordpressのコンテンツにオリジナルのフィールドが追加できるため、投稿だけでなくタクソノミーなどにも追加でき、オリジナルの設定画面などを制作する際には、非常に便利なプラグインとなります。

細かい詳細は、他のサイトにお任せします。

今回は、このAdvanced Custom Fieldsを利用している中で、設定ができない事象が発生し少しはまりましたので、その内容の紹介となります。

Advanced Custom Fieldsでフィールド追加ができない。

その事象は突然、やってきました。

いつも通り、Advanced Custom Fieldsをインストールし設定しようとしていたところ、あれ、フィールドの追加ができない。

ボタンを押しても、うんともすんとも言わない。なぜ。

「+フィールドを追加」を押下しても追加できない

調査しました。

調査した内容

ネットで調べた主な内容は以下でしたが、該当しませんでした。

①「ACF」の登録したフィールド数が、PHPで一度にPOSTできる数の上限”max_input_vars”の上限を超えている。

→ そもそもプラグインをインストールしたばかりなので該当しない。

その他もろもろも該当しませんでした。

気づいた内容

実際に「ACF」の該当箇所のHTML文を見たところ、この「フィールドを追加」のaタグにhref=”#”が入っております。

<ul class="acf-hl acf-tfoot">
  <li class="acf-fr">
    <a href="#" class="button button-primary button-large add-field">+ フィールドを追加</a>
  </li>
</ul>

1

2

3

4

5

<a href="#" class="button button-primary button-large add-field">+ フィールドを追加</a>

</li>

</ul>

つまり、クラス名を使って、「フィールドを追加」がクリックされた際の処理を実装している事がわかります。(細かに内容までは見ていません。)

これでピンときました。

こちらで作り込んだJavaScriptのファイルには、ページ内ジャンプをヌルっと移動させるため以下の記載をしておりました。

jQuery(function($){
  var t = jQuery('.siteHeader-frm').outerHeight() + 20;
  jQuery("a[href^=#]").click(function () {
      var e = $(this).attr("href"), o = $("#" == e || "" == e ? "html" : e), n = o.offset().top - t;
      return jQuery("html, body").animate({scrollTop: n}, 500, "swing"), !1 });
});

1

2

3

4

5

6

jQuery(function($){