koike

【WordPress】プラグインCustom Field Suiteで管理画面をすっきり見せるための工夫

オリジナルのカスタムフィールドを設定する場合、プラグイン「Custom Field Suite」を使用する機会が多くなってきました。
今回はCustom Field Suiteに標準で搭載されている機能を活用して管理画面をすっきり見せるために工夫している点をご紹介したいと思います。

カスタムフィールドが多い場合はタブ機能を使う

Custom Field Suiteのフィールドタイプには「タブ」という機能が用意されています。

post8147-img01

タブ機能を使うことで、カスタムフィールドをカテゴライズすることができます。
カスタムフィールドの数が多くなってしまう場合は、フィールドをズラーっと羅列するのではなく、タブ切り替えですっきり見せる工夫をしています。

post8147-img02

同じフォーマットのカスタムフィールドセットが続く場合はループ機能を活用する

Custom Field Suiteには標準でループ機能がついています。
例えば、【画像/名前/プロフィール文】など複数の項目を1セットにしたフィールドセットが何度も必要な場合は、ループ機能の活用が有効です。

post8147-img03

ループ機能を使うと、投稿によってフィールドセットを必要な数だけ登録することが可能です。
(「新規フィールドの追加」ボタンをクリックすると新しいフィールドセットが表示されます。)

post8147-img04

ループ機能で追加したカスタムフィールドを表示する場合は、下記のように記述します。

■単独ループの場合

<?php $fields = $cfs->get('loop');
foreach ($fields as $field) {
    echo $field['sample1'];
    echo $field['sample2'];
}
?>

■ループの中にループがある場合

<?php $fields = $cfs->get('loop');
foreach ($fields as $field) {
    echo $field['sample1'];
    $fieldloops = $field['sample2'];
    foreach ($fieldloops as $fieldloop) {
        echo $fieldloop['sample3'];
    }
}
?>

※ループ機能を使うと容易にカスタムフィールドを増やすことができるのですが、
カスタムフィールを増やしすぎるとphp.iniの設定により不具合が生じる可能性があるので注意が必要です。
(詳しくはこちら: WordPressのカスタムメニューが82個以上登録できねーおらおらーって時の対処方法 )

デフォルトのコンテンツエディタを隠したり、カスタムフィールドの配置位置を考慮する

フィールドグループの編集画面の一番下に「エクストラ」という項目があります。

post8147-img05

【順序】 数字を設定することによりフィールドグループの表示順序を制御することができます
【位置】 フィールドグループを表示する位置を選択することができます
【表示設定】 「コンテンツエディタを隠す」にチェックを入れることでコンテンツエディタを非表示にできます

post8147-img06

上図のように、コンテンツエディタが不要な場合は非表示にしたり、公開ボタンの近くにあるほうがチェックしやすい項目などはサイドに配置するなどして、投稿者が直感的に操作しやすいような画面設計を心がけています。

 

【参考サイト】
【WPプラグイン】Custom Field Suite(カスタムフィールドスイート)の使い方と表示方法

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら