Movable Type 5 になってから、「ウェブサイト」と「ブログ」という概念でウェブサイトを構造的に管理できるようになりました、とまではいいんですが、それにしてはちょっとダッシュボードのウェブサイトとブログのウィジェットが、、、全然構造的じゃないじゃん、と思っていたんですね。
そこで「MTAppjQuery 0.06 リリース - ストラクチャー・ウィジェットでウェブサイトとブログの構造を視覚的に確認」ということで、MTAppjQuery プラグインにウェブサイトとブログを構造的に確認できるウィジェットを追加したわけです。
今日は、MTAppjQuery プラグインを使わずに、alt-tmpl でカスタマイズする方法を、自分の備忘録の意味でも書いておきます。
]]>
カスタマイズの準備
まず、alt-tmpl ディレクトリに、cms/widget というディレクトリを作成します。その widget ディレクトリの中に、以下のファイルをコピーします。
- /tmpl/cms/widget/favorite_blogs.tmpl これをコピーして
- /alt-tmpl/cms/widget/favorite_blogs.tmpl こっちに貼り付け
カスタマイズ
「構造」タブを追加
早速、alt-tmpl にコピーしたファイルをカスタマイズしていきます。favorite_blogs.tmpl の 7行目の次に１行挿入し、「構造」というタブを追加します。
[7行目]
<li class="tab"><a href="#favorite-blog"><__trans phrase="Blogs"></a></li>
[次の１行を挿入]
<li class="tab"><a href="#favorite-structure">構造</a></li>
id属性には favorite-structure と入れておきます。日本語を直接書くので、ファイルは utf-8 で保存します。
これで、「構造」というタブが追加されました。
favorite_blogs.tmpl の構造 : ウェブサイト部分
さて、続いてテンプレートを見ていくと、12行目以降が、ウィジェットの本体（タブの中身）になります。ウィジェットの本体はウェブサイト一覧とブログ一覧に分かれていて、その構造は次のようになっています。
まずウェブサイトの方から見てみます。
[12〜15行目]
<div id="favorite-website">
<mt:if name="website_object_loop">
<div id="favorite-website-container" class="blog-container">
<mt:loop name="website_object_loop">
この中身が１つのウェブサイトに関する情報です
[74〜76行目]
</mt:loop>
</div>
<mt:else>
省略
[88行目]
</div>
この中の変数 website_object_loop には複数のウェブサイトに関する情報が入っています。それを15行目の mt:loop タグで順に出力しています。
変数 website_object_loop の中身
ループ中の変数 website_object_loop の中身をのぞいてみると、次のようなウェブサイトに関する情報が入っています。
'can_access_to_blog_list' => 1,
'can_access_to_blog_setting_screen' => 1,
'can_access_to_comment_list' => 1,
'can_access_to_page_list' => 1,
'can_access_to_template_list' => 1,
'can_apply_theme' => 1,
'can_create_new_page' => 1,
'website_blog_count' => '1',
'website_comment_count' => 0,
'website_description' => undef,
'website_id' => '1',
'website_name' => 'First Website',
'website_page_count' => '3',
'website_theme_thumb' => '/cms/MT-5.02-ja/mt-static/support//theme_thumbnails/professional_website/thumb-small.png',
'website_url' => 'http://localhost/mt/mt502/first_website/'
これらの値は、MTVar タグで取り出すことができます。試しに、以下のコードを74行目の </mt:loop> の直前に貼り付けて見てください。
<ul>
<li>can_access_to_blog_list : <mt:var name="can_access_to_blog_list"></li>
<li>can_access_to_blog_setting_screen : <mt:var name="can_access_to_blog_setting_screen"></li>
<li>can_access_to_comment_list : <mt:var name="can_access_to_comment_list"></li>
<li>can_access_to_page_list : <mt:var name="can_access_to_page_list"></li>
<li>can_access_to_template_list : <mt:var name="can_access_to_template_list"></li>
<li>can_apply_theme : <mt:var name="can_apply_theme"></li>
<li>can_create_new_page : <mt:var name="can_create_new_page"></li>
<li>website_blog_count : <mt:var name="website_blog_count"></li>
<li>website_comment_count : <mt:var name="website_comment_count"></li>
<li>website_description : <mt:var name="website_description"></li>
<li>website_id : <mt:var name="website_id"></li>
<li>website_name : <mt:var name="website_name"></li>
<li>website_page_count : <mt:var name="website_page_count"></li>
<li>website_theme_thumb : <mt:var name="website_theme_thumb"></li>
<li>website_url : <mt:var name="website_url"></li>
</ul>
すると、ウェブサイト一覧の各ウェブサイトの下に、これらの値がリストアップされます。
favorite_blogs.tmpl の構造 : ブログ部分
さて、続いてブログの方も見てみましょう。
[90〜93行目]
<div id="favorite-blog">
<mt:if name="blog_object_loop">
<div id="favorite-blog-container" class="blog-container">
<mt:loop name="blog_object_loop">
この中身が１つのブログに関する情報です
[152〜154行目]
</mt:loop>
</div>
<mt:else>
省略
[166行目]
</div>
この中の変数 blog_object_loop には複数のブログに関する情報が入っています。それを93行目の mt:loop タグで順に出力しています。
変数 blog_object_loop の中身
ループ中の変数 blog_object_loop の中身をのぞいてみると、次のようなブログに関する情報が入っています。
'blog_comment_count' => 0,
'blog_description' => undef,
'blog_entry_count' => '3',
'blog_id' => '2',
'blog_name' => 'First Blog',
'blog_page_count' => 0,
'blog_theme_thumb' => '/cms/MT-5.02-ja/mt-static/support//theme_thumbnails/pico/thumb-small.png',
'blog_url' => 'http://localhost/mt/mt502/first_website/first_blog/',
'can_access_to_blog_setting_screen' => 1,
'can_access_to_comment_list' => 1,
'can_access_to_entry_list' => 1,
'can_access_to_page_list' => 1,
'can_access_to_template_list' => 1,
'can_access_to_website' => 1,
'can_apply_theme' => 1,
'can_create_new_entry' => 1,
'website_id' => '1',
'website_name' => 'First Website'
これらの値も、MTVar タグで取り出すことができます。
「構造」タブの中身を考える
さて、いよいよ「構造」タブの中身を作っていきます。この中身は、ブログの一覧が終わったところ、つまり166行目の167行目の間に挿入していきます。
</div>
ここに挿入する
</mtapp:widget>
まずは大枠の div 要素となる次の３行を追加します。終了位置が分かりやすいようにコメントを入れておきます。この div 要素の id 属性は、最初に追加したタブの href 属性の値と同じになるようにします。
<div id="favorite-structure">
<!-- /#favorite-structure -->
</div>
さて、この中身をどのように実装するか考えてみます。
- ウェブサイトをループで出力する
- 出力中のウェブサイトに属するブログをループで出力する
こんな感じでしょうか。
ウェブサイトをループで取り出す
まずはウェブサイトをループで取り出します。ウェブサイトの情報は、先ほど見たように変数 website_object_loop に入っていますので、これをループさせている、13〜87行目をコピーして、div#favorite-structure の中に貼り付けます。
<div id="favorite-structure">
<mt:if name="website_object_loop">
省略
</mt:if>
<!-- /#favorite-structure -->
</div>
この状態でユーザーダッシュボードをリロードすると、構造タブを選択したときに、ウェブサイト一覧が表示されます。
ループ中のウェブサイトの ID を変数に格納する
このウェブサイト一覧に、そのウェブサイトに属するブログを挿入していきます。
ブログに関する情報は、変数 blog_object_loop に格納されています。したがって、ウェブサイトのループの中で、そのループ中のウェブサイトの ID と変数 blog_object_loop に格納されているブログが属するウェブサイトの ID を比較し、一致するブログのみ出力するようにします。
先ほどの「変数 website_object_loop の中身」で見たウェブサイトの情報の中に「website_id」というのがあります。これが、そのウェブサイトの ID になります。
そこで、div#favorite-structure に挿入した変数 website_object_loop のループの先頭に、次の１行を挿入し、ループ中のウェブサイトの ID を変数 crt_website_id に格納します。
[167〜170行目付近]
<div id="favorite-structure">
<mt:if name="website_object_loop">
<div id="favorite-website-container" class="blog-container">
<mt:loop name="website_object_loop">
[ここに次の１行を挿入]
<mt:Var name="website_id" setvar="crt_website_id">
ブログをループで取り出す
次に、ウェブサイトのループの中で、１つのウェブサイトを出力した直後にブログをループで取り出します。ブログの情報は、先ほど見たように変数 blog_object_loop に入っていますので、これをループさせている、91〜165行目をコピーして、230行目付近の の直前に貼り付けます。
その際、次の div#favorite-blog-container は不要なので削除し、後々ウェブサイトに属するブログにスタイルを適用するために div.favorite-structure-blog-container に変更しておきます。
<mt:if name="blog_object_loop">
<div class="favorite-structure-blog-container">
<div id="favorite-blog-container" class="blog-container"> ←この行は削除
<mt:loop name="blog_object_loop">
省略
</mt:loop>
</div>
<mt:else>
すると、構造タブの中身が、次のようにウェブサイトとブログの一覧になります。
- ウェブサイト
- ブログ
- ブログ
- ...
- ウェブサイト
- ブログ
- ブログ
- ...
ループ中のブログが属するウェブサイトの ID は？
さて、このままだと、各ウェブサイトの後に全てのブログがリストアップされてしまいます。したがって、ブログをループで取り出すときに、ブログが属するウェブサイトの ID と、ループ中のウェブサイトの ID が一致するものだけをリストアップするようにします。
このブログが属するウェブサイトの ID は、上述の「変数 blog_object_loop の中身」で見た中身の「website_id」になります。ループ中のウェブサイトの ID が入っている変数と同じ名前なんですね。
ループ中のウェブサイトの ID は、先ほど変数 crt_website_id に格納したので、変数 blog_object_loop のループの中で、crt_website_id = website_id になるブログだけをリストアップするようにします。
したがって、先ほど挿入した「ブログをループで取り出す」部分が次のようになります。
<mt:if name="blog_object_loop">
<div class="favorite-structure-blog-container">
<mt:loop name="blog_object_loop">
<mt:if name="website_id" eq="$crt_website_id">
省略
</mt:if>
</mt:loop>
</div>
<mt:else>
CSS を適用する
あとは、これに CSS を適用させれば完成です。
CSS は、このファイルの最後に、次のコードようなコードを書いてみました。
<mt:setvarblock name="html_head" append="1">
<style type="text/css">
.favorite-blogs-widget #favorite-structure .blog-container {
height: auto;
}
.favorite-blogs-widget #favorite-structure .blog-container .favorite-structure-blog-container {
margin-bottom: 20px;
padding: 10px 0 0 110px;
border-bottom: 1px solid #cfcfcf;
}
</style>
</mt:setvarblock>
append="1" モディファイアを付けて、ヘッダーの変数 html_head に追加します。これで完成です。
以上です。がんばって書いた記事ですが、需要は少ないかもしれませんねｗ
]]>
