管理画面のカスタム設定タブのUIをやめるカスタマイズ方法
a-blog cms のカスタムフィールドは、ブログ・カテゴリー・エントリー・ユーザー・モジュール とありますが、今回は カテゴリー・ユーザー のタブの数が少ない時に使えるカスタマイズをご紹介します。
例えば、こんな経験はないでしょうか？
カスタムフィールドに必須項目がある時に、基本情報のタブ側で保存をするとエラーメッセージがカスタム設定側のタブで表示されていてなぜ保存できないのか理解しづらい状況になるという経験とか。
これは、複数のタブにあるフォームの項目全部を保存することを行なっているので、見えてない側もエラーチェックが効いてしますためです。
実装方法
a-blog cms のカスタムフィールドは field.html に書こうというルールがありますが、以下の <script> タグ を field.html に追記ください。
<script>
window.addEventListener('DOMContentLoaded', () => {
// タブメニューとタブパネルを取得
const adminTabs = document.querySelector('.acms-admin-tabs');
const adminTabsList = adminTabs.querySelector('.js-acms_admin_tabs');
const adminTabsLinks = adminTabsList.querySelectorAll('a');
const adminTabsTargetId = Array.from(
adminTabsLinks,
element => element.getAttribute('href')
);
const adminTabsTarget = adminTabsTargetId.map(
item => adminTabs.querySelector(item)
);
// タブメニューを非表示
adminTabsList.classList.add('acms-admin-hide');
// ☆タブパネルの除外リスト
const excludePanels = ['acms_box3'];
// タブパネルを表示
adminTabsTarget.forEach(element => {
// ☆除外リストに入っているパネルは非表示にする
if (excludePanels.includes(element.id)) {
element.classList.add('acms-admin-hide');
return;
}
element.classList.add(
'acms-admin-block',
'acms-admin-margin-top-medium'
);
});
});
</script>他のアイデアとしては、このようなタブを利用者側で解除できるようにするというカスタマイズも考えていましたが、この方法で結構いいのではないかと思っています。
今回、ユーザーの管理画面を使いやすくということでの提案ではあったのですが、Ver. 3.1 から管理画面の URL でないところでユーザー情報を編集できるような実装ができるようになったので少し利用の場が減ってしまいましたが、何かの際にはご利用になってみてください。
