Blogger 公式テンプレート「Emporio」に関連記事を表示させる方法

2023/10/09

Emporioテンプレート

今回は何かと扱いが面倒なBlogger公式テンプレート「Emporio」に関連記事を設置する方法を紹介する。

基本"IB-Note"さんのブログ記事で紹介されているプラグインを「Emporio」にポン付けするカスタマイズとなる。

ただ設置する場所を間違えると関連記事が表示されない。ワイ自身、適正な設置場所への理解が足りずあたふたしてしまった。

※「Emporio」をカスタマイズした サンプルブログ を見る。

関連記事の設置場所

これ以降の作業は事前にテンプレートファイル(.xml)をバックアップした上で進めて欲しい。

Blogger管理画面から「HTMLの編集」へ。

関連記事の挿入位置

<b:includable id='postFooter' var='post'>で検索する。

赤いラインの位置に、"IB-Note"さんで公開されているプラグインを挿入する。「Emporio」(投稿ウィジェット内)ではこの位置がベストと判断した。

サイトフィードの設定

フィード設定

関連記事はブログのフィード情報を取得して表示される仕組みだ。bloggerの設定で「ブログフィードを許可」を(なし)以外に設定しておく必要がある。

フィード設定2

Emporioではview型のデータタグを使用する

関連記事の見た目

プラグインの導入が成功すると、こんな感じで関連記事が綺麗に表示される。ポン付け状態でほぼ完璧である。

ささやかな変更点として以下のコードを変更したくらいだ。

条件分岐タグ

白い枠で囲んだ、<b:if cond='data:blog.pageType == "item"'>の部分を以下のコードに置き換えた。

<b:if cond='data:view.isPost'>

データタグといってページの振り分けを決めているコードなんだけど、「Emporio」では、data:blog.pageType(blog型)ではなく、data:view(view型)が使用されている。

ここでの意味は、投稿(記事)ページのとき表示するコンテンツを決定している。

data:viewの方が、新しいタイプの振り分けタグとなる。

data:blog.pageTypeでもプログラムは動作するけど、一応テンプレートのスタイルに合わせておいてもバチは当たらないだろう。