FROM CACHE - jp_header
解決済

Debutのスライドショーの画像に直接リンクをつけたい

SLDO
観光客
7 0 4

Debutの標準装備のスライダーを、画像を直接クリックしてリンクに飛ばせるようにしたいです。

デフォルトだとボタンを設置しないとリンクに飛ばせない仕組みになっているので、非常に困っています。

セクションのliquidにどのような記述をすればブロックとして追加できますか?

1 件の受理された解決策

株式会社ナレッジサービス
Shopify Partner
38 15 20

成功

管理画面にログインして、「アクション」→「コードの編集」と進み、Sectionsフォルダ内のslideshow.liquidファイルを選択してください。

 

  "zh-TW": "圖片"
 }
},
{
"type": "select",

上記のコードを探して、次のように変更します。

 

  "zh-TW": "圖片"
 }
},
{
 "type": "url",
 "id": "image_url",
 "label": "URLを入力"
},
{
"type": "select",

 

次に、下記のコードを探します。

<div
  {% unless block_image.alt == blank %}
  role="img"
  aria-label="{{ block_image.alt | escape }}"
  data-alt="{{ block_image.alt | escape }}"
  {% endunless %}
  class="slideshow__image box ratio-container lazyload{% unless forloop.first %} lazypreload{% endunless %} js"
  data-bg="{{ block_image | img_url: '300x300' }}"
  data-bgset="{% include 'bgset', image: block_image %}"
  data-sizes="auto"
  data-parent-fit="contain"
  style="background-position: {{ block.settings.alignment }};"
  data-image-loading-animation>
{% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
</div>

 

上記のコードを、次のように書き換えたら「保存」をクリックします。

 <a href="{{ block.settings.image_url }}">
  <div
      {% unless block_image.alt == blank %}
      role="img"
      aria-label="{{ block_image.alt | escape }}"
      data-alt="{{ block_image.alt | escape }}"
      {% endunless %}
      class="slideshow__image box ratio-container lazyload{% unless forloop.first %} lazypreload{% endunless %} js"
      data-bg="{{ block_image | img_url: '300x300' }}"
      data-bgset="{% include 'bgset', image: block_image %}"
      data-sizes="auto"
      data-parent-fit="contain"
      style="background-position: {{ block.settings.alignment }};"
      data-image-loading-animation>
    {% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
  </div>
</a>

 

これで「画像スライド」の設定項目にURLの入力欄が追加されていると思います。

 

※コード編集の経験がない場合は、専門の業者に依頼されることをお勧めします。

 

 

元の投稿で解決策を見る

2件の返信2

株式会社ナレッジサービス
Shopify Partner
38 15 20

成功

管理画面にログインして、「アクション」→「コードの編集」と進み、Sectionsフォルダ内のslideshow.liquidファイルを選択してください。

 

  "zh-TW": "圖片"
 }
},
{
"type": "select",

上記のコードを探して、次のように変更します。

 

  "zh-TW": "圖片"
 }
},
{
 "type": "url",
 "id": "image_url",
 "label": "URLを入力"
},
{
"type": "select",

 

次に、下記のコードを探します。

<div
  {% unless block_image.alt == blank %}
  role="img"
  aria-label="{{ block_image.alt | escape }}"
  data-alt="{{ block_image.alt | escape }}"
  {% endunless %}
  class="slideshow__image box ratio-container lazyload{% unless forloop.first %} lazypreload{% endunless %} js"
  data-bg="{{ block_image | img_url: '300x300' }}"
  data-bgset="{% include 'bgset', image: block_image %}"
  data-sizes="auto"
  data-parent-fit="contain"
  style="background-position: {{ block.settings.alignment }};"
  data-image-loading-animation>
{% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
</div>

 

上記のコードを、次のように書き換えたら「保存」をクリックします。

 <a href="{{ block.settings.image_url }}">
  <div
      {% unless block_image.alt == blank %}
      role="img"
      aria-label="{{ block_image.alt | escape }}"
      data-alt="{{ block_image.alt | escape }}"
      {% endunless %}
      class="slideshow__image box ratio-container lazyload{% unless forloop.first %} lazypreload{% endunless %} js"
      data-bg="{{ block_image | img_url: '300x300' }}"
      data-bgset="{% include 'bgset', image: block_image %}"
      data-sizes="auto"
      data-parent-fit="contain"
      style="background-position: {{ block.settings.alignment }};"
      data-image-loading-animation>
    {% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
  </div>
</a>

 

これで「画像スライド」の設定項目にURLの入力欄が追加されていると思います。

 

※コード編集の経験がない場合は、専門の業者に依頼されることをお勧めします。

 

 

COLA-KUN
Shopify Partner
20 0 4

質問失礼いたします。

テーマDawnでも同様の編集は可能でしょうか?

ご教授いただけますと幸いです。