PowerCMS ブログ

前回の記事の続きです。

• MT (PowerCMS)管理画面の作成とマークアップコンポーネント -1 | PowerCMS ブログ

サンプルプラグイン

この記事で紹介するテンプレートのサンプルをプラグインにしました。

• https://github.com/alfasado/mt-plugin-admin-screen-component

プラグインをインストールすると、左メニューに「Admin Screen Component」メニューが表れます。メニューのボタンクリックで、ステップ毎に管理画面のコンポーネントサンプルが表示されます。

ウィジェットの表示

MTApp:Widget ブロックタグ

ダッシュボードウィジェット等で使われるウィジェットの外観を持ったブロックを出力します。

<mtapp:widget
   label="Widget Label">
   Widget Paragraph
</mtapp:widget>

下記はリスト(ul〜li)のリンクスタイル指定と組み合わせた例です。

<mtapp:widget
   id="useful-link-widget"
   label="Widget with Links">
    <ul>
    <li><a class="icon-left icon-related" href="https://movabletype.org" target="_blank">movabletype.org</a></li>
    <li><a class="icon-left-xwide icon-action" href="http://www.movabletype.jp" target="_blank">movabletype.jp</a></li>
    </ul>
</mtapp:widget>

input 要素のスタイル指定

下記のように、edit_screen変数の指定の有無で表示幅に違いがあります。

edit_screen変数指定無し

edit_screen変数指定有り

日付選択フィールド

class「date」指定フィールドは下記のようにしてカレンダー形式の選択入力欄を作ることができます。

<mtapp:setting
    id="date-time"
    label_class="top-label"
    label="date-time-fields"
    show_hint="0"
    show_label="1">
<input type="text" id="time-on-date" class="text date text-date" name="time_on_date" value="" />
<span class="separator"> @</span>
<input type="text" id="time-on-time" class="text time" name="time_on_time" value="" />
</mtapp:setting>

textarea 要素のスタイル指定

入力フィールドの高さの指定が可能です。

button 要素のスタイル指定

管理画面のローカライズ

管理画面の文字列を各言語に__transから始まる特別なタグを使います。

<__trans phrase="Translated Paragraph">

最新のMTではケースによっては不要になっていますが、プラグインに固有の言語ファイルを利用する場合は、__trans_sectionタグを使って、そのブロックを囲みます。

<__trans_section component="AdminScreenComponent">
<mtapp:widget
   id="with-translate-widget"
   label="<__trans phrase="Translated Label">">
   <__trans phrase="Translated Paragraph">
</mtapp:widget>
</__trans_section>