【MTテーマ開発】ブログっぽくないサイトを作るまで

#はじめに
MTを魔改造して、さも普通のサイトっぽいものを作ろうと思ったとき困ったのでメモです。
Wordpressと違って、MTのテーマ開発に関してはあまり情報が出回っていない気がするので
同じように困っている人（いるのか？）の助けになれば嬉しいです。
筆者はネット上に存在する情報をかき集めながら手探りでやってます。

今回は、ルート直下に
(1)index.html
(2)subpage.html
があり、**共通のコメント欄**を表示したい場合です。
（コメント欄をツイッターのタイムラインみたいにしたい時！）

なるべく、管理画面からの操作するパターンと
テーマファイルを直接編集するパターンの両方を書いておきます。


#そもそもindex.htmlにコメントを置けるのか？
###①デフォルトのトップページの出力を変更
**デフォルトではトップページにコメントを付けられません。**
デザイン＞テンプレート＞インデックステンプレート
「トップページ」の**「出力ファイル名」**を
**index.html以外**に設定してトップに出ないようにします。

【管理画面】
![スクリーンショット 2018-11-22 17.45.51.png](https://qiita-image-store.s3.amazonaws.com/0/205699/c1116705-9577-ee51-a66b-4b89889f4942.png)

【テーマファイル：theme.yaml】
![スクリーンショット 2018-11-22 17.48.33.png](https://qiita-image-store.s3.amazonaws.com/0/205699/c50942ed-8d8a-34cd-4c3e-53de3213f1d1.png)

###②代わりに新しいトップページを作る
・記事
・ウェブページ
のどちらかであればコメント機能を使えます。

今回は
(1)index.html→記事として作成
(2)subpage.html→ウェブページとして作成
にします。
両方記事や、両方ウェブページでも良いのですが、
2ページだけであればこのパターンが速いです。

**(1)index.html**
まずはトップページの「記事」を作ります。内容は空欄で大丈夫です。

【管理画面】
タイトルはトップページにしておきましょう。（何でも良いです）
![スクリーンショット 2018-11-22 18.13.10.png](https://qiita-image-store.s3.amazonaws.com/0/205699/1669de54-c49c-ce30-6452-8b1203623596.png)

このとき、**「出力ファイル名」**を**「index」**にします。
さっき打ち消したデフォルトのトップページの代わりに、
こっちが「index.html」として出てくるようにします。
警告が出ていますがまぁその通りです。かぶらないようにしてください。
![スクリーンショット 2018-11-22 18.14.23.png](https://qiita-image-store.s3.amazonaws.com/0/205699/7f1b5160-fb7a-0212-599e-db851685b9e9.png)


その次はアーカイブテンプレートを編集します。
今回はこれ以上記事を増やさないつもりなので、
デフォルトの「記事」をそのまま編集してしまいましょう。

【管理画面】
![スクリーンショット 2018-11-22 18.05.44.png](https://qiita-image-store.s3.amazonaws.com/0/205699/053267d8-16e0-3318-50e2-b452492a0e8f.png)

テンプレートの名前は何でも良いのですが、
トップページのテンプレートにするのでトップページとしておくとわかりやすいです。
![スクリーンショット 2018-11-22 18.20.35.png](https://qiita-image-store.s3.amazonaws.com/0/205699/5cbec3b1-43c5-a882-2b4d-c50011d7e537.png)

DOCTYPE宣言が書かれているのでお分かりかもしれませんが、
この中にページ内容を普通にコーディングしていけばよいのです。


テーマファイルを直接編集する場合は
main_index.mtmlなどをコピペして**index.mtmlにリネーム**してください。
そこからはhtmlのようにコーディングしてokです。


【テーマファイル：theme.yaml】
individualの部分が記事にあたります。
![スクリーンショット 2018-11-22 18.22.29.png](https://qiita-image-store.s3.amazonaws.com/0/205699/6241a04c-7f1a-f8b9-8ace-c9ae91ddbce7.png)

テーマファイルは変更を加えるごとに
・テーマの最適用
・再構築
をしないと変更が反映されないので注意です。面倒くさいですね！


で！！！このあと注意なのが、
アーカイブパスを変更しないと記事にテンプレートが反映されない点です。
デフォルトだと、記事を作成したとき
サイト名/2018/11/記事.html
みたいなURLが生成されるんですが、
**さっき出力ファイル名を変更しましたよね？**
警告が出ていたやつです。


【管理画面】
アーカイブマッピングというので出力ファイル名を決めているんですね〜。
yyy/mm/ になっているから2018/11/ になるってことです。
![スクリーンショット 2018-11-22 18.31.37.png](https://qiita-image-store.s3.amazonaws.com/0/205699/1e98db75-3358-de8e-0d8b-ed242cbf5e2e.png)

ここを、日付部分をすっ飛ばしてindex.htmlになるようにします。
パスのプルダウンから「カスタム」を選択
![スクリーンショット 2018-11-22 18.36.57.png](https://qiita-image-store.s3.amazonaws.com/0/205699/1aa068ef-dc57-3d36-b930-9d5146feb858.png)

で、削りたい「y」と「m」を削除して
**「%-f」**にします。これで完了！
![スクリーンショット 2018-11-22 18.38.16.png](https://qiita-image-store.s3.amazonaws.com/0/205699/ba15f651-dfaa-25c0-1db4-928d4fbcd8b6.png)


再構築すると、先ほど「記事」で作成した「トップページ」のパーマリンクが
日付の入らないものに変わっているかと思います。


※※テーマファイルではここをどうやって変えたらいいのかまだわかっていません…※※
テーマの最適用をするたびに、アーカイブマッピングが元に戻ってしまうので
いちいち管理画面から上書きして直しています…
theme.yamlのマッピング…？？？


**(2)subpage.html**
基本的には記事と同じ手順です。

【管理画面】
・「ウェブページ」に空のページを作成、**出力ファイル名を「subpage.html」**にして保存
・アーカイブテンプレートの「ウェブページ」を編集、**アーカイブマッピングを「%-f」**にして保存
・再構築

【テーマファイル】
・「ウェブページ」に空のページを作成、**出力ファイル名を「subpage.html」**にして保存
・index.mtmlなどをコピペして**subpage.mtmlにリネーム**、内容をコーディング
・管理画面でテーマ最適用
・**アーカイブマッピングを「%-f」**にする

ちなみにtheme.yamlはこんな感じです。
![スクリーンショット 2018-11-22 18.59.23.png](https://qiita-image-store.s3.amazonaws.com/0/205699/0c38009b-3cc9-d27c-f802-129158d88b6d.png)


これで最低限
(1)index.html
(2)subpage.html
が出力されたはずです。


#サイト(ブログ)で共通のコメント欄設置
今回は
index.html→コメント欄を設置
subpage.html→index.htmlのコメントを参照できる。ここからした投稿はindex.htmlのコメントとして扱われる
ということにします。

###①コメント表示部分

**(1)index.html**
【管理画面：アーカイブテンプレート＞記事】
デフォルトでコメントモジュールがインクルードされているのでそのまま使ってokです。
カスタマイズしたい場合は適宜！（割愛します）
![スクリーンショット 2018-11-22 19.05.38.png](https://qiita-image-store.s3.amazonaws.com/0/205699/45293b2e-3c25-0f40-579d-81b98d9e8c96.png)

【テーマファイル：index.mtml】
どのファイルを元にしたかによりますが、
コメントモジュールの読み込みがなかった場合は入れておいてください。
↑みたいにしとけばokです。

**(2)subpage.html**

【管理画面：モジュールテンプレート＞コメント】
![スクリーンショット 2018-11-22 19.11.19.png](https://qiita-image-store.s3.amazonaws.com/0/205699/0f970fc4-a271-9b5a-d8c3-3a661d9acd81.png)
mt:Comments〜的なタグがいっぱい書いてありますが、これらのコメント表示制御用のタグは
記事内や、ページ内で使用すると
**そのタグが置かれている記事やページ**のコメントを表示してくれるようになっています。
便利なんですが、今回はsubpage.htmlのコメントは要らないので、ちょっと変えてあげる必要があります。


【管理画面：モジュールテンプレート＞コメント】
![スクリーンショット 2018-11-22 19.17.00.png](https://qiita-image-store.s3.amazonaws.com/0/205699/c81a7273-6005-a75b-af68-58b37a9a3a44.png)
さっきの例とだいぶ内容が違っててすいません。あんまり気にしなくていいです。
注目すべきは**「mt:Actions」**を使っているところです。

公式リファレンスによると
>ユーザーの投稿した記事やトピック、コメント、お気に入り登録など、コミュニティ内でのアクション一覧を表示するためのブロックタグです。

だそうです。

include_blogs="126"
というのはブログに割り当てられているIDです。今回は126でした。
IDの確認は、管理画面の
ブログの管理→表示オプション→IDにチェック
でできます。

これでめでたしめでたし！

と思いきや、
**sort_order="descend"（降順で表示）**
**が全く効いていなかった……**

ブログのコメント風じゃなくて、ツイッターのタイムラインっぽくしたい場合
降順で表示できた方がいいですよね。
で、公式リファレンスに書いてあるモディファイアなのになぜ効かない……？！？？！？！


原因はココでした😭
【管理画面：設定＞コミュニケーション】

![スクリーンショット 2018-11-22 19.27.25.png](https://qiita-image-store.s3.amazonaws.com/0/205699/d8b25874-d72b-9622-5553-31c50de47312.png)

ここのコメント表示が、デフォで昇順になっていた😭
![スクリーンショット 2018-11-22 19.28.55.png](https://qiita-image-store.s3.amazonaws.com/0/205699/2cc27f87-c486-b084-6ba9-c66e91c89846.png)


これを降順にしてあげればok！


###②コメント入力部分

**(1)index.html**
【管理画面：テンプレートモジュール＞コメント入力フォーム】
![スクリーンショット 2018-11-22 19.32.28.png](https://qiita-image-store.s3.amazonaws.com/0/205699/9e800f63-9fee-b635-46ab-c60cfcb36db3.png)
大量のインプットタグ！
この中の<$mt:EntryID$>だとか、<$mt:BlogLanguage$>だとかが
「今このタグがあるページ」を指しています。

index.htmlに関してはいじらずでokです。

**(2)subpage.html**
**新しくコメント入力フォームを作りましょう！！！**

【管理画面：テンプレートモジュール】
普通にこっから作れます。
![スクリーンショット 2018-11-22 19.36.59.png](https://qiita-image-store.s3.amazonaws.com/0/205699/11cdd389-7868-13d4-1389-3d1375d619a3.png)
新しく作ると言っても、まずはさっきのコメント入力フォームの内容をコピペします。
タイトルはサブページ用のコメント入力フォームとかにしとけばいいです。

で、さっきの
>大量のインプットタグ！
この中の<$mt:EntryID$>だとか、<$mt:BlogLanguage$>だとかが
「今このタグがあるページ」を指しています。

を、index.htmlのもろもろが反映された版に書き換えちゃえばいいわけです。
わたしはブラウザでindex.htmlを開いて、検証ツールで該当部分を探し出して
そのままコピペしました（強引）


【管理画面：テンプレートモジュール＞サブページ用のコメント入力フォーム】
![スクリーンショット 2018-11-22 19.41.35.png](https://qiita-image-store.s3.amazonaws.com/0/205699/e312c5bd-5683-be6e-10f4-09fd544835d7.png)
index.htmlの記事idが2313だったということです。

これでコメント入力フォームは完成！
アーカイブテンプレート＞ウェブページ で、サブページ用のコメント入力フォームがインクルードされるように
適宜編集してください。


#おわりに
仕事上やむを得ず使うことになったMTで、最初はとにかく面倒くさい！と思っていましたが
慣れてくると可愛いですね😊
皆さんもよきMTライフを😊