ホーム » QooQ »

【Blogger】QooQ widgetをversion2にする【Blog widget編】

2022年09月06日更新

2022年08月28日公開

当サイトはアフィリエイト広告を使用しています

QooQver1.31のBlog widgetをversion1からversion2に変更したときの個人的メモです。準備編その他widget編資料編Blog widgetが作業対象です。作業量が多く、v2のincludableタグ生成などを行います。あくまで実験的なものです。本番環境での使用は想定していません。当面の理解のうえで試してみたらこうなったという水準です。正確性はないので留意してください。もし試す場合は、ぜひ開発用ブログを作成して試してください。Blog widgetのincludableタグに対して以下を行いました。

【任意】元テンプレートのincludableタグ削除（8か所）

【必須】v2のincludableタグに置き換え（10か所）

【必須】v2のincludableタグを追加（6か所）

【必須】v1のデータタグをv2用に変更（7か所のincludableタグ内）

【任意】中身を削除して閉じたv2のincludableタグを追加

includableタグ削除残したままでも問題ないと思いますが、以下の条件で元テンプレートのincludableタグを削除しました。

元テンプレートで閉じているincludableタグ

代替がないv1のincludableタグ

<b:includable id='backlinkDeleteIcon' var='backlink'/> <b:includable id='backlinks' var='post'/> <b:includable id='comment_count_picker' var='post'> ~ </b:includable> <b:includable id='mobile-index-post' var='post'> ~ </b:includable> <b:includable id='mobile-main' var='top'> ~ </b:includable> <b:includable id='mobile-nextprev'> ~ </b:includable> <b:includable id='mobile-post' var='post'> ~ </b:includable> <b:includable id='postQuickEdit' var='post'> ~ </b:includable>Les inclusions XML dépréciées - Blogger Code PEincludableタグ置き換え以下の順番で作業

v2のBlog Widgetのincludableタグが必要なので生成

元テンプレートのincludableタグとv2のincludableタグを置き換え

v2のincludableタグを生成置き換え用のv2のincludableタグを生成します。管理画面「テーマ」「カスタマイズ▼」「HTMLの編集」画面に下記をコピペして「保存」<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:css='false' b:js='false' b:defaultwidgetversion='2' b:layoutsVersion='3'> <head> <b:comment> <b:skin/> </b:comment> </head> <body> <b:section id="main"> <b:widget id="Blog1" title="" type="Blog"/> </b:section> </body> </html>タグを置き換え下記id名の元テンプレートのincludableタグと、対応するv2のincludableタグを置き換えます。

v1	v2
comment-form	commentForm
commentDeleteIcon	commentDeleteIcon
comment_picker	commentPicker
comments	comments
feedLinks	feedLinks
feedLinksBody	feedLinksBody
iframe_comments	iframeComments
threaded-comment-form	threadedCommentForm
threaded_comment_js	threadedCommentJs
threaded_comments	threadedComments

commentDeleteIcon iframeComments threadedCommentJsは置き換えずにタグを閉じてもいいかもしれません。例：<b:includable id='threadedCommentJs'/>Les inclusions XML dépréciées - Blogger Code PEfeedLinksとfeedLinksBody元テンプレートのincludeタグにname='feedLinksがなく、動作しているか疑問ですが、一応feedLinksとfeedLinksBodyも置き換えました。includableタグ追加下記id名のv2のincludableタグを</b:widget>の直上に追加しました。

addComments

commentAuthorAvatar

commentFormIframeSrc

commentItem

commentList

commentsTitle

後述する自動で追加されるincludableタグの処理を先に行うと、これらのincludableタグは自動で追加される。includeタグ置き換えid='main'内の<b:include data='post' name='comment_picker'/>を置き換え<b:include data='post' name='comment_picker'/> ↓ <b:include data='post' name='commentPicker'/>データタグ変更v2に対応しているデータタグがない場合は、代替のデータタグを使用しています。id='main'

v1	v2
data:post.dateHeader	data:post.date

id='main'に1か所、id='post'に2か所data:posts[i].dateHeader (Blog) Blogger Code PEdata:posts[i].date (Blog|FeaturedPost|PopularPosts) Blogger Code PE

v1	v2
data:post.sharePostUrl	data:post.shareUrl

2か所data:posts[i].sharePostUrl (Blog) Blogger Code PEdata:posts[i].shareUrl (Blog|FeaturedPost|PopularPosts) Blogger Code PE

v1	v2
data:top.showPostLabels	data:top.allBylineItems.labels

data:showPostLabels (Blog) Blogger Code PEdata:widgets[i].allBylineItems (Global) Blogger Code PE

