[Shopify 無料App] ブログに関連記事を追加する方法

Shopifyブログに関連記事付けたいなと思いました。（唐突）

ただ自動で関連記事を拾ってくるように実装するのはしんどそう。。と思ったので色々調べていたところ、『Related Blog Posts』という無料アプリを見つけました。

デザイン調整は必要ですが、こんな感じでブログ記事の下に関連記事を表示してくれます。

 とっても便利なのに無料アプリなので、使わない手はありません👀

アプリのインストールと関連記事表示方法

結構前に入れたアプリなので、ちょっとうろ覚えなところもありますが、できるだけ思い出しながら書いていきますね。

と思いましたが、アプリをインストールした後にやることは

上記のコードを表示したい場所に埋め込むだけでした。

とっても簡単でした！ 

具体的に埋め込む場所は、debutテーマであれば、templates/article.liquid内の{% section 'article-template' %}の後で大丈夫そうです。テーマによって調整が必要なので、様々な場所に埋め込んでどこが適切かテストしてみてください。

Related Blog Postsアプリの設定方法

あとは、管理画面のアプリ側から表示したい記事数、関連記事の判断、記事のサムネイルを表示/非表示などの設定を行います。

英語苦手な方のために、項目翻訳しておきますね！

• Related to: （関連記事の判断）
  
  これは何を元に関連記事と判断するかです。特にこだわりがなければ、Content, Tags and Authorで問題ないです。
  
  
• Number of related posts to display:（表示する記事数）
• Display the related posts image:（関連記事の画像を表示するか）
• Selection of image sizes:（表示する画像のサイズ）
• Source of the excerpt:（関連記事の概要説明部分に表示するもの）
• How to handle no related posts:（関連記事がなかった場合）
  
  関連記事がなかった場合は、せっかくなのでRandom postでランダム記事を表示させるのが良いと思います！
  
  
• Blogs to display on:（表示するブログ）
• Show only the same blog type:（他のブログ記事からも記事を引っ張ってくるか）
• Exclude by tag:（関連記事を表示しない 除外するタグ）
• Exclude by ID:（関連記事を表示しない 除外するID）
• Exclude from pool by tag:（関連記事に表示させない 除外するタグ）
• Exclude from pool by ID:（関連記事に表示させない　除外するID）

そして絶対的に変えた方が良いのが下記の『関連記事（Related Posts）』のタイトルです。デフォルトが英語なので、"Related Posts"→"関連記事"に変えておきましょう。英語を基調としたサイトなら、そのままでも良いかも。

関連記事をカスタマイズしたい人向け

関連記事をゴリゴリカスタマイズしたい人は、（確か）アプリインストール時にsnippets/relatedblogs.liquid  がテーマに自動で追加されるはずですので、そちらを編集すれば結構自由にカスタマイズすることが可能です。

私もそちらで少々カスタマイズしながら、CSSでデザインを当てて、この記事の下の『関連記事』のように表示させています。

ブログにRelated Blog Postsを使用して関連記事を追加する方法

以上は今回はブログに関連記事を表示させる方法についてまとめてみました。

個人的にはブログ記事の下に関連記事があった方がみやすいなと思いますし、せっかくブログに遊びに来てくれても1記事で離脱されてしまうと悲しいですよね。できればちゃんと滞在できる仕組みを作って、色々な記事を楽しんでもらいたいものです。もし良いと思ったらぜひSNS等でシェアしていただけると嬉しいです。

それでは本日も良い1日を！

https://apps.shopify.com/related-blog-posts