| shopifyのフッターでliquidにるカスタマイズした例文コードを複数作成 |
| このコードは、ShopifyテンプレートのHTML部分に記述する必要があります。具体的には、「template/snippets」または「template/sections」フォルダ内の「theme.liquid」または別のテンプレートファイルに記述することができます。
ファイルのどの場所か具体的に例をあげますと
このコードは、フッターセクションに表示され、現在の年とShopifyストアの名前を表示します。 |
1.Copyright information:
このコードは、フッターにサイトのコピーライト情報を表示するものです。<div class="copyright">タグは、表示するブロックを囲むために使用されます。
<div class="copyright"> の部分」は HTML の div 要素に設定された "copyright"
クラスです。この div 要素は、フッター内に配置され、サイトのコピーライト情報を表示するために使用されます。「<div class="copyright">」という記述方法は、HTML
の div 要素を使って要素を囲むというものです。また、「class="copyright"」は、この div 要素に「copyright」というクラスを割り当てるというものです。このクラスは、CSS
でのスタイル定義に使用され、サイトのフッター内のコピーライト情報を特定するために使用されます。
また、{{ 'now' | date: '%Y' }}は、現在の年を表示します。そして、©はコピーライトマークを表示します。最後に、{{
shop.name }}は、Shopifyストアの名前を表示します。
| <div class="copyright"> {{ 'now' | date: '%Y' }} © {{ shop.name }} </div> |
2.Contact information with links:
このコードは、フッターにサイトのコンタクト情報（Eメールと電話番号）を表示するものです。<div class="contact-info">タグは、表示するブロックを囲むために使用されます。<p>Contact us:</p>は、「お問い合わせ」という文字を表示します。
「 <p>Contact us:</p> 部分」は HTML の p 要素です。この p 要素は、段落を表すものです。「<p>Contact us:</p>」という記述方法は、「Contact us:」というテキストを段落として囲むというものです。
この p 要素を使って "Contact us:" というテキストをフッター内に配置することで、サイトのユーザーが連絡するための情報を表示することができます。このテキストをクリックすると、サイトのユーザーが連絡先情報を入手することができます。これにより、サイトのユーザーはサイトの運営者とコミュニケーションを取ることができます。
また、<a href="mailto:{{ shop.email }}">{{ shop.email }}</a>と<a
href="tel:{{ shop.phone }}">{{ shop.phone }}</a>は、Eメールと電話番号のリンクを表示します。mailto:とtel:は、Eメールと電話アプリを起動するために使用されます。
| <div class="contact-info"> <p>Contact us:</p> <a href="mailto:{{ shop.email }}">{{ shop.email }}</a> <a href="tel:{{ shop.phone }}">{{ shop.phone }}</a> </div> |
下記のコードでは、3番の例文に Instagram アカウントへのリンクを追加するために「<a href="https://www.instagram.com/your_instagram_account">Instagram</a>」という記述方法を使用しました。また、Facebook アカウントへのリンクを追加するために「<a href="https://www.facebook.com/your_facebook_account">Facebook</a>」という記述方法も使用しました。
このように、「<a>」タグを使用することで、Webページ内に他のWebページへのリンクを追加することができます。
| <div class="copyright"> <p>Copyright {{ "now" | date: "%Y" }} {{ shop.name }}</p> <p>Contact us:</p> <a href="{{ shop.email }}">{{ shop.email }}</a> <p>Follow us on:</p> <a href="https://www.instagram.com/your_instagram_account">Instagram</a> <a href="https://www.facebook.com/your_facebook_account">Facebook</a> </div> |
3.Site navigation links:
このコードは、フッターにサイトのナビゲーションリンクを表示するものです。<div class="site-nav">タグは、表示するブロックを囲むために使用されます。{%
for link in
「{% for link in linklists.footer.links %}」は、「linklists.footer.links」という配列（リスト）から1つ1つの要素（リンク）を取り出して、処理を繰り返すための「for文」のようなものです。
「link」というのは、「linklists.footer.links」から取り出された要素（リンク）を一時的に格納する変数です。
「<a href="{{ link.url }}">{{ link.title }}</a>」は、「link」に格納された要素（リンク）の情報を使ってHTMLのaタグ（リンク）を生成しています。「link.url」はリンク先のURL、「link.title」はリンクのタイトルとなります。
「{% endfor %}」は「for文」の終了を表しています。
linklists.footer.links %}といった構文は、footerリンクリストからリンクを取得することを意味します。また、<a
href="{{ link.url }}">{{ link.title }}</a>は、リンクのURLとタイトルを表示するものです。
| <div class="site-nav"> {% for link in linklists.footer.links %} <a href="{{ link.url }}">{{ link.title }}</a> {% endfor %} </div> |
4.Payment method icons:
このコードは、フッターにサイトの支払い方法のアイコンを表示するものです。<div class="payment-icons">タグは、表示するブロックを囲むために使用されます。{% for payment in shop.enabled_payment_types %}といった構文は、Shopifyストアで有効な支払い方法の一覧を取得することを意味します。また、{% if payment == 'visa' %}といった構文は、VISAが有効な支払い方法である場合にのみ、VISAのアイコンを表示することを意味します。
| <div class="payment-icons"> {% for payment in shop.enabled_payment_types %} {% if payment == 'visa' %} <i class="fa fa-cc-visa"></i> {% endif %} {% if payment == 'master' %} <i class="fa fa-cc-mastercard"></i> {% endif %} {% if payment == 'american_express' %} <i class="fa fa-cc-amex"></i> {% endif %} <!-- Add more payment types here --> {% endfor %} </div> |
| これらのページは私がテーマとしている技術を独自に追及しているサイトになりますので、ページ内に書かれている技術と考えをご使用になる場合は当方では一斉責任を負えませんので自己責任でご使用くださいますようお願いいたします。 |