v1	v2
data:postLabelsLabel	data:top.allBylineItems.labels.label

data:postLabelsLabel (Blog) Blogger Code PEdata:widgets[i].allBylineItems[i].label (Global) Blogger Code PEid='nextprev'

v1	v2
data:newerPageTitle	data:messages.newerPosts

2か所data:newerPageTitle (Blog) Blogger Code PEdata:messages.newerPosts (Global) Blogger Code PE

v1	v2
data:olderPageTitle	data:messages.olderPosts

2か所data:olderPageTitle (Blog) Blogger Code PEdata:messages.olderPosts (Global) Blogger Code PEid='mrp'

v1	v2
data:label.isLast	data:post.labels.last

b:if書き換えdata:posts[i].labels[i].isLast (Blog) Blogger Code PEdata:posts[i].labels (Blog|FeaturedPost|PopularPosts) Blogger Code PE<b:if cond='data:label.isLast == "true"'>を置き換える<b:if cond='data:label.isLast == "true"'> ↓ <b:if cond='data:post.labels.last == data:label'>または、<b:if cond='data:post.labels.last.name != data:label.name'>に置き換え参考サイト：BloggerのBlogウィジェットをバージョン2にする | バグ取りの日々

v1	v2
data:post.canonicalUrl	data:post.url.canonical

id='mrp'に1か所、id='shareButtons'で5か所data:posts[i].canonicalUrl (Blog) Blogger Code PEdata:posts[i].url (Blog|FeaturedPost|PopularPosts) Blogger Code PEid='mybreadcrumb'

v1	v2
data:label.isLast	data:post.labels.last

v1	v2
data:post.dateHeader	data:post.date

id='main'に1か所、id='post'に2か所data:posts[i].dateHeader (Blog) Blogger Code PEdata:posts[i].date (Blog|FeaturedPost|PopularPosts) Blogger Code PE

v1	v2
data:post.firstImageUrl	data:post.featuredImage

QooQ listにはないdata:posts[i].firstImageUrl (Blog) Blogger Code PEdata:posts[i].featuredImage (Blog|FeaturedPost|PopularPosts) Blogger Code PE投稿日の形式については記事後半に記載しましたid='shareButtons'

v1	v2
data:post.canonicalUrl	data:post.url.canonical

data:posts[i].canonicalUrl (Blog) Blogger Code PEdata:posts[i].url (Blog|FeaturedPost|PopularPosts) Blogger Code PEid='main'に1か所、id='shareButtons'に5か所id='status-message'id='status-message'のincludableタグと、<b:include data='top' name='status-message'/>が下記と置き換え可能<b:includable id='noContentPlaceholder'> <b:if cond='data:posts.empty'> <div class='blog-posts hfeed container'> <div class='post-outer-container'> <b:if cond='data:view.isError'> <div class='status-msg-body'><data:navMessage/></div> <b:else/> <div class='no-posts-message'><b:eval expr='data:view.isSearch ? data:messages.noResultsFound : data:messages.theresNothingHere'/></div> </b:if> </div> </div> </b:if> </b:includable><b:include data='top' name='noContentPlaceholder'/>data='top'はなくても動くっぽいです。status-message : Message d'état dans le gadget Blog (V1) Blogger Code PEnoContentPlaceholder : Message d'état de la page Blogger Code PE自動で追加されるincludableタグの処理v2にするとv2用のincludableタグが自動で追加されます。そのままでも問題ないと思いますが、includableタグが中身のある状態で追加されると、コードの可読性や軽量化等、少し邪魔に感じます。そこで、同じid名のincludableタグは上書きされないという性質をつかって、処理してみました。【Blogger】b:includable タグの中身一括削除ツール | 水の中にはサメがいる！さんのツールをつかってv2のBlog widgetのincludableタグの中身を削除して閉じる。今回使用しない判断をしたincludableタグを</b:widget>の直上にコピペ投稿日（と更新日）データタグの置き換えでdata:post.dateHeaderをdata:post.dateに変更しました。<p id='single-header-date'><data:post.date/></p><b:if cond='data:post.date'> <script type='text/javascript'>var jsdate = "<data:post.date/>"</script> </b:if>自分の環境だけかもしれませんが、このままだと2022年9月1日のような年月日の順番で表示されません。そこで<data:post.date/>を下記と置き換えました。（注）<p id='single-header-date'><data:post.date.year/>年<data:post.date.month/>月<data:post.date.day/>日</p><b:if cond='data:post.date'> <script type='text/javascript'>var jsdate = "<data:post.date.year/>年<data:post.date.month/>月<data:post.date.day/>日"</script> </b:if>（注）document.writeについて<b:if cond='data:post.date'> <script type='text/javascript'>var jsdate = "<data:post.date.year/>年<data:post.date.month/>月<data:post.date.day/>日"</script> </b:if>を呼び出すためのJavaScript<script type='text/javascript'>document.write(jsdate)</script>のdocument.writeは現在非推奨のようです：document.write() - Web APIs | MDNそこで下記のコードは削除<b:if cond='data:post.date'> <script type='text/javascript'>var jsdate = "<data:post.date.year/>年<data:post.date.month/>月<data:post.date.day/>日"</script> </b:if>下記コードを入れ替えで対応してみました。変更前<p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p>変更後<p class='list-item-date'><data:post.date.year/>年<data:post.date.month/>月<data:post.date.day/>日</p>また、ゼロ付き（例：09月01日）の投稿日（と更新日）については下記サイトを参考にしてください。

