Snsアイコンをヘッダーに表示したい

日本語 ディスカッション 技術的なQ＆A
1

「Debut」テーマを使用しています。

カスタマイズ→テーマ設定→sns

上記で設定した項目はfooterで表示されますが、

それをheader内のメインメニューにも表示したいです。

footer内のsnsアイコン出力コード（と思われる）箇所を

header内に記載したのですが表示されません。

——————————————————————

【コード】

{%- assign socials = “Facebook Twitter Pinterest Instagram Tumblr Snapchat YouTube Vimeo” | split: ’ ’ -%}

{%- if social_icons -%}

    {%- for social in socials -%}

    {%- assign social_link = social | prepend: ‘social_’ | append: ‘_link’ | downcase -%}

    {%- assign icon_link = social | prepend: ‘icon-’ | downcase -%}

    {%- if settings[social_link] != blank -%}

  • {%- include icon_link -%}

    {{ social }}

    • {%- endif -%}

    {%- endfor -%}

    {%- if request.page_type == ‘blog’ or request.page_type == ‘article’ -%}

  • {% include ‘icon-rss’ %}

    RSS

    • {%- endif -%}

{%- else -%}

{%- endif -%}

——————————————————————

↑こちらのコードを記載しました。

同じコードをfooterにも記載したところ

きちんとsnsアイコンが表示されますが、

headerには表示されません。

【やりたいこと】

カスタマイズ→テーマ設定→sns

上記で設定したsnsリンクアイコンをヘッダー内メインメニューに出力したい

ご教示いただきたくよろしくお願い致します。

2

頂いているコードの3行目 {%- if social_icons -%} の部分がheader.liquid内に記述のない条件分岐のため、その中に記載をされている内容が出力をされていない状況かと思います。

SNSを表示するために必要な部分のみを抜粋すると、以下のようなコードになります。

{%- assign socials = "Facebook Twitter Pinterest Instagram Tumblr Snapchat YouTube Vimeo" | split: ' ' -%}

  {%- for social in socials -%}
    {%- assign social_link = social | prepend: 'social_' | append: '_link' | downcase -%}
    {%- assign icon_link = social | prepend: 'icon-' | downcase -%}
    {%- if settings[social_link] != blank -%}
      - {%- include icon_link -%}
            {{ social }}
        
      
    {%- endif -%}
  {%- endfor -%}

デフォルトのDebutテーマの「header.liquid」内に上記コードを追加したところ、アイコンが表示されることを確認いたしました。

サーチやアカウントのアイコンと並べて表示する場合、112行目 div class=“site-header__icons-wrapper”の下辺りに追加いただくと良いかと思います。（デザインは適宜CSSで調整ください）

ご参考になりましたら幸いです。

1 Like
3

返信が大変遅くなり申し訳ありません！

ご教示いただいた内容で記載したところ無事表示できました。

希望通りの実装ができて感動しております。

ありがとうございました！