公式テーマContempo・Soho・Emporio・Notableでは、記事ページから前後の記事に移動するリンクがありません。
一般的なブログには良くある機能ですし、他の公式テーマにもある機能なので必要だと思う方が多いと思います。
本記事ではそんな前後リンク(新しい投稿/前の投稿)を表示させる方法を解説します。
少し手順が多いので、HTML編集に慣れてから試すのをオススメします。
HTML編集
先ずはHTML編集での作業になります。
HTMLの編集手順
左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。
それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。
HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。
HTMLの編集が終わったらプレビュー画面で確認して、保存をします。
手順①:ページネーションタグの追加
HTML編集画面右上のウィジットに移動を選択します。
そこから投稿ウィジットを選択します。
Emporioの場合は【Blog1】になります。
表示された30行くらい下に<b:include name='super.main'/> があります。
その直ぐ下に<b:include cond='data:view.isPost' name='postPagination'/>を書き加えます。
手順②:「新しい投稿」リンク生成コードの追加
手順①同様に投稿ウィジット【Blog1】を表示させ、<b:includable id='previousPageLink'>で検索します。
(全体で同じコードが2つありますがBlog1内にある方になります。)
検索したコードの後に続く
<b:comment>We don't show previeus page links in Emporio.</b:comment>
を
<a class='blog-pager-newer-link flat-button ripple' expr:href='data:newerPageUrl' expr:title='data:messages.newerPosts'><data:messages.newerPosts/></a>
に書き換えます。
(書き換え前のコードはテーマによって若干異なります。)
↓↓↓
手順③:「その他の投稿」を「前の投稿」に変更
手順①同様に投稿ウィジット【Blog1】を表示させ、<b:includable id='nextPageLink'>で検索します。
(全体で同じコードが2つありますがBlog1内にある方になります。)
その後に続くコードのmorePosts(その他の投稿)をolderPosts(前の投稿)に書き換えます。
↓↓↓
トップページにページネーションを追加している場合
ページネーション(ページャー)の追加方法で「その他の投稿」をコメントアウトしましたが、これを元に戻さないと「前の投稿」が表示されません。
ただそのまま戻してしまうとトップページのページネーションに干渉してしまうので、「記事ページだけ」という条件コードを追加する方法にします。
前項の手順③のコードの下に<data:messages.olderPosts/>があります。
コメントアウトしていたらそれを外し、<b:if cond='data:view.isPost'>~</b:if>で囲みます。
これでトップページのページネーションには表示されず、記事ページだけ「前の投稿」が表示されるようになります。
CSSの追加
続いてCSSの追加でリンクの位置や文字の大きさを調整します。
CSSの追加方法
左のメインメニューから【テーマ】を選択し【カスタマイズ】をクリックします。
そこから【詳細設定】の【CSSを追加】を選択します。
【カスタムCSSを追加】にCSSを入力できます。
後述のCSSを入力したら保存をして、反映されているか実際にブログを確認しましょう。
手順④:前後リンク配置CSS
以下のようなCSSを追加してリンクの位置や文字の大きさを調整します。
余白と文字の大きさはお好みで変更してください。
記事の前後リンク表示完了!
上記の手順で、記事の前後リンクは表示できます。
なぜ古いテーマにはあるのに新しいテーマでは省いてしまったのか謎ですね。
ただ個人的にはブログの前後リンクをあまり使わないので、不要かなとも思いつつ……。
まぁあっても邪魔にならない位置なので、今回を機にそのまま表示させています。
本記事は下記のブログを参考にさせて頂いております。
参考ブログ様
ふじろっく【ページネーション(前後記事リンク)を表示させる】
些細な日常【Bloggerブログの記事ページに新しい投稿や前の投稿のページネーションを付ける】