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

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

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

Custom Field Suite ループ行

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

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

Custom Field Suite アイコン

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

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

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

Custom Field Suite 項目名

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

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

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

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

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

※最近のWordPressで「$」を使うと競合し動かないので$→JQueryに変更しました。(WP6.2、Custom Field Suite 2.6.2.1 で確認済み)

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

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

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

Custom Field Suite タイトル変更

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

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

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

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

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

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

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

コメント

  1. 東 暢之 より:

    初心者です。私も困っていたのでありがたいと思い、やってみたのですが表示されませんでした

    Uncaught ReferenceError: JQuery is not defined
    at post.php?post=2&action=edit:47:1

    これってjQueryが読み込まれていないということのようですね

    こちらの環境は
    WordPress 6.2.2
    Custom Field Suite 2.6.3

タイトルとURLをコピーしました