Custom Field Suiteで「ループ行」のタイトルを入力した「項目名」にすると使いやすい！

WordPressのプラグイン「Custom Field Suite」は、複数の繰り返し項目ができてとっても便利ですね！無料で利用できます！

しかしながら、繰り返し項目を複数つくると、タイトルは「ループ行（指定したループタイトル名）」のみ表示されるため、全部同じタイトルとなり内容が分からなく使いずらいです。

運用するお客様からも、タイトルがすべて「ループ行」と同じなのでどれを編集すればいいかわからない！

と言われ、「目」のアイコン（アコーディオンを全て開くボタン）を押せば全部内容が確認できますよ。

と返答するも、全部アコーディオンを開いてしまうと、スクロールが長くなり余計大変！

ドラックして順番を入れ替えるなんてとても使いづらくてできません！

ループタイトルを項目名にする

上の図の例で言うと「ループ行」が項目名の「所在地」になれば、アコーディオンがとじたままででも、タイトルだけみて判断が可能ですね！

ということで、ループのタイトル「ループ行」を内容のテキストフィールド「項目名」と同じにできないか四苦八苦しました。

jQueryでCustom Field Suiteのループタイトルを変更

以下、WordPressの管理画面にjQueryを使って、タイトル「ループ行」を、お客様が指定した「項目名」に置き換えています。

function my_admin_script() {
  echo '<script>
  (function($) {
  window.addEventListener("DOMContentLoaded", function(){
    $(".loop_wrapper").each(function(index) {
  var target = $(this).find(".cfs_text input").val();
  $(this).find("span.label").text(target);
  });
  });
})(jQuery);
</script>'.PHP_EOL;
}
add_action("admin_print_footer_scripts-post.php", 'my_admin_script');

※WP6.４で動かなくなりましたので、修正しました。検証済みです。（2024/2/29）

（body要素を閉じる直前に読み込むに変更しました。admin_print_footer_scripts-post.php）

JQueryでループ行ごとに、「項目名」の値を取ってきて、親要素の「ループ行」のテキストを書き換えれば、完成です。

WordPressのJQueryを読み込んで、DOMを完成させてからでないと上手くいかなかったので「window.addEventListener(“DOMContentLoaded”, function(){」を指定しています。

なので、表示してすぐはすべてのタイトルが「ループ行」ままですが、1～２秒後には、指定した項目名で表示されます。

これで、修正や並び替えをしたい場合でも、簡単に実行できますね！

親子ループにも対応しています！

ただし、新規で作成した、ループ行には即対応できず、一度保存してからでないと置き返されません。

JQueryのchangeイベントを使えばできそうでしたが、諦めました・・・

Custom Field Suiteのループ作成で、ループ行のタイトルを変更したい場合は、是非ご利用ください！

※WordPress、プラグインのバージョンによってうまく動作しない場合がありますが、この考え方で多少、修正すれば実現できるのではと思います。

関連記事：WordPress 複数カテゴリに属する記事を〇件づつ取得し表示する