テンプレートタグの使い方。Shopifyののカスタマイズ。テンプレートタグの使い方。Shopifyののカスタマイズ。テンプレートタグの使い方。Shopifyののカスタマイズ。Liquidとは、RubyベースのテンプレートエンジンShopifyのコードを触ってみたいが、どうやって触るんだろう?ということで、ちょっと調べてみたのですが、Liquidというのは、「Shopifyによって作成され、Rubyで書かれたテンプレート言語」のようです。言ってもちょっとプログラム出身ではないので、しっくりきませんが。Wordpressで言えば、テンプレートタグそのものがそれにあたるようですね。このテンプレートタグを使用すると、様々な複雑な処理が簡単にできるようになりそうです。言ってもタグがどのような種類があって、どのような処理や書き方をするのでしょうか?今日は、初めてなので、まずは、よく使いそうであろうものから試してみました。画像を表示する(asset_img_url)まずは、画像の表示をしてみます。assetsフォルダに画像をアップロードしておきましょう。/>のように画像タグが出力されます。リンクの設定をする基本的なHTMLリンクを生成する次は、リンクを設定してみます。テキスト・リンク先URL・title要素を設定します。Shopify">Shopify</a>と出力されます。TOPページへのリンクTOPページへのリンクを設定してみます。}}">リンクテキストや画像</a>と出力されます。ショッピングカートへのリンクショッピングカートページへのリンクを設定してみます。}}">カートをみる</a>と出力されます。サイト内の各ページへのリンクを貼るためのタグは他にも色々あるようなので、また後日紹介していきたいと思います。CSSを読み込む(asset_url)次に、CSSファイルを読み込んでみましょう。}}とするとCSSが読み込まれますので、任意のファイル名に書き換えて使用します。/>Javascriptを読み込む。type="text/javascript"></script>のようになります。liquidファイルをインクルードする下記のような記述をすると、任意のliquidファイルをインクルードすることができます。%}と記述すると、インクルードされます。%}と記述することで、インクルード可能になります。まとめ取り急ぎ、初めの一歩という感じのタグを紹介させていただきました。慣れてきたら、色々な処理方法を紹介していきたいと思います。下記は、ShopifyのLiquidのチートシートになりますので、気になる方は参考にしてみてください。KEiSoN★Shopifyでコレクションページの商品一覧の行数・列数の設定変更をする。Shopifyでまずは管理画面上からTOPページデザインをカスタマイズ。WEB制作についてのご相談はお気軽にどうぞ。WEBデザイン制作、ブランディング、Wordpress構築・カスタマイズ、WEBサイトに関するお見積もり・不明点やご相談等、お気軽にお問い合わせください。クリエイティブディレクター/フルスタックwebデザイナー2009年1月よりフリーランスのディレクター/フルスタックWebデザイナーとして活動しながら、ノマドな働き方を試み始める。過去16カ国ほど訪れ、一眼レフにその景色を収めながら時々ドローンも飛ばす。2015年11月にスカイゴールド株式会社として法人化。タイ・バンコクを年間4,5回ほど往復しながら活動中。Wordpressを使用したオリジナルデザイン制作・オウンドメディア構築を得意とする。国内外の様々な価値観・デザインに接触することで幅広いクリエイティブや臨機応変にアイデアを提供する。最近は、Shopify制作の勉強も行なっている。textの便利機能を紹介したいと思います。新しいロゴデザインが完成しました。...16.01.20wordpressのデータベースのテーブル一覧メモ。...16.01.26カスタム投稿タイプのwp-pagenaviの2ページ目以降が404になってしまうときの対処法メモ。【Shopify】無料テーマ[Debut]をカスタマイズしてみよう。プロの現場のWEBデザイン制作の流れについて動画で説明します。明るさ・コントラスト)パタヤで撮影したα6600の作例をアップしました。viewswordpressの固定ページ等に、basic認証をかける方法。Formで、郵便番号入力時の自動住所入力を設置する。viewsInstagramの投稿をwordpressプラグインを使用して、webサイトに写真ギャラリーを設置する。me.どうぞお気軽にお問い合わせください。