MTOSでカスタムフィールドを使う

mt_custom.jpg

仕事ではMovabletypeでサイトを構築することが多いのですが、最近MTOSでカスタムフィールドを追加する時につまづいてしまったので備忘録としてまとめておきます。

そもそもMovabletypeでカスタムフィールドが使えるのか

Movabletype有料版ではカスタムフィールドはデフォルト機能として備わっているのですが、ライセンス料が高いためやや敷居の高いCMSとなっています。
Movabletypeで唯一のオープンソースであるMTOS5は無料でダウンロードできて、手軽にCMSでのサイト構築を始められる半目、デフォルトでカスタムフィールドを利用することができません。
そこでMTOSでカスタムフィールドを利用するためのプラグインと、その導入方法まで一挙に紹介します。

インストール先ディレクトリ

プラグインのインストールはファイルをダウンロード・解凍し、FTPを使って手動でインストールする必要があります。
(※WordPressではワンクリックなのにorz)
ここではMTのインストール先ディレクトリを「/mt/」と仮定して説明していきます。

AnothorCustomField

下記のダウンロードページより「AnothorCustomField」プラグインをダウンロードします。
http://www.h-fj.com/blog/archives/2011/09/02-143708.php

ダウンロード・解凍したファイルをそれぞれ「/mt/mt-static/」、「/mt/plugins」内にインストールします。

EntryFields

次に「/mt/plugins」内に「EntryFields」ディレクトリを作成し、以下のコードを記述して「config.yaml」と保存したファイルをアップロードします。

name: EntryFields
id: EntryFields
description:
author_name: name
version: 1.00
schema_version: 1.00
object_types:
entry:
customtext:
type: text
revisioned: 1
acf:
type: text
label: カスタムフィールド(テキスト)
tag: CustomText
customtextarea:
type: text
revisioned: 1
acf:
type: textarea
label: カスタムフィールド(テキストエリア)
tag: CustomTextArea
customimage:
type: text
revisioned: 1
acf:
type: image
label: カスタムフィールド(画像ファイル)
tag: CustomImage
customselect:
type: text
revisioned: 1
acf:
type: select
label: カスタムフィールド(セレクトボックス)
tag: CustomSelect
options:
- 項目1
- 項目2
customcheck:
type: boolean
revisioned: 1
acf:
type: checkbox
label: カスタムフィールド(チェックボックス)
tag: CustomCheck

一例として様々な入力フィールドを記載しましたが、もちろん使わないフィールドは削除してください。
このconfig.yamlを使う際の注意点としてまず、コードの末尾には必ず改行を入れてください。
環境によってはこれが無いと動作しないことがあります。

次に一度アップロードしたファイルを編集し、再アップロードする時は必ず5、6行目のバージョンの値を変更させてください。

以上でカスタムフィールドを追加することができました。
MTの管理画面にログインするとこのような表示がされるので迷わずアップグレードボタンを押してください。
mt_custom01.jpg

しかし記事の編集画面にいっても追加したカスタムフィールドは表示されておりません。
「表示オプション」から追加したフィールドにチェックを入れると表示されるようになるのですがこれはきづかなければ分かりにくい。
ということでデフォルトで追加したフィールドを表示状態に、さらに入力フィールドを自動で並び替えることのできるプラグインを次に紹介していきます。

MTAppjQuery

下記のダウンロードページより「AnothorCustomField」プラグインをダウンロードします。
https://github.com/tinybeans/mt-plugin-MTAppjQuery

ダウンロード・解凍したファイルをそれぞれ「/mt/mt-static/」、「/mt/plugins」内にインストールします。

管理画面のカスタマイズは「/mt/mt-static/plugins/MTAppjQuery/user-files/user.js」を下記のように編集していきます。

(function($){
$.MTAppMsg({
msg: 'MTAppjQueryプラグインのインストールに成功しました! user.js を編集して管理画面のカスタマイズを楽しみましょう!',
type: 'success'
});
// フィールドの並び替え
if(blogID == '1') {
$.MTAppFieldSort({
sort: 'title,text,tags,excerpt,keywords,customfield01,customfield02'
// titleは記事タイトル、textは本文・続きの入力欄を指し、カスタムフィールドはbasenameを入力します
});
}
// 管理画面にメッセージを表示
$.MTAppMsg({
msg: 'type : HTMLタグも使えます。詳しくはこちら',
type: 'info'
});
$.MTAppMsg({
msg: 'type : サクセス',
type: 'success'
});
$.MTAppMsg({
msg: 'type : エラー',
type: 'error'
});
$.MTAppDebug();
})(jQuery);

上記のほかフィールドの非表示や管理画面のスタイルなども大幅に変更することができるので重宝するプラグインです。

以上、無料版のMovabletypeを自由で柔軟なCMSに変身させるプラグイン集でした。