MT5の管理画面カスタマイズはjQueryだけでいける？

MovableTypeの管理画面カスタマイズの方法といえば、

プラグインを作る
alt-tmplに、管理画面のテンプレートをコピーしてカスタマイズ

というのが、これまで良く使われきた手法でした。

私も、alt-tmplにせっせとテンプレートをコピーして、かなりのカスタマイズをしたことがありますが、ちょっとしたカスタマイズのためにテンプレートの解析をするのは面倒だし、敷居が高いのです。

でも、「MTAppjQuery」というプラグインを見つけてから、「普通のカスタマイズならjQueryだけでいけるんじゃね？」って思っています。

「MTAppjQuery」は、MT5の管理画面をjQueryでカスタマイズするためのプラグインです。
ラベルの変更、フィールドの並べ替えなど便利な関数も用意されていて、jQueryを知らなくてもある程度のカスタマイズが出来てしまうスグレモノです。

その中で私が注目したのは、「user.js」というスクリプトに、自分でガシガシ書けば管理画面に反映されるという点。
そして、このプラグインは、user.js を読み込む前に、ブログIDとユーザーIDが変数で定義されているので、管理者以外に適用するとか、ブログごとに違う処理をするのも簡単なのです。

というわけで、先日やった案件で行ったカスタマイズをちょっと紹介したいと思います。

1 １．ブログごとに管理画面を色分けしたい
2 ２．コメント不可なので、コメント管理画面は非表示にする
3 ３．一般ユーザーがユーザー情報を修正できないようにする
4 ４．管理画面のフィールドに注意書きをする
5 ５．ブログ記事作成時に、デフォルトカテゴリを設定する
6 ６．ブログ記事編集画面の右カラムのブロックの位置を変える

１．ブログごとに管理画面を色分けしたい

今回の案件は、総合トップページに、4つのブログがぶら下がる構成でした。
こういうときって、よくブログを間違いませんか？
間違わないようにするためには、ブログごとに管理画面の背景を色分けしておくといいです。

if(blogID=='2'){
  $('#menu-bar').css('background-color','#3399cc');
  $('body').css('background-color','#ddeeff');
}
if(blogID=='3'){
  $('#menu-bar').css('background-color','#cc6600');
  $('body').css('background-color','#fff0cc');
}
if(blogID=='4'){
  $('#menu-bar').css('background-color','#339900');
  $('body').css('background-color','#eeffcc');
}
if(blogID=='5'){
  $('#menu-bar').css('background-color','#ED5871');
  $('body').css('background-color','#fff0f0');
}

２．コメント不可なので、コメント管理画面は非表示にする

ロールで、「ブログ記事の管理」を有効にすると、なぜか「コメント・トラックバックの管理」がもれなくついてきてしまいます。
すると、システムやブログでコメントを禁止していても、左カラムにメニューが出てきてしまうのです。
そこにアクセスしてもコメントは表示されないのだから問題はないのですが、使えない機能がメニューにあるというのは製品としてどうよ？　ということで、コメント・トラックバックメニューを非表示にします。

$('#menu-feedback').hide();

メニューを消すのは、FireBug等で、非表示にしたい管理画面の場所のidやclassを調べて、hideしまくればいいだけです。
ただ、classは結構使い回しされているので、外側のidとセットで指定しないと、必要な部分まで非表示になってしまうので要注意です。

３．一般ユーザーがユーザー情報を修正できないようにする

今回、複数のユーザーがいて、その情報を使って分岐をしているところがあるのですが、うっかりユーザー名や表示名を変えられてしまうと困るので、ユーザー情報にアクセスできないようにします。

if(authorID!='1'){
  $('#dashboard .user-stats p').hide();
  $('#utility-nav-list #user a').removeAttr("href");
}

AuthorID=1は管理者ですので、管理者以外に適用します。
1行目は、ユーザーダッシュボードの「ユーザー情報の修正」リンクです。
2行目は、ツールバーにあるユーザー名です。
実は、ここをクリックしてもユーザー情報にアクセスできてしまいますので、リンク先だけ削除してしまいました。

４．管理画面のフィールドに注意書きをする

前項ではユーザー情報画面へアクセスできないようにしていましたが、その前は、触られたくないフィールドを編集不可にして注意書きを入れていました。

$('body#edit-author form#profile input#nickname').attr('readonly','readonly')
.after('<div class="hint last-child">変更には管理者権限が必要です。</div>');
$('body#edit-author form#profile fieldset:gt(0)').hide();

ユーザーの表示名を変えられたくなかったので、readonly属性をつけています。
さらに、「変更には管理者権限が必要です」とコメントを入れました。
class=hintというのは、MTの管理画面でフィールドの下に入っているコメントについているclassです。
さらに、システム権限の部分は非表示にしました。
システム権限の部分に一意のidや特定できるclassがついていなかったので、2個目以降のfieldsetという指定の仕方になっています。

５．ブログ記事作成時に、デフォルトカテゴリを設定する

$("a[href*='mode=view&_type=entry&blog_id=']").attr('href',function(){
  return $(this).attr('href')+'&category_id=2';
}}

ブログ記事の新規作成のときだけ、クエリパラメーター「category_id=n」を追加してます。
ちょっと強引かと思いましたが、問題なく動いています。

６．ブログ記事編集画面の右カラムのブロックの位置を変える

$('#entry-status-widget').insertAfter('#assets-field'); // 更新状態の表示位置を下へ
$('#entry-publishing-widget').insertAfter('#assets-field'); // 公開の表示位置を下へ

他にも、
続きタブの非表示
エディターの文字修飾ボタン、フォーマット指定ドロップダウンメニューの非表示
表示オプションの非表示
なんかは、１．の応用で簡単に出来ます。

普通、MovableTypeの管理画面カスタマイズってこの程度だと思うんですよね。
さらに、MTAppjQueryは、user.css も使えるので、単に見た目をいじるだけならそっちのほうが簡単です。

なんか、jQueryさえできれば何でも出来るような気がしてきましたwww

この記事を書いた人

川井昌彦: FAシステムメーカー、国内最大手印刷会社製版部、印刷・ウェブ制作会社を経て、家庭の事情で実家に帰省して独立
現在はフリーランスと制作会社シニアディレクターのマルチワーク
ウェブ制作のほぼ全般を見渡せるディレクター業務が主だが、デザイン・コーディングも好き

1997年ブログ開設
WordPressコミュニティには2011年から参加
WordCamp Kansai 2016 セッションスピーカー
WordCamp Tokyo 2023 パネルディスカッションパネラー
WordBench京都、WordBench神戸、WordPress Meetup八王子など登壇多数