CMSどうでしょう MT・WP対決列島 札幌編 2015.01.17 at ACU フロントエンドな人にこそ知ってほしい MTMLの話
CMSどうでしょう MT・WP対決列島 札幌編 2015.01.17 at ACU
フロントエンドな人にこそ知ってほしい
MTMLの話
自己紹介
西山 泰史 にしやま やすふみ
株式会社ジャクスタポジション 札幌市在住のWebディレクター Movable Type でのサイト構築 2013年よりMT蝦夷を主宰 三度の飯より食べることが好き
ジャクスタと言えば
Webデザイナーのためのショッピングカート
SKELETON CART http://skeleton.juxtaposition.jp/
Movable Typeの画像アップロード機能補助プラグイン
ImageUploadUtility http://skeleton.juxtaposition.jp/image-upload-utility/
西山と言えば
ラーメン!
軌道修正
Let’s Enjoy MTML
今日のミッション
今日のアジェンダ ・MTMLの基本 ・管理画面のカスタマイズ ・MTAppjQuery ・ちょっとやってみよう
MTML?
Movable Type Markup LanguageMovable Typeで利用するテンプレート記述言語 HTMLを拡張し、MTタグとして利用できる。
<?php the_title(); ?> ↓
<mt:EntryTitle>
ex. ブログ記事タイトル
記事がある場合
<a href=“01.html”>記事タイトル①</a><br /> <a href=“02.html”>記事タイトル②</a><br /> <a href=“03.html”>記事タイトル③</a><br /> ・ ・ ・
記事がない場合
<p>記事がありません</p>
ex. ブログ記事一覧
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?> <a href="<?php the_permalink(); ?>”> <?php the_title(); ?></a><br /> <?php endwhile; ?>
<?php else : ?>
<p>記事がありません</p>
<?php endif; ?>
ex. ブログ記事一覧(WP)
<mt:Entries>
<a href=“<mt:EntryPermaLink>”> <mt:EntryTitle></a><br />
<mt:Else>
<p>記事がありません</p>
</mt:Entries>
ex. ブログ記事一覧(MT)
※外部ファイルのリンク機能を使用すると、 Dreamweaverなど+FTPで操作することもできます
Movable Typeは テンプレートの編集など
ほぼ全ての操作を 管理画面で行う
管理画面のカスタマイズ
Movable Typeの管理画面も MTタグで作られているので 自由にカスタマイズ可能
tmplフォルダからalt-tmplフォルダに 管理画面用テンプレートをコピー
→
階層構造を同じにすると、 管理画面表示時に上書きしてくれる ※alt-tmplを空にすると初期状態に戻る
ex. 記事タイトル入力部に見出しを入れる
ex. 記事タイトル入力部に見出しを入れる
ex. 記事タイトル入力部に見出しを入れる
§ 編集するテンプレート alt-tmpl/cms/dialog/edit_entry.tmpl
§ 編集する内容(1182行目) <p>▼記事のタイトルを入れてください<p> <input type=“text” name=“title” …省略 />
MTAppjQuery
PerlやMTMLの知識が無くても jQueryでMTの管理画面をカスタマイズできる
ex. 入力フィールドの並び替え↓これを
ex. 入力フィールドの並び替え↓こうしたい(概要を追加したい)
ex. 入力フィールドの並び替え
(function($){ if(mtappVars.screen_id == ‘edit-entry’){ $.MTAppFieldSort({ sort: ‘title,excerpt,text,keywords’
}); ↑この順番に並び替える }
})(jQuery);
あらかじめ用意されているuser.jsに以下を記載
ex. 入力フィールドの並び替えMTMLじゃなくjQueryだけでOK
ちょっとやってみよう
alt-tmplとMTAppjQueryで 超簡易版承認ワークフローを作る手順 ① 一部のユーザーから「公開」する権限を奪う ② alt-tmplをで2種類のテンプレートを編集する
※あくまでもアイディアですのでご留意ください
ユーザーから「公開」する権限を奪う通常は未公開/公開/日時指定を選択可能
MTAppjQueryで 公開承認者以外は未公開だけ選択可能に変更する
ユーザーから「公開」する権限を奪う
(function($){ // AuthorID:4以外には公開を非表示、全員に日時指定を非表示 if(authorID == "4"){
$('#status').children('[value=4]').remove(); }else{
$('#status').children('[value=2]').remove(); $('#status').children('[value=4]').remove();
} })(jQuery);
user.jsに以下を記載
ユーザーから「公開」する権限を奪う通常は未公開/公開/日時指定を選択可能
MTAppjQueryで 公開承認者以外は 未公開だけ選択可能に 変更する
alt-tmplをでテンプレートを編集する① edit_entry.tmpl(記事投稿画面)の編集
表示:パブリッシュしたページを表示 共有:MT上からメールを送信
alt-tmplをでテンプレートを編集する① edit_entry.tmpl(記事投稿画面)の編集
メールアドレスを入力してメールを送信
alt-tmplをでテンプレートを編集する① edit_entry.tmpl(記事投稿画面)の編集
ただし、記事の公開前は「共有」が表示されていない
表示されていないなら、表示させればいい
alt-tmplをでテンプレートを編集する① edit_entry.tmpl(記事投稿画面)の編集
<mt:if name=“status_publish”>~</mt:if> → 記事が公開されている時に、表示/共有ボタンを表示してる
alt-tmplをでテンプレートを編集する① edit_entry.tmpl(記事投稿画面)の編集
記事が公開されている時に表示ボタンを 記事が保存されていれば常に共有ボタンを表示 ↓ <mt:if name=“status_publish”>~</mt:if>の中から、 共有ボタンを外に出した
alt-tmplをでテンプレートを編集する① edit_entry.tmpl(記事投稿画面)の編集
記事が保存されていれば常に共有ボタンを表示
alt-tmplをでテンプレートを編集する② edit_notify.tmpl(通知の送信画面)の編集
いちいち承認申請のメールアドレスを入れるのは面倒 できるだけ考えずに終わらせたい
alt-tmplをでテンプレートを編集する② edit_notify.tmpl(通知の送信画面)の編集
通知を送る人に応じた承認申請する相手のアドレスを 初期値として自動セットしておけばいい
alt-tmplをでテンプレートを編集する② edit_notify.tmpl(通知の送信画面)の編集
<textarea>の中でログインユーザーのIDで条件分岐させ ユーザーIDに応じた内容を初期値として入れておく
ex. <mt:if name=“author_id” eq=“1”> ~ </mt:if> → ユーザーIDが「1」ならその中身を出力
alt-tmplをでテンプレートを編集する② edit_notify.tmpl(通知の送信画面)の編集
あとはメッセージを入力して「送信」するだけでOK
alt-tmplをでテンプレートを編集する実際に送信されるメール
この文面も テンプレートで 編集可能
超簡易版
承認ワークフローの完成!
超簡易版
承認ワークフローの完成!※除外項目(実用的じゃない理由) ・差戻し機能 ・リビジョン管理機能 ・承認依頼メール内に 下書き記事への直リンクを記載 など
まとめ
・MTMLはHTMLの拡張なので 比較的学習コストが低い ・MTAppjQueryとalt-tmplなら ノンプログラマーでも 管理画面を自由自在にカスタムできる (考え方によってはプラグイン的な感じも) ・MTMLを間違っても画面が白くならない
ありがとうございました! 引き続き、破壊王高山のステージをお楽しみください
MT蝦夷 主宰 株式会社ジャクスタポジション 代表取締役 西山 泰史
CMSどうでしょう MT・WP対決列島 札幌編 2015.01.17 at ACU