投稿日表示のフォーマットのカスタマイズ | ふじろじっく

Bloggerに更新日を表示する | バグ取りの日々

備考b:widget-settingb:widget-settingが違っていたので変更しました。変更前v1 <b:widget-setting name='authorLabel'>By</b:widget-setting>変更後v2 <b:widget-setting name='commentLabel'>comments</b:widget-setting>manageCommentsthreadedComments内の<b:include data='post' name='manageComments'/>対応するincludableが見つからないnextprevQooQはnextprevで前のリンクと新しいリンクを実装している<b:includable id='nextprev'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> </span> </b:if> </div> <div class='clear'/> </b:includable>v2のb:includableタグだとnextPageLink, previousPageLinkまたはpostPaginationあたり？削除可能？id='main'内の下記コードは削除可能？<b:if cond='data:post.editUrl'> <span expr:class='"item-control " + data:post.adminClass'> <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </b:if>コメントの数を表示管理画面「レイアウト」のBlog widgetの設定と連携させるなら、id='commentsTitleのincludableタグを変更します。

変更前<b:includable id='commentsTitle'> <h3 class='title'><data:messages.comments/></h3> </b:includable>変更後<b:includable id='commentsTitle'> <h3 class='title'><data:post.numberOfComments/><data:allBylineItems.comments.label/></h3> </b:includable><data:widgets.Blog.first.allBylineItems.comments.label/>は、<data:allBylineItems.comments.label/>でも動く模様（理解不足です）

Filtres de données universelles pour les options des articles - Blogger Code PEOption : Les libellés associés à l'article - Blogger Code PEIntroduction : Les options des articles - Blogger Code PEdata:commentLabel (Blog) - Blogger Data Documentation - Blogger Code PEdata:widgets[i].allBylineItems[i].label (Global) Blogger Code PEまた、こちらに変更するとBlog widgetの設定と関係なく「～件のコメント」の文字が出力され、コメントがない場合は「コメントなし」と出力されます。<b:includable id='commentsTitle'> <h3 class='title'><b:message name='messages.numberOfComments'> <b:param expr:value='data:post.numberOfComments' name='numComments'/> </b:message></h3> </b:includable>data:messages.numberOfComments (Global) Blogger Code PE .post__table--wrapper { overflow-x: auto; } .post__table { width: 100%; border-collapse: collapse; border-spacing: 0; font-family: SFMono-Regular, Consolas, "Courier New", "BIZ UDGothic", Meiryo, monospace; white-space: nowrap; } .post__table th { padding: 5px; border-bottom: solid 4px #778ca3; color: #778ca3; } .post__table td { padding: 5px; border-bottom: solid 1px #778ca3; } .post__table td:first-child { padding-right: 1em; }

ふじやん2022年8月29日 2:46
v2 化作業と詳細な記事の執筆お疲れ様です。
うちのオリジナルテーマ作成はほぼ行き当たりばったりの作業で、どこをどう弄ったか記憶が曖昧なので、色々思い出したり参考になりました(^^;

「○件のコメント」表示に関して、「件のコメント」はそのまま文字で入れてたので、多言語対応仕様にするべく、こちらの記事を参考にコードを入れ替えさせて頂きました。

一桁の投稿日・更新日にゼロを付ける方法ですが、JavaScript を使わず Blogger タグを使うやり方もありますのでご参考まで。
https://fujilogic.blogspot.com/2019/05/timestamp-format-customize.html#c3491760625113259663
返信削除
返信

コメントを追加

【Blogger】QooQ widgetをversion2にする【Blog widget編】

2 件のコメント:

コメントを投稿

検索

最近の注目記事

カテゴリー

Random Picks

よく読まれている記事

Author