FROM CACHE - jp_header
解決済

ブログ記事一覧から特定の記事を除きたい

SHOKO06
遊覧客
21 0 2

 

ブログの記事一覧で、1記事をピックアップのような形で、上部に表示させる予定です。

 

そのため、その後の記事一覧では、ピックアップ記事を除いた記事一覧にしたいです。

記事一覧から特定の記事を除く方法を知りたいです。

このとき、1ページあたりの記事数(6記事表示)などはそのままにしたいです。

 

よろしくお願いします。

1 件の受理された解決策

NIIGAKI_HYUGA
Shopify Partner
54 24 15

成功

初めまして。新垣です。

 

テーマはCraftですが、サンプルコードを添付いたします。

// 変更前
{{ ‘component-article-card.css’ | asset_url | stylesheet_tag }}
{{ ‘component-card.css’ | asset_url | stylesheet_tag }}
{{ ‘section-main-blog.css’ | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- paginate blog.articles by 6 -%}
  <div class=“main-blog page-width section-{{ section.id }}-padding”>
    <h1 class=“title--primary{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}“>
      {{ blog.title | escape }}
    </h1>

    <div class=“blog-articles {% if section.settings.layout == ‘collage’ %}blog-articles--collage{% endif %}“>
      {%- for article in blog.articles -%}
        <div
          class=“blog-articles__article article{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}”
          {% if settings.animations_reveal_on_scroll %}
            data-cascade
            style=“--animation-order: {{ forloop.index }};”
          {% endif %}
        >
          {%- render ‘article-card’,
            article: article,
            media_height: section.settings.image_height,
            media_aspect_ratio: article.image.aspect_ratio,
            show_image: section.settings.show_image,
            show_date: section.settings.show_date,
            show_author: section.settings.show_author,
            show_excerpt: true
          -%}
        </div>
      {%- endfor -%}
    </div>

    {%- if paginate.pages > 1 -%}
      {%- render ‘pagination’, paginate: paginate -%}
    {%- endif -%}
  </div>
{%- endpaginate -%}

{% schema %}
{
  “name”: “t:sections.main-blog.name”,
  “tag”: “section”,
  “class”: “section”,
  “settings”: [
    {
      “type”: “header”,
      “content”: “t:sections.main-blog.settings.header.content”
    },
    {
      “type”: “select”,
      “id”: “layout”,
      “options”: [
        {
          “value”: “grid”,
          “label”: “t:sections.main-blog.settings.layout.options__1.label”
        },
        {
          “value”: “collage”,
          “label”: “t:sections.main-blog.settings.layout.options__2.label”
        }
      ],
      “default”: “collage”,
      “label”: “t:sections.main-blog.settings.layout.label”,
      “info”: “t:sections.main-blog.settings.layout.info”
    },
    {
      “type”: “checkbox”,
      “id”: “show_image”,
      “default”: true,
      “label”: “t:sections.main-blog.settings.show_image.label”
    },
    {
      “type”: “select”,
      “id”: “image_height”,
      “options”: [
        {
          “value”: “adapt”,
          “label”: “t:sections.main-blog.settings.image_height.options__1.label”
        },
        {
          “value”: “small”,
          “label”: “t:sections.main-blog.settings.image_height.options__2.label”
        },
        {
          “value”: “medium”,
          “label”: “t:sections.main-blog.settings.image_height.options__3.label”
        },
        {
          “value”: “large”,
          “label”: “t:sections.main-blog.settings.image_height.options__4.label”
        }
      ],
      “default”: “medium”,
      “label”: “t:sections.main-blog.settings.image_height.label”,
      “info”: “t:sections.main-blog.settings.image_height.info”
    },
    {
      “type”: “checkbox”,
      “id”: “show_date”,
      “default”: true,
      “label”: “t:sections.main-blog.settings.show_date.label”
    },
    {
      “type”: “checkbox”,
      “id”: “show_author”,
      “default”: false,
      “label”: “t:sections.main-blog.settings.show_author.label”
    },
    {
      “type”: “paragraph”,
      “content”: “t:sections.main-blog.settings.paragraph.content”
    },
    {
      “type”: “header”,
      “content”: “t:sections.all.padding.section_padding_heading”
    },
    {
      “type”: “range”,
      “id”: “padding_top”,
      “min”: 0,
      “max”: 100,
      “step”: 4,
      “unit”: “px”,
      “label”: “t:sections.all.padding.padding_top”,
      “default”: 36
    },
    {
      “type”: “range”,
      “id”: “padding_bottom”,
      “min”: 0,
      “max”: 100,
      “step”: 4,
      “unit”: “px”,
      “label”: “t:sections.all.padding.padding_bottom”,
      “default”: 36
    }
  ]
}
{% endschema %}


//変更後
{{ ‘component-article-card.css’ | asset_url | stylesheet_tag }}
{{ ‘component-card.css’ | asset_url | stylesheet_tag }}
{{ ‘section-main-blog.css’ | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

//カスタマイズ画面で入力した全ハンドルを取得
{% assign excluded_articles = section.settings.exclude_articles | split: ‘,’ %}

{%- paginate blog.articles by 6 -%}
  <div class=“main-blog page-width section-{{ section.id }}-padding”>
    <h1 class=“title--primary{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}“>
      {{ blog.title | escape }}
    </h1>

    <div class=“blog-articles {% if section.settings.layout == ‘collage’ %}blog-articles--collage{% endif %}“>
      {%- for article in blog.articles -%}
                 // 記事を取り込む
        {%- assign skip_article = false -%}
                 
         //カスタマイズ画面で入力した全ハンドルを処理
        {%- for exclude in excluded_articles -%}
                     //カスタマイズ画面で入力した全ハンドルを分割
          {%- assign exclude_handle = exclude -%}
                     //分割したハンドルと記事のハンドルが一致する場合
          {%- if article.handle contains exclude_handle -%}
                         //記事を取り込まない
            {%- assign skip_article = true -%}
          {%- endif -%}
        {%- endfor -%}
                  //記事を取り込む場合
        {% unless skip_article %}
          <div
            class=“blog-articles__article article{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}”
            {% if settings.animations_reveal_on_scroll %}
              data-cascade
              style=“--animation-order: {{ forloop.index }};”
            {% endif %}
          >
            {%- render ‘article-card’,
              article: article,
              media_height: section.settings.image_height,
              media_aspect_ratio: article.image.aspect_ratio,
              show_image: section.settings.show_image,
              show_date: section.settings.show_date,
              show_author: section.settings.show_author,
              show_excerpt: true
            -%}
          </div>
        {% endunless %}
      {%- endfor -%}
    </div>

    {%- if paginate.pages > 1 -%}
      {%- render ‘pagination’, paginate: paginate -%}
    {%- endif -%}
  </div>
{%- endpaginate -%}

{% schema %}
{
  “name”: “t:sections.main-blog.name”,
  “tag”: “section”,
  “class”: “section”,
  “settings”: [
    {
      “type”: “header”,
      “content”: “t:sections.main-blog.settings.header.content”
    },
    {
      “type”: “select”,
      “id”: “layout”,
      “options”: [
        {
          “value”: “grid”,
          “label”: “t:sections.main-blog.settings.layout.options__1.label”
        },
        {
          “value”: “collage”,
          “label”: “t:sections.main-blog.settings.layout.options__2.label”
        }
      ],
      “default”: “collage”,
      “label”: “t:sections.main-blog.settings.layout.label”,
      “info”: “t:sections.main-blog.settings.layout.info”
    },
    {
      “type”: “checkbox”,
      “id”: “show_image”,
      “default”: true,
      “label”: “t:sections.main-blog.settings.show_image.label”
    },
    {
      “type”: “select”,
      “id”: “image_height”,
      “options”: [
        {
          “value”: “adapt”,
          “label”: “t:sections.main-blog.settings.image_height.options__1.label”
        },
        {
          “value”: “small”,
          “label”: “t:sections.main-blog.settings.image_height.options__2.label”
        },
        {
          “value”: “medium”,
          “label”: “t:sections.main-blog.settings.image_height.options__3.label”
        },
        {
          “value”: “large”,
          “label”: “t:sections.main-blog.settings.image_height.options__4.label”
        }
      ],
      “default”: “medium”,
      “label”: “t:sections.main-blog.settings.image_height.label”,
      “info”: “t:sections.main-blog.settings.image_height.info”
    },
    {
      “type”: “checkbox”,
      “id”: “show_date”,
      “default”: true,
      “label”: “t:sections.main-blog.settings.show_date.label”
    },
    {
      “type”: “checkbox”,
      “id”: “show_author”,
      “default”: false,
      “label”: “t:sections.main-blog.settings.show_author.label”
    },
    {
      “type”: “paragraph”,
      “content”: “t:sections.main-blog.settings.paragraph.content”
    },
    //カスタマイズ画面に入力項目の作成
    {
      “type”: “text”,
      “id”: “exclude_articles”,
      “label”: “Exclude Article”
    },
    {
      “type”: “header”,
      “content”: “t:sections.all.padding.section_padding_heading”
    },
    {
      “type”: “range”,
      “id”: “padding_top”,
      “min”: 0,
      “max”: 100,
      “step”: 4,
      “unit”: “px”,
      “label”: “t:sections.all.padding.padding_top”,
      “default”: 36
    },
    {
      “type”: “range”,
      “id”: “padding_bottom”,
      “min”: 0,
      “max”: 100,
      “step”: 4,
      “unit”: “px”,
      “label”: “t:sections.all.padding.padding_bottom”,
      “default”: 36
    }
  ]
}
{% endschema %}

 

スクリーンショット 2024-01-04 9.55.22.png

スクリーンショット 2024-01-04 9.55.38.png

成果物としては上記になります。除外したいブログ記事が複数ある場合は、","で区切ってハンドルを記述してください。

以上、参考になりましたら幸いです。

Freelance Solution Engineer | 新垣
JavaScript Liquid Theme, React Remix App
投稿は参考になりましたか?「いいね!」でお教えください。
解決しない場合、個別に対応も可能ですのでプロフィールからお気軽にメッセージください

元の投稿で解決策を見る

2件の返信2

NIIGAKI_HYUGA
Shopify Partner
54 24 15

成功

初めまして。新垣です。

 

テーマはCraftですが、サンプルコードを添付いたします。

// 変更前
{{ ‘component-article-card.css’ | asset_url | stylesheet_tag }}
{{ ‘component-card.css’ | asset_url | stylesheet_tag }}
{{ ‘section-main-blog.css’ | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- paginate blog.articles by 6 -%}
  <div class=“main-blog page-width section-{{ section.id }}-padding”>
    <h1 class=“title--primary{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}“>
      {{ blog.title | escape }}
    </h1>

    <div class=“blog-articles {% if section.settings.layout == ‘collage’ %}blog-articles--collage{% endif %}“>
      {%- for article in blog.articles -%}
        <div
          class=“blog-articles__article article{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}”
          {% if settings.animations_reveal_on_scroll %}
            data-cascade
            style=“--animation-order: {{ forloop.index }};”
          {% endif %}
        >
          {%- render ‘article-card’,
            article: article,
            media_height: section.settings.image_height,
            media_aspect_ratio: article.image.aspect_ratio,
            show_image: section.settings.show_image,
            show_date: section.settings.show_date,
            show_author: section.settings.show_author,
            show_excerpt: true
          -%}
        </div>
      {%- endfor -%}
    </div>

    {%- if paginate.pages > 1 -%}
      {%- render ‘pagination’, paginate: paginate -%}
    {%- endif -%}
  </div>
{%- endpaginate -%}

{% schema %}
{
  “name”: “t:sections.main-blog.name”,
  “tag”: “section”,
  “class”: “section”,
  “settings”: [
    {
      “type”: “header”,
      “content”: “t:sections.main-blog.settings.header.content”
    },
    {
      “type”: “select”,
      “id”: “layout”,
      “options”: [
        {
          “value”: “grid”,
          “label”: “t:sections.main-blog.settings.layout.options__1.label”
        },
        {
          “value”: “collage”,
          “label”: “t:sections.main-blog.settings.layout.options__2.label”
        }
      ],
      “default”: “collage”,
      “label”: “t:sections.main-blog.settings.layout.label”,
      “info”: “t:sections.main-blog.settings.layout.info”
    },
    {
      “type”: “checkbox”,
      “id”: “show_image”,
      “default”: true,
      “label”: “t:sections.main-blog.settings.show_image.label”
    },
    {
      “type”: “select”,
      “id”: “image_height”,
      “options”: [
        {
          “value”: “adapt”,
          “label”: “t:sections.main-blog.settings.image_height.options__1.label”
        },
        {
          “value”: “small”,
          “label”: “t:sections.main-blog.settings.image_height.options__2.label”
        },
        {
          “value”: “medium”,
          “label”: “t:sections.main-blog.settings.image_height.options__3.label”
        },
        {
          “value”: “large”,
          “label”: “t:sections.main-blog.settings.image_height.options__4.label”
        }
      ],
      “default”: “medium”,
      “label”: “t:sections.main-blog.settings.image_height.label”,
      “info”: “t:sections.main-blog.settings.image_height.info”
    },
    {
      “type”: “checkbox”,
      “id”: “show_date”,
      “default”: true,
      “label”: “t:sections.main-blog.settings.show_date.label”
    },
    {
      “type”: “checkbox”,
      “id”: “show_author”,
      “default”: false,
      “label”: “t:sections.main-blog.settings.show_author.label”
    },
    {
      “type”: “paragraph”,
      “content”: “t:sections.main-blog.settings.paragraph.content”
    },
    {
      “type”: “header”,
      “content”: “t:sections.all.padding.section_padding_heading”
    },
    {
      “type”: “range”,
      “id”: “padding_top”,
      “min”: 0,
      “max”: 100,
      “step”: 4,
      “unit”: “px”,
      “label”: “t:sections.all.padding.padding_top”,
      “default”: 36
    },
    {
      “type”: “range”,
      “id”: “padding_bottom”,
      “min”: 0,
      “max”: 100,
      “step”: 4,
      “unit”: “px”,
      “label”: “t:sections.all.padding.padding_bottom”,
      “default”: 36
    }
  ]
}
{% endschema %}


//変更後
{{ ‘component-article-card.css’ | asset_url | stylesheet_tag }}
{{ ‘component-card.css’ | asset_url | stylesheet_tag }}
{{ ‘section-main-blog.css’ | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

//カスタマイズ画面で入力した全ハンドルを取得
{% assign excluded_articles = section.settings.exclude_articles | split: ‘,’ %}

{%- paginate blog.articles by 6 -%}
  <div class=“main-blog page-width section-{{ section.id }}-padding”>
    <h1 class=“title--primary{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}“>
      {{ blog.title | escape }}
    </h1>

    <div class=“blog-articles {% if section.settings.layout == ‘collage’ %}blog-articles--collage{% endif %}“>
      {%- for article in blog.articles -%}
                 // 記事を取り込む
        {%- assign skip_article = false -%}
                 
         //カスタマイズ画面で入力した全ハンドルを処理
        {%- for exclude in excluded_articles -%}
                     //カスタマイズ画面で入力した全ハンドルを分割
          {%- assign exclude_handle = exclude -%}
                     //分割したハンドルと記事のハンドルが一致する場合
          {%- if article.handle contains exclude_handle -%}
                         //記事を取り込まない
            {%- assign skip_article = true -%}
          {%- endif -%}
        {%- endfor -%}
                  //記事を取り込む場合
        {% unless skip_article %}
          <div
            class=“blog-articles__article article{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}”
            {% if settings.animations_reveal_on_scroll %}
              data-cascade
              style=“--animation-order: {{ forloop.index }};”
            {% endif %}
          >
            {%- render ‘article-card’,
              article: article,
              media_height: section.settings.image_height,
              media_aspect_ratio: article.image.aspect_ratio,
              show_image: section.settings.show_image,
              show_date: section.settings.show_date,
              show_author: section.settings.show_author,
              show_excerpt: true
            -%}
          </div>
        {% endunless %}
      {%- endfor -%}
    </div>

    {%- if paginate.pages > 1 -%}
      {%- render ‘pagination’, paginate: paginate -%}
    {%- endif -%}
  </div>
{%- endpaginate -%}

{% schema %}
{
  “name”: “t:sections.main-blog.name”,
  “tag”: “section”,
  “class”: “section”,
  “settings”: [
    {
      “type”: “header”,
      “content”: “t:sections.main-blog.settings.header.content”
    },
    {
      “type”: “select”,
      “id”: “layout”,
      “options”: [
        {
          “value”: “grid”,
          “label”: “t:sections.main-blog.settings.layout.options__1.label”
        },
        {
          “value”: “collage”,
          “label”: “t:sections.main-blog.settings.layout.options__2.label”
        }
      ],
      “default”: “collage”,
      “label”: “t:sections.main-blog.settings.layout.label”,
      “info”: “t:sections.main-blog.settings.layout.info”
    },
    {
      “type”: “checkbox”,
      “id”: “show_image”,
      “default”: true,
      “label”: “t:sections.main-blog.settings.show_image.label”
    },
    {
      “type”: “select”,
      “id”: “image_height”,
      “options”: [
        {
          “value”: “adapt”,
          “label”: “t:sections.main-blog.settings.image_height.options__1.label”
        },
        {
          “value”: “small”,
          “label”: “t:sections.main-blog.settings.image_height.options__2.label”
        },
        {
          “value”: “medium”,
          “label”: “t:sections.main-blog.settings.image_height.options__3.label”
        },
        {
          “value”: “large”,
          “label”: “t:sections.main-blog.settings.image_height.options__4.label”
        }
      ],
      “default”: “medium”,
      “label”: “t:sections.main-blog.settings.image_height.label”,
      “info”: “t:sections.main-blog.settings.image_height.info”
    },
    {
      “type”: “checkbox”,
      “id”: “show_date”,
      “default”: true,
      “label”: “t:sections.main-blog.settings.show_date.label”
    },
    {
      “type”: “checkbox”,
      “id”: “show_author”,
      “default”: false,
      “label”: “t:sections.main-blog.settings.show_author.label”
    },
    {
      “type”: “paragraph”,
      “content”: “t:sections.main-blog.settings.paragraph.content”
    },
    //カスタマイズ画面に入力項目の作成
    {
      “type”: “text”,
      “id”: “exclude_articles”,
      “label”: “Exclude Article”
    },
    {
      “type”: “header”,
      “content”: “t:sections.all.padding.section_padding_heading”
    },
    {
      “type”: “range”,
      “id”: “padding_top”,
      “min”: 0,
      “max”: 100,
      “step”: 4,
      “unit”: “px”,
      “label”: “t:sections.all.padding.padding_top”,
      “default”: 36
    },
    {
      “type”: “range”,
      “id”: “padding_bottom”,
      “min”: 0,
      “max”: 100,
      “step”: 4,
      “unit”: “px”,
      “label”: “t:sections.all.padding.padding_bottom”,
      “default”: 36
    }
  ]
}
{% endschema %}

 

スクリーンショット 2024-01-04 9.55.22.png

スクリーンショット 2024-01-04 9.55.38.png

成果物としては上記になります。除外したいブログ記事が複数ある場合は、","で区切ってハンドルを記述してください。

以上、参考になりましたら幸いです。

Freelance Solution Engineer | 新垣
JavaScript Liquid Theme, React Remix App
投稿は参考になりましたか?「いいね!」でお教えください。
解決しない場合、個別に対応も可能ですのでプロフィールからお気軽にメッセージください
SHOKO06
遊覧客
21 0 2

ご丁寧にありがとうございます。

まだ検証できていないのですが、一旦こちらをベストソリューションにさせていただきます。

ご返信ありがとうございました。