【Blogger改造】記事でもない静的ページでもない特別なページを作る完璧すぎる方法
特別なページへのリンクを修正しました。以前はサーチラベルに : を含んでいましたがこれを - に改めました。(2020/09/18)
Blogger 改造ガチ勢のみなさん、こんにちわ。
テンプレートのカスタマイズに力が入ってくると“記事でもなく、静的ページでもない、特別なページを作りたい”ケースがあると思います。そんなときにどうやってテンプレートをホゲホゲしたら良いのか？今宵あなたは完全なる正解を手にします。
なんとそれは検索結果ページとサーチクエリを使った方法でした。
モバイルで消したウィジェットを特別ページで復活
僕の場合ではモバイル用にテンプレートを最適化している際に遭遇しました。
モバイル版ではサイドバーやフッターに配置したラベルリスト、記事アーカイブ、人気の投稿、ページリストの各ウィジェットを非表示にしました。
しかしこれらの情報がどこかにないと不自由なため4つのウィジェットそれぞれにページが欲しくなりました。
まずは画像のように“空のページを4つ作った上でそれを次のようなコードでフックする”という方法が考えられます。僕も長い間この方法しか考えられませんでした。
<b:if cond='data:blog.pageName == "mobile-labell"'>
<!-- ラベル一覧 -->
<b:elseif cond='data:blog.pageName == "mobile-blog-archive"' />
<!-- 記事アーカイブ -->
<b:elseif cond='data:blog.pageName == "mobile-popular-posts"' />
<!-- 人気の記事 -->
<b:else/>
<b:elseif cond='data:blog.pageName == "mobile-pages"' />
<!-- ページ一覧 -->
<b:else/>
<b:section id='sec2' showaddelement='no'>
<b:widget id='Blog1' locked='true' type='Blog'>
<!-- 通常のページ -->
</b:widget>
</b:section>
</b:if>
しかしこの方法は次の点がスマートではありません。
- 管理画面が空のページで煩くなる
- 空のエントリがページのフィード(/feeds/pages/default)に出てきてしまう
検索結果ページを使う完璧な方法
今回ご紹介する完璧な方法とは、検索結果ページとサーチクエリを使った横綱技です。
検索結果ページを乗っ取る形で特別ページを表示します。4つの特別ページのどれを表示するかは検索文字列(data:blog.searchQuery)で分岐させます。
検索文字列は任意に決めることができますが、読者が検索する文字と被ることが無いように冗長なものにします。
<b:if cond='data:blog.searchQuery == "extra-page-label"'>
<!-- ラベル一覧 -->
<b:section id='sec-ex1' showaddelement='no'>
<b:widget id='Label2' locked='true' type='Label' mobile='yes'/>
</b:section>
<b:elseif cond='data:blog.searchQuery == "extra-page-blog-archive"'/>
<!-- 記事アーカイブ -->
<b:section id='sec-ex2' showaddelement='no'>
<b:widget id='BlogArchive2' locked='true' type='BlogArchive' mobile='yes'/>
</b:section>
<b:elseif cond='data:blog.searchQuery == "extra-page-popular-posts"'/>
<!-- 人気の記事 -->
<b:section id='sec-ex3'showaddelement='no'>
<b:widget id='PopularPosts2' locked='true' type='PopularPosts' mobile='yes'/>
</b:section>
<b:elseif cond='data:blog.searchQuery == "extra-page-page-list"'/>
<!-- ページ一覧 -->
<b:section id='sec-ex4' showaddelement='no'>
<b:widget id='PageList2' locked='true' type='PageList' mobile='yes'/>
</b:section>
<b:else/>
<b:section id='sec2' showaddelement='no'>
<b:widget id='Blog1' locked='true' type='Blog'>
<!-- 通常のページ -->
</b:widget>
</b:section>
</b:if>
4つの特別ページのリンクリストをモバイルにだけ表示するコードが次になります。
<b:if cond='data:blog.isMobile'>
<h3>索引</h3>
<ul>
<li><a href='/search?m=1&q=extra-page-label'>ラベル一覧</a></li>
<li><a href='/search?m=1&q=extra-page-blog-archive'>記事アーカイブ</a></li>
<li><a href='/search?m=1&q=extra-page-popular-posts'>人気の投稿</a></li>
<li><a href='/search?m=1&q=extra-page-page-list'>特設ページ</a></li>
</ul>
</b:if>
僕は使っていませんが連絡フォームなどはモバイルにかかわらず、このテクニックで専用ページに仕立ててしまうのがエレガントに思います。
しかし、Bloggerの連絡フォームはサイドバーには設置しやすくなっているものの、サイドバーに付けると「ここじゃない感」がハンパではないのは、決して揺らぐことはない事実です。
そうそう、検索が話題に出ましたので併せて大関技の完璧な検索窓の設置の仕方もぜひ目を通しておきましょう。
もうちょっと続くよ、今度はコンソールページだ
以下の情報はレイアウトの編集ページに、特別なページに追加したウィジェットも表示されるようになったため不要になりました。(2020/09/18)
ここまでで特定のウィジェットをメインコンテンツとする特別ページを仕込む方法が分かりました。
しかし、最後に一点だけ問題が残っています。なんとレイアウトの編集ページに以上で追加されたセクションとウィジェットは表示されないのです。
このためウィジェットの編集メニューに入ることができません。
幸いに、blogId とセクションID、ウィジェットID が判れば、URL 直打ちで編集メニューに入ることができます。
もうお分かりですね、もう1つ特別ページを追加します。このページは各ウィジェットの編集メニューへのリンクが張られています。
<b:elseif cond='data:blog.searchQuery == "extra-page-config"' />
<!-- 各ウィジェットの編集ページ -->
<h3>Edit-links of extra-page widget</h3>
<ul>
<li><a expr:href='"https://www.blogger.com/rearrange?blogID=" + data:blog.blogId + "&action=editWidget&sectionId=sec-ex1&widgetType=null&widgetId=PopularPosts2"' target='_blank'>Edit PopularPosts widhet</a></li>
<li><a expr:href='"https://www.blogger.com/rearrange?blogID=" + data:blog.blogId + "&action=editWidget&sectionId=sec-ex2&widgetType=null&widgetId=Label2"' target='_blank'>Edit Label widget</a></li>
<li><a expr:href='"https://www.blogger.com/rearrange?blogID=" + data:blog.blogId + "&action=editWidget&sectionId=sec-ex3&widgetType=null&widgetId=BlogArchive2"' target='_blank'>Edit BlogArchive widget</a></li>
<li><a expr:href='"https://www.blogger.com/rearrange?blogID=" + data:blog.blogId + "&action=editWidget&sectionId=sec-ex4&widgetType=null&widgetId=PageList2"' target='_blank'>Edit PageList widget</a></li>
</ul>
<b:if cond='data:blog.searchQuery == "extra-page-label"'>
<!-- ラベル一覧 -->
このページは読者に公開する必要がないので完全な隠しページとなります。テンプレートのソースコードを読まないと存在が判りません。
管理者だけが次のリンクをブラウザにブックマークしておきます。
完璧な独自ページの追加技によって益々存在感を増すBlogger
この横綱技によって WordPress のライバルとして Blogger は益々その存在感を増すでしょう。
つねづね「Wordpress の1割程度の自由度はあると思います
」と言ってきましたが、ここに至って訂正しなくてはいけません。
1割5分程度のカスタマイズ性があるよ！