管理画面カスタマイズ

キーワード：ManagerManager 管理画面 seo TinyMCEのCSS TinyMCEのツールバー ログイン画面のカスタマイズ

https://modx.jp/blog/5.html
上記ブログ記事もお読みください。

ManagerManagerを用いて投稿画面をカスタマイズ

標準で同梱されているManagerManagerプラグインを用いると投稿画面を自由にカスタマイズできます。カスタマイズルールを設定用のチャンク(デフォルトではmm_rules)に記述します。

mm_hideFields('longtitle,description,alias,link_attributes,introtext');
mm_hideFields('template,menutitle,menuindex,show_in_menu,hide_menu,parent');
mm_hideFields('published,pub_date,unpub_date');
mm_hideFields('is_folder,is_richtext,log,searchable,cacheable,clear_cache');
mm_hideFields('resource_type,content_type,content_dispo');

上記のように記述すると「リソース名」「内容(本文)」以外のほとんどのフィールドを隠すことができます。フィールド名の変更や他タブへの移動・デフォルト値のセットなど、他にも18種類のコマンドを利用できます。詳細についてはドキュメントを確認してください。

検索エンジン対策向け設定例

mm_createTab('検索エンジン対策','seo');
mm_moveFieldsToTab('alias,longtitle,menutitle,description,introtext','seo');
mm_moveFieldsToTab('template,parent','settings');
mm_hideFields('link_attributes,content_dispo,clear_cache,searchable,cacheable,resource_type,is_folder');
mm_renameField('pagetitle','タイトル');
mm_renameField('longtitle','詳細なタイトル');

ManagerManagerの高度な使い方

global $content;
if($content['id']==7)
{
  mm_hideFields('introtext');
}

上記のように記述すると、IDが7のリソースのみintrotextを隠します。$contentはリソース変数に相当します。ManagerManagerでは基本的にテンプレートごと・ロールごとでしか指定を分けることができませんが、こうすればさまざまな判定条件を得ることができます。

if($_GET['id']==7)
{
  mm_hideFields('introtext');
}

リソースIDで指定する場合は、上記のように書いても同じ結果を得ることができます。$_GETを用いると、リソース新規作成時の親リソースIDを得ることもできます。親リソースは $_GET['pid'] です。

switch($_GET['id'])
{
  case 7:
  case 18:
  case 51:
    mm_hideFields('introtext');
    break;
}

対象が多い場合はswitch文を用いると分かりやすいです。このへんはMODXの使い方というよりPHPのお話ということになります。

その他、曜日や時間帯ごとのカスタマイズなど、様々なアイデアを用いることができます。もちろんMODXのAPIも使えますので、getChunkメソッドなどを利用して値を引っ張ってくるような使い方もできます。

https://modx.jp/blog/5.html
ManagerManagerの使い方については上記ブログ記事も参照してみてください。

テンプレート変数の入力パーツを自作する(Custom Input)

MODX Evolution 1.0.5J から、テンプレート変数の入力パーツを自作できるようになっています。従来MODXでは、通常のテキストタイプの入力フォームを初めとして、テキストエリア・ラジオボタン・チェックボックスなど15種類の入力フォームをプリセットとして備えていましたが、これを自作できます。


▲テンプレート変数の構成要素である「入力タイプ」を自作できるようになりました。

<input type="text" id="tv[+field_id+]" name="tv[+field_id+]" value="[+field_value+]" [+field_style+] tvtype="[+field_type+]" onchange="documentDirty=true;" style="width:100%" />

たとえば、上記のように作ります。最低限必要なのは [+field_id+]と[+field_value+] です。

jqueryを用いたJSONテクニックを使えば、ひとつのテンプレート変数で複数の値を扱うこともできます。

投稿画面のスタイルをカスタマイズする

プラグインを自作します。

$css = $modx->getChunk('投稿画面用スタイルシート');
$modx->event->output($css);

プラグイン新規作成画面を開いて上記のようなコードを書き、システムイベントは「OnDocFormPrerender」にチェックを入れてプラグインを新規保存します。プラグイン名はなんでもかまいません。次に「投稿画面用スタイルシート」という名前のチャンクを作り、スタイルシートを任意に記述します。OnDocFormPrerenderは投稿画面に関連付けられたシステムイベントなので、投稿画面のhtmlソースを参考にスタイルを記述します。

<style type="text/css">
  form#mutate div.tmplvars label {display:inline;}
</style>

上記のようなスタイルを書けば、チェックボックス・ラジオボタンタイプのテンプレート変数の選択肢を横並びにできます。選択肢が多い場合に便利です。

対象のinput要素のIDはFirebugを使って調べると便利です。

上記の方法以外には、ManagerManagerのルール内にecho文を記述する方法もあります。

なおMODX1.0.5以降より、OnManagerMainFrameHeaderHTMLBlockイベントを用いて管理画面全域をカスタマイズすることができます。head要素内にhtmlやcssなど任意のコードを挿入できます。$_GET['a']を参照して処理を分ければ、画面ごとにカスタマイズすることができます。

投稿画面の本文テキストエリアのスタイルをカスタマイズ

暗い背景色に明るい文字色のサイトだと、背景が明るい投稿画面ではギャップが大きくて不便です。そのような場合は、テキストエリアのスタイルをカスタマイズするとよいでしょう。

/assets/plugins/tinymce/style/content.css を編集することで、TinyMCE(本文のテキストエリア)のスタイルシートをカスタマイズできます。また、グローバル設定の「CSSファイルへのパス」で自作のスタイルシートを指定することもできます。

