かゆいところにもうちょっと頑張って手を伸ばしてみる連載【WordPress 極】では、
WordPress のニッチなカスタマイズを紹介します。
今回は、人気プラグイン Custom Fields Suite（CFS）をより使いやすくカスタマイズしてみます。
概要
CFSは無料版でも設定のインポート・エクスポートや、ループ機能が使える便利なプラグイン。
Advanced Custom Fields の有料版だと機能過多の時にも便利ですよね。
ループ機能に不満があるとすると、
以下の画面キャプチャのようにループ行の中身がわからないこと。
CFSの設定画面の例
アコーディオンを展開すれば中身がわかりますが、
ループ数が増えると使いづらい。（右上の目玉マークで全アコーディオンを開けられます）
このままでは順番を並び変えたい時に不便。せめて「ループ行」と書かれた見出しに、中身がわかるテキストが表示されていれば・・・！
ループ行の見出しに任意のテキストを表示するハック
管理画面にJavaScriptを追記して、ループ行の見出しを書き換える処理を行います。
テーマファイルの functions.php に以下のコードを記述
※ fieldnameはCFSの設定にあわせて書き換えてください。
CFSの設定で指定したフィールドの「名前」を入力します。
クラシックエディタでも動作しました。
/**
* CFS のループ行で見出しに指定テキストを追記する処理
*/
add_action('admin_footer', function(){
?><script>
jQuery(function($){
const fieldname = 'image-title'; // CFS設定画面指定したフィールドの”名前”を記入
$('.cfs_loop .loop_wrapper').each(function(){
// ループ毎に指定フィールドの値を取得
const val = $(this).find(`.cfs_loop_body .field-${fieldname} > input`).val();
if(val !== undefined && val !== '') {
// 取得した値を見出し行に追記
$(this).find('.cfs_loop_head > span.label').append(' ' + val);
}
})
});
</script><?php
});
これで記事編集画面を開くと、ループ行にテキストが表示されているはず。
カスタマイズ後の表示
わかりやすくなりましたね。
このコードでは記事を保存しないとループの見出しは書き換わりませんが、
「ループが多いとわかりにくい」という課題は十分解決できていると思います。
弊社 Arrival QUALITY では、Web制作だけではなく「WordPressの更新がしづらい。」「Blog運用で困っていることがある」「ECのセールの売上が伸び悩んでる」など運用についてもサポートできます。
お気軽にご相談ください。
