ウェブノウハウ

WEB KNOWHOW

ShopifyをカスタマイズしてオリジナルのECサイトを作る

トップのブログ最新記事表示のレイアウトをブログカテゴリごとに変更する【テーマ:Debut】

前回は、ブログのアーカイブページ(一覧ページ)の処理をブログカテゴリごとに変えることについて解説しましたが、今回は、トップページのそれについて説明します。

トップページのブログ最新記事表示処理は sections/featured-blog.liquid で制御されているので、このファイルをカスタマイズします。

振り分けの条件は、前回は「カテゴリ名」を条件に振り分けましたが、今回はセクションIDで振り分けてみます。
Shopifyではセクションごとに一意のIDを持っているので、そのIDを利用しようというわけです。
(カテゴリ名で振り分ける場合は、「section.settings.title」がカテゴリ名になるのでそれを条件にすればOKです)

<ul>
{% if section.id == 'XXXXXXXXXXXXX' %}
  {% for article in blog.articles limit: section.settings.post_limit %}
  <li>・・・</li>
  {% endfor %}
{% elsif section.id == 'XXXXXXXXXXXXX' %}
  {% for article in blog.articles limit: section.settings.post_limit %}
  <li>・・・</li>
  {% endfor %}
{% else %}
  {% for article in blog.articles limit: section.settings.post_limit %}
  <li>・・・</li>
  {% endfor %}
{% endif %}
</ul>

for文の回す回数を制限したければ、「limit:」を使えばできます。
上の記述では「limit: section.settings.post_limit」として、管理画面の設定に基づくようにしていますが、件数指定にする場合は、「section.settings.post_limit」を数字にしてしまえば良いです。

あと、elseifはLiquidでは「elsif」になります。気を付けましょう。

【100ウェブ新着情報メルマガ】

WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!