サイトの表示に用いるスタイルシートと共用したい場合は、まずコンテンツ領域専用にCSSファイルを作り、これを「CSSファイルへのパス」で指定します。次に、TinyMCEプラグイン設定の「Custom Parameters」にbody_idパラメータを追記し、サイトと投稿画面のセレクタを揃えます。

body_id:"content",

id=contentのdiv要素内で記事を表示している場合は、上記のように指定します。セレクタとしてclassを用いている場合はbody_classオプションを使用してください。説明の意味が分かりにくいかもしれませんが、まずはFirebugなどで実際の状態を確認してみてください。

http://modx.jp/blog/y2011/04/529.html
具体的な応用例です

投稿画面の本文テキストエリアのツールバー構成を変更する

TinyMCEのツールバーの機能をカスタマイズできます。グローバル設定の「TinyMCEの設定 - カスタムボタン」で機能を任意に選び、「テーマ」で「カスタム」を選択してください。機能を利用する場合はプラグイン(TinyMCE用)の読み込みが必要なものもありますので、動かない場合は確認してください。実装できるボタンについては、TinyMCE開発元のサンプルとドキュメントを参考にしてください。

なお、MODX同梱のTinyMCEではいくつかのプラグインを同梱してませんので(printやspellcheckerなど)、ボタンが実装できない場合は確認し、足りないものはTinyMCE開発元から入手してください。TinyMCE本体パッケージに含まれるjscriptsフォルダ以下をまるごと上書きしてもかまいません。MODXのTinyMCEプラグイン側のjscriptsフォルダ以下には、MODX関係のファイルは全く含まれていません。

テンプレート単位でリッチテキストエディタの有効無効を設定したい

グローバル設定・リソース単位・ユーザ単位で投稿画面のリッチテキストエディタの有効無効を設定することはできますが、テンプレート単位で設定するにはプラグインを作る必要があります。

global $content;
if($content['template']==7)
{
  $content['richtext'] = 0;
}

上記のようなプラグインを作り、システムイベントOnDocFormPrerenderをチェックします。上記の例ではテンプレートIDが7のテンプレートを設定しているリソースでリッチテキストエディタが無効になるように設定しています。

管理画面の文言をカスタマイズする

/manager/includes/lang/japanese-utf8.inc.php をテキストエディタで開いて編集することにより、管理画面で用いられる文言をカスタマイズできます。しかしこの場合、MODXをアップデートするたびに同ファイルのメンテナンスに気を配る必要があります。

global $_lang;
$_lang['welcome_title'] = 'モドエックスへおいでやす';

上記のようなプラグインを作ってシステムイベントOnManagerPageInitに登録することにより、アップデートの影響を受けない文言カスタマイズを行なうことができます。

global $_lang;
$src = array('MODX',    'リソース');
$dst = array('MOOOOODx','ドキュメント');
$_lang = str_replace($src, $dst, $_lang);

上記のように記述すると、管理画面中の「MODX」という単語を「MOOOOODx」に、「リソース」という単語を「ドキュメント」に、全て置換します。システム名や用語を一括で揃えて変更する必要がある場合に便利です。

ダッシュボード・ヘルプ・ログイン画面のカスタマイズ

ダッシュボードのカスタマイズ

manager/media/style/common/welcome.tpl

「ダッシュボード」という名前のチャンクを作り、上記のテキストファイルの中身を貼り付け、必要に応じて各部をカスタマイズし保存します。

$modx->config['manager_welcome_tpl'] = 'ダッシュボード';

「ダッシュボードカスタマイズ」という名前のプラグインを作り、上記のコードを貼り付けます。
システムイベント「OnManagerWelcomePrerender」にチェックを入れて保存します。

ログイン画面のカスタマイズ

manager/media/style/common/login.tpl

「ログイン画面」という名前のチャンクを作り、上記のテキストファイルの中身を貼り付け、必要に応じて各部をカスタマイズし保存します。

$modx->config['manager_login_tpl'] = 'ログイン画面';

「ログイン画面カスタマイズ」という名前のプラグインを作り、上記のコードを貼り付けます。
システムイベント「OnManagerLoginFormPrerender」にチェックを入れて保存します。

ログイン画面のカスタマイズに失敗してログインできなくなった場合は、
manager/index.phpを一時的に書き換えてプラグインを無効にすることができます。

$modx->safeMode = 0;

上記の値を「 1 」に書き換えます。

それぞれのconfigの値は、チャンク名ではなくテキストファイルのパスを指定することもできます。

$modx->config['manager_welcome_tpl']='manager/media/style/common/welcome.tpl';

たとえば上記のように記述します。MODXの設置ディレクトリが基準になります。

まるごと書き換えるのではなく、システムイベントを用いて部分的にカスタマイズすることも可能で、

などが可能です。

OnManagerPageInitイベントで処理を横取りする

管理画面の各ページは、出力される直前にOnManagerPageInitイベントに関連付けられた処理が実行されます。これを利用して、ここで任意の画面コードをまるごと出力し、出力後の処理をキャンセルすることで、任意の画面を実装できます。

この方法を利用すれば、ここまでカスタマイズすることが可能です。処理を横取りするため手法としてはトリッキーですが、理解しやすい短いコードで実装することができます。コアファイルを上書きしたりしないため、システムアップデートの際も影響を受けず安心です。

if($action!=1 || $_GET['f']!=='tree') return;

たとえば上記のように記述することで、ツリーペインの処理を横取りできます。あとは基本的にはHTML文を書くだけです。

出力後の処理をキャンセルするにはexit() を用いるか、MODX Evolution 1.0.5J-r12以降で実装された998番・999番アクションを利用し、$modx->event-output()メソッドを用いて画面を出力するとよいでしょう。

PR

  • KAGOYA
  • ASP at AKIHABARA Japan
  • CMS AWARDS 2007 Winner
ページトップへ