「お知らせモジュールのマークアップ」をCMSに組み込む

公開

つい先日、「お知らせモジュールのマークアップ | 覚え書き | @kazuhito」で話題になったようなビジュアルデザインに近いお知らせモジュール(サイトのホームによくある、最新のお知らせを何件か一覧表示するモジュール)をマークアップすることになりました。

仮に木達さんが示されたようなマークアップにするとした場合、CMSに組み込むことができる(テンプレート化できる)かなと少し疑問に思ったので、実験を行ってみました。

ポイントは下記の通り:

  • リストが入れ子になっている
  • 記事ページにリンクしないで、お知らせ一覧で完結するポストがある

ひとまず、地方でよく使われていそうな3つのCMSをピックアップして、実際にテンプレートを書いてみました。

Movable Type

Movable Typeは普段よく利用しているので、疑問に思わず書いてしまった方が早かった...。5分で書けました。MTMLは、変数や条件分岐が利用できるので問題なしでした。

<$mt:SetVar name="date" value=""$>
<mt:Entries lastn="5" blog_ids="2">
<mt:EntriesHeader>
<ul class="news">
</mt:EntriesHeader>
<$mt:EntryDate format="%Y%m%d" setvar="postdate"$>
<mt:If name="date" ne="$postdate">
<$mt:SetVar name="date" value="$postdate"$>
<mt:If name="__counter__" ne="1">
</ul>
</li>
</mt:If>
<li><$mt:EntryDate format="%Y年%m月%d日"$>
<ul>
</mt:If>
<li>
<mt:EntryPrimaryCategory>
<div class="category <$mt:CategoryBaseName$>"><$mt:CategoryLabel$></div>
</mt:EntryPrimaryCategory>
<mt:If tag="EntryBody"><a href="<$mt:EntryPermalink$>"></mt:If>
<$mt:EntryTitle$>
<mt:If tag="EntryBody"></a></mt:If>
</li>
<mt:EntriesFooter>
</ul>
</li>
</ul>
</mt:EntriesFooter>
</mt:Entries>

出力されたソースに空行が多数入るので、RemoveBlankプラグイン等を使うと良いかも。

Wordpress

Wordpressは約8年ぶりなので、ドキュメントを見ながらテンプレートを書きました。テンプレートにPHPがバリバリ書けるので、データさえ取得できれば何とかなります。

<?php
$i = 0;
$date = '';
$postlist = get_posts(array(
    'posts_per_page' => 5,
    'orderby' => 'post_date',
    'order' => 'DESC',
    'post_type' => 'post',
    'post_status' => 'publish'
));

foreach ($postlist as $post) : setup_postdata($post);
$category = get_the_category();
if ($i === 0) echo "<ul class=\"news\">\n";
if ($date !== get_the_time('Ymd')) {
    $date = get_the_time('Ymd');
    if ($i !== 0) {
        echo "</ul>\n</li>\n";
    }
    echo "<li>" . get_the_time('Y年m月d日') . "\n<ul>\n";
}
?>
<li>
<?php
if ($category[0]->cat_name !== '未分類') {
    echo "<div class=\"category " . $category[0]->category_nicename . "\">" . 
        $category[0]->cat_name . "</div>";
}

if (get_the_content()) {
?>
<a href="<?php the_permalink(); ?>">
<?php
}
the_title();
if (get_the_content()) {
    echo "</a>";
}
?>
</li>
<?php
$i += 1;
endforeach;
echo "</ul>\n</li>\n</ul>";
wp_reset_postdata();
?>

a-blog cms

a-blog cmsの場合、Entry_Headlineモジュールを使うことになりそうですが、日付を保持しておくユーザー変数がないので日付の比較が出来ないため、同一日のポストをリストの入れ子でまとめるといったことは不可能と判断しました。