• Home
  • MTAppjQuery
  • ブログ・ユーザー・ロールごとにフィールドの表示・非表示を切り替えるには

ブログ・ユーザー・ロールごとにフィールドの表示・非表示を切り替えるには

前回「フィールドやメニューの表示・非表示だけの制御だったら user.css がおすすめ」という記事を書きましたが、今回は、それをブログごと、ユーザーごと、ロールごとといった条件で表示・非表示を変える方法を紹介します。もちろん、MTAppjQuery がインストールされていることが前提です。

ブログごと

ブログごとについては、MTAppjQuery でインストールできるインデックステンプレートの user.js や user.css に書けば、それだけでブログごとになります。したがって、ここでは共通の user.css を読み込んでいたりする場合のお話になります。

MTAppjQuery をインストールしていると body に「 blog-id-* 」( * はブログID)という class が付与されます。これを利用すれば簡単です。

例えば、ブログIDが 2 のブログは記事しか使わないのでメニューを記事だけにしたいという場合は以下のようなコードを user.css に書きます。

.blog-id-2 #menu .menu-nav > li {
    display: none;
}
.blog-id-2 #menu .menu-nav #menu-entry {
    display: block;
}

ユーザーごと

ユーザーごとについても、body に「 author-id-* 」( * はログイン中のユーザーID)という class が付与されます。これを利用すれば簡単です。

例えば、ユーザーIDが 1 のシステム管理者以外のユーザーは、記事のキーワードとタグは使わないという場合は、以下のようなコードを user.css に書きます。 ただし、:not() セレクタは IE9 からのサポートなのでご注意を。

/* Hide the display options */
body:not(.author-id-1)#edit-entry #display-options {
    display: none;
}
/* Show the every fields */
body:not(.author-id-1)#edit-entry #sortable .field {
    display: block !important;
}
/* Hide the keywords and the tags */
body:not(.author-id-1)#edit-entry #sortable #keywords-field,
body:not(.author-id-1)#edit-entry #sortable #tags-field {
    display: none !important;
}

もし単純にユーザーを特定する場合は、body.author-id-2 などを頭に付ければ良いでしょう。

ロールごと

ロールごとは少し JavaScript を噛ませる必要があります。

ログイン中のユーザーが属しているロールの情報は、mtappVars.author_roles というプロパティに配列の形で入っています。したがって、この配列の中に、限定したいロールが存在するかを調べて分岐することになります。

例えば、ログイン中のユーザーが「編集者」というロールに属しているときは body に「 editor 」というクラスを付ける、というコードは下記のようになります。これは user.js に書きます。

if ($.inArray('編集者', mtappVars.author_roles) != -1) {
    $('body').addClass('editor');
}

後は、CSS 側で body.editor のようにして表示・非表示を調整すればOKです。

ここでは、「編集者」に属するユーザーのときは画面に「編集者モード」という文言を CSS で出してみるとします。

body.editor #content-header:before {
  content: "編集者モード";
  padding: 0 0.5em;
  font-size: 2em;
  font-weight: bold;
  background-color: #FFD4D1;
}

このコードを user.css に書けば、ユーザーが編集者に属するときだけ下図のようになります。

編集者モードの表示

まあ、このコード自体に実用性があるかは分かりませんが、1アイデアとして。

以上です。

MTAppjQuery について

Movable Type の管理画面をフロントエンドの知識だけで簡単にカスタマイズすることができます。

クライアントの満足度を高めるためにぜひお使いください。

MTAppjQuery の詳細を見る

Iamge Description

Recent Entries

Pickup Categories

Movable Type

CMSとして国内5万サイト以上に導入されている Movable Type に関する記事です。

Craft CMS

CMS 業界で注目の Craft CMS に関する記事です。Craft CMS はチーム全体をハッピーにしてくれる素晴らしい CMS です。