BloggerのBlogウィジェットをバージョン2にする

2

BloggerのBlogウィジェットをバージョン２にする。

はじめに

元々使用してるテンプレートが、いわゆる旧テーマであったため、最終更新日を表示するdata.lastUpdatedタグが使用できなかった。更新日は、JavaScriptとdata.lastUpdatedISO8601タグで対応できるが、JavaScript処理のため、ワンテンポ遅れて表示していた。

ウィジェットバージョンを2とすることで、新テーマ用のテンプレートタグのdata.lastUpdatedを使用する。

失敗談

Bloggerのテーマ編集画面でウィジェットバージョンを1から2に変更したが、バージョンは上がらなかった。

  1. Bloggerのテーマ編集画面でタグを書き換える
    • <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog' version='1'>
    • version='2'に変更する
  2. 保存ボタンを押す
  3. 別画面に遷移してから再度テーマ編集画面を表示する
  4. version='1'に戻っている

成功談

  1. 最小構成の空テンプレートを作成する
  2. 空テンプレートを最新バージョンにする
  3. 空テンプレートにバージョン2のBlogウィジェットを配置する
    • Blogウィジェットバージョン2が配置される
    • 自動で初期コードが生成される
  4. 元テンプレートのBlogウィジェット内容を空テンプレートのBlogウィジェットに上書きする
    • 空テンプレートでBlogウィジェットがバージョン2で保存される
      • 元コードはそのまま保存される
      • バージョン2のコードが自動追加される
      • バージョンは2のままとなる
  5. 作成した空テンプレートのBlogウィジェットを元テンプレートに上書きする
    • 元テンプレートは、Blogウィジェット以外はウィジェットバージョン2対応させておく
      • テンプレートバージョンなど
      • 空テンプレートを最新バージョンにしたものを参考
    • 元テンプレートにバージョン2のBlogウィジェットが保存される
  6. 動かなくなったコードを修正してバージョンアップ完了

※失敗談のようにバージョンを戻されることなく、正常にバージョンアップできた
※筆者は、ウィジェットのBlogウィジェットのみバージョン2としました。他のウィジェットは、バージョン1のままです。

動かなくなったコードを修正

ウィジェットバージョン1から2に変更すると、以前動作していたテンプレートタグが動作しなくなります。動作しなくなったタグの対応表です。

Widget Version1Widget Version2備考
post.snippetpost.snippets.shortスニペット
post.timestampISO8601post.date.iso8601投稿日
post.lastUpdatedISO8601post.lastUpdated更新日
post.lastUpdatedISO8601post.lastUpdated.iso8601更新日
lable.isLastCSSで置き換え
data:post.labels.last
data:post.labels.last == data:label		:last-child
最後の要素
homeMsgmessages.homeホーム
newerPageTitlemessages.newerPosts前の投稿
olderPageTitlemessages.olderPosts次の投稿
post.numCommentsmessages.numberOfCommentsコメント数
view.isMobile
mobile='no'		blog.isMobileRequestモバイル判定

参考