[Shopify] 最新ブログ記事を一覧にしてサイドバーなどに表示する

前回はブログ記事脇のサイドバーにピックアップ（おすすめ）ブログ記事一覧を作成しました。

https://ec-penguin.com/blogs/shopify/pickup-articles

そして、今回は最新記事一覧を取得し、同様に表示させていきたいと思います。

私はブログ記事の脇にサイドバーを作成しているので、たくさん表示される記事があった方が読者の方にも他の記事が目に付きやすくなるのではないかと。

完成予想図がこのような感じです。

最新ブログ記事を一覧表示させるコード

 まず元となる最新記事一覧を表示させることのできるコードがこちらです。

これが元となるコードです。

ちょっと解説していくと

通常、上記のコードでブログ記事一覧を拾ってきているのですが、今回は "limit" で取得する記事数の上限を決めています。

この場合は最初の5記事のみを取得するといった感じですね。もっと多くの最新ブログ記事を表示させたい場合はこの数を増やせば表示されるようになります。

あとは下の方の<style>タグの部分でデザインを当てています。追加でCSSを当てたい場合は、HTML要素にクラス名を追加したり、スタイルタグの中に追加していって問題ありません。（今回クラス名で制御していることは何もないので。）

また今回はピックアップ記事とは違い、特にカスタマイズ画面から編集する必要もないです。

最新記事一覧セクションを埋め込む

普通に上記コードをコピーして直接他のliquidファイルに貼り付けでも大丈夫です。ただ埋め込みの方法で推奨しているのが、上記コードを丸々コピペして、新規セクションを作成する方法です。（この方が色々使い回しが効きます）

セクションを作成する方法はこちら↓

https://ec-penguin.com/blogs/shopify/introduction-to-sections

この方法で私は"recent-articles.liquid"というセクションを追加しました。

あとは、

というコードを埋め込みたい場所に記述するだけです。

 Shopifyの最新ブログ記事を一覧にしてサイドバーなどに表示する まとめ

 このように最新ブログ記事をShopifyサイトで表示することは特別難しいわけではありません。

ブログ記事のサイドバーはもちろん、多少レイアウトを変更して、トップページに3記事ほどちょこっと表示させるのも良いかもしれませんね。トレンドブログを書いていた場合、最新記事は読者が最も読みやすい、興味を持ちやすい記事であることが多いです。よって、ピックアップ記事はもちろん、最新記事も一緒に表示させてあげると滞在時間や滞在ページ数が伸びるのかなと思いました。

それでは最後までお読みいただきありがとうございました。

本日も良い1日を！