MTAppjQuery で、ログインしているユーザーが属するロールごとにボタンの表示・非表示を切り替える方法をご紹介します。
MTAppjQuery を使って、ログインしているユーザーが属するロールごとにボタンの表示・非表示を切り替える方法をご紹介します。
MTAppjQuery をインストールすると、管理画面のカスタマイズに使える、色々な変数が詰まった mtappVars
という JavaScript の変数(オブジェクト)が使えるようになります。
この mtappVars
の中の author_roles
というプロパティには、ログイン中のユーザーが、現在表示しているウェブサイト/ブログに持っているロールが配列としてセットされています。
(例)"author_roles" : ["ブログ管理者","テストロール"],
今回のカスタマイズの分岐の方法は、この配列を利用して body に class を振り、その class によって user.css でスタイルを変えるという流れになります。
今回は、「ID が 2 のブログで、"テストロール"に属するユーザーは左サイドバーの記事以外のメニューは非表示にする」のを想定して説明します。
ロールによって body にクラスを追加するには、user.js に下記のように記述します。
(function($){
if ($.inArray('テストロール', mtappVars.author_roles) !== -1) {
$('body').addClass('role-test');
}
})(jQuery);
これで、「テストロール」に属するユーザーの場合は、body に「role-test」というクラスが追加されます。
$.inArray
は配列の中に指定した値があるかどうかをチェックできる jQuery のメソッドです。指定した値が配列の中にないときは -1
が返されるので、あるかどうかは !== -1
のようにしてチェックできます。
jQuery.inArray() | jQuery API Documentation
続いて、user.css で下記のようにして表示を変更します。
body.blog-id-2.role-test #menu li:not(#menu-entry).top-menu {
display: none;
}
body.blog-id-2.role-test #menu li#menu-entry .sub-menu {
display: block !important;
border-bottom: 1px solid #c0c6c9;
border-radius: 0 0 3px 0;
}
セレクタの「.blog-id-2」でブログを特定し、先ほど追加した「.role-test」でロールを特定します。
:not(#menu-entry)
は CSS3 で追加された属性セレクタで #menu-entry を除外しています。
その後のブロックで、サブメニューを強制的に表示させたり border 関連のスタイルを整えています。この辺りは要件に合わせて調整してください。
今回は、スタイルの変更を例にしましたが、このように mtappVars.author_roles
を使ってロールごとに処理を分岐する方法は、他にも応用できますので、ぜひ活用ください。
以上です。