PowerCMS™

PowerCMS ブログ

ホーム > PowerCMS ブログ > MT (PowerCMS)管理画面の作成とマークアップコンポーネント -2

2014年07月30日

MT (PowerCMS)管理画面の作成とマークアップコンポーネント -2

前回の記事の続きです。

サンプルプラグイン

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

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

プラグインによるサンプルの表示

ウィジェットの表示

MTApp:Widget ブロックタグ

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

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

MT::App: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>

MT::App:Widget ブロックタグの例(リストスタイルとの組み合わせ)

input 要素のスタイル指定

text title記事タイトルやテンプレート名に使われるタイトル・スタイルです。大きな文字が適用されます。
text通常のテキストフィールド。
text num番号入力用のスタイル。幅が狭く、フィールドの中央にカーソルが来ます。
text pathnumに次いで幅の狭いフィールド。パス等の入力用。
text shortpathに次いで幅の狭いフィールド。但しedit_screen変数が指定されているときは画面幅いっぱいになります。
text full画面幅いっぱいの幅のフィールド。
text date日付の「日」部分の入力フィールド。通常はtimeフィールドと併記して利用されます。
text time日付の「時間」部分の入力フィールド。通常はdateフィールドと併記して利用されます。

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

edit_screen変数指定無し

input要素のclass指定による表示の違い(edit_screen指定なし)

edit_screen変数指定有り

input要素のclass指定による表示の違い(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 要素のスタイル指定

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

text lowmin-height:5emが適用されます。
text highmin-height:15emが適用されます。
text highestmin-height:35emが適用されます。

textarea要素のスタイル

button 要素のスタイル指定

action primary buttonプライマリボタン。濃いブルーのボタンに白いテキストのボタン。
action buttonその他のボタン。濃いグレーのボタンに白いテキストのボタン。

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>

翻訳されたウィジェット


カテゴリー
テンプレート作成Tips
設定・管理画面カスタマイズ

Recent Entries