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

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

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

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

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

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

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

ループタイトルを項目名にする
jQueryでCustom Field Suiteのループタイトルを変更
1. いいね:

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

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

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

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

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

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

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

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

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