[Shopify]ブログ記事の「次の記事/前の記事」ボタンを挿入できるセクション（Dawn）62/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。

今日はブログの記事で次の記事&前の記事へ遷移できるボタンを設置できるセクションを作成してみました。デフォルトだと「ブログへ戻る」しかなくて記事一覧に毎度戻らないといけないので面倒だなぁと思い作ってみました。

対象テーマ：Dawn

✔️今回のゴール

◆デモページ
手順❶ ここをクリック（PW：stahsk40jw1Mf）
手順❷ 参考ブログ→こちら

SPは前の記事ボタンと次の記事ボタンが縦に２つ並びます。

◆CMSの特徴

CMSはバッジの背景カラーのみ変更ができます。

✔️設置手順

Step1 　セクションを追加する

管理画面＞テーマ＞コードを編集＞Section＞新規セクションを追加

ファイル名はなんでもOKです。
私は「article-prev-next」にしてみました。

◆下記のコードをコピペ

{% style %}
.malin__next:after,.malin__prev:after {
    background-color: {{ section.settings.color_bk }};
}
{% endstyle %}

<div class="page-width article-prev-next">
    <ul class="malin__flex">
        {% if blog.previous_article %}
        <li class="malin__grid_half">
          <a href="{{ blog.previous_article }}">
            <div class="linkbtn__inner malin__prev">
                <ul class="malin__flex">
                    <li class="malin__grid_onethird"><img src="{{ blog.previous_article.image | img_url: 'master' }}"></li>
                    <li class="malin__grid_twothird prvnxt__title">{{ blog.previous_article.title | truncate: 30 }}</li>
                </ul>
            </div>
        </a>
        </li>
        {% endif %}
        {% if blog.next_article %}
        <li class="malin__grid_half">
          <a href="{{ blog.next_article }}">
            <div class="linkbtn__inner malin__next">
                <ul class="malin__flex">
                    <li class="malin__grid_twothird prvnxt__title">{{ blog.next_article.title | truncate: 30 }}</li>
                    <li class="malin__grid_onethird"><img src="{{ blog.next_article.image | img_url: 'master' }}"></li>
                </ul>
            </div>
          </a>
        </li>
        {% endif %}
    </ul>
</div>

{% schema %}
{
  "name": "次の記事/前の記事（ブログ記事用）",
  "tag": "article",
  "settings": [
    {
      "type": "color",
      "id": "color_bk",
      "label": "PREV/NEXTバッジの背景カラー",
      "default": "#ddc96c"
    }
  ],
  "presets": [
    {
      "name": "次の記事/前の記事（ブログ記事用）"
    }
  ]
}
{% endschema %}

これでセクションの準備は完了です！

=== ちょっとだけテックの解説 ===

前後の記事を表示する場合は下記のオブジェクトを使用します

{{ blog.previous_article }} #前の記事
{{ blog.next_article }} #次の記事

タイトルを入れる場合は後ろに「.title」をつけるだけ

{{ blog.previous_article.title }}

画像の場合は「.image」です。

blog.previous_article.image

Step2 　CMSでブログ記事にセクションを追加します

ブログ記事を選択して「セクション追加」をクリック
先ほどセクションを追加したので「次の記事/前の記事（ブログ記事用）」という名前のセクションができていると思います。

そちらを選択。

あとはお好みの位置に設置するだけ。
私はフッターの上に置いてみました。

前の記事と次の記事が上手く挿入されていますね。
あとはレイアウトを整えましょう♪
お好みで調整してみてください。

✔️コピペで簡単！フルコードはこちら

下記にスタイルを含めたフルバージョンのコードを記載しておきます。

【ご注意】
※返金&サポートはしておりません。
※最新のDawnテーマ対象です。
　別テーマでも使用できるかもしれませんが検証はしてません。
※コードのみのご紹介で解説などはしておりません。
※2022.11.8時点のコードです。メンテナンスは今後する予定はありません。