こんな方におすすめ
- Shopifyでテーマカスタマイズしたい人
- Shopifyでブログを書きたい人
- Shopifyでブログを独自のデザインにしたい人
はじめに
Shopifyオリジナルテーマを作成しよう、の第11回は「ブログの作成」です。
下の画像のようなページを作成します。


今回の学習を通して学べることは主に以下の3つです。
- ブログの追加方法
- ブログ一覧ページの作成方法
- 記事ページの作成方法
今回のコードは下記リンクにまとめてあるので参考にしてみてください。(branch:no11)
また、今回のテーマのもとのhtmlは第1回の記事に公開してあるので、そちらからダウンロードをお願いします。
ブログを追加しよう
それではさっそくブログを追加していきます。
オンラインストア→ブログ記事
で「ブログ記事を作成する」をクリックしてください。

記事を追加しよう
まず、タイトル、コンテンツ、サムネイルを挿入してください。
また、初期で「非公開」となっているので、「公開」に変更してください。

続いて、下の方に行き、「ブログ」の部分を
「ニュース」から「新しいブログを作成する」に変更してください。
そして、そのタイトルを「BLOG」としてください。
Shopifyでは簡単にブログの種類を複数作ることができる、ということです。
(wordPressでいう「カスタム投稿タイプ」にあたります)
続いて、タグに「news」を記載して「+追加」ボタンを押してください。
こうすることでタグを追加できます。

そしたら保存してください。
このような感じで5つほど記事を追加しました。
タグは「news」「company」「sale」
の3つを作成しました。

メニューにブログを追加しよう
続いて、ブログ一覧ページにアクセスできるよう、ヘッダーのメニューにブログを追加します。
「メニュー」の「メインメニュー」に進んでください

他のメニューを追加したときと同様、メニューを追加します。

一覧ページが表示できました。

ブログ一覧ページを作成しよう
上の画像では非常に見づらいので、デザインを整えていきましょう。
デフォルトテンプレートの解説
まずはいつも通りデフォルトテンプレートの解説です。
ブログ一覧ページはtemplatesフォルダの「blog.liquid」で編集できます。
{% paginate blog.articles by 5 %}
<h1>{{ blog.title }}</h1>
{% for article in blog.articles %}
<div>
<h2><a href="{{ article.url }}">{{ article.title }}</a></h2>
{{ article.author }} @ {{ article.created_at }}
<div>
{% if article.excerpt.size > 0 %}
{{ article.excerpt }}
{% else %}
<p>{{ article.content | strip_html | truncatewords: 100 }}</p>
{% endif %}
</div>
</div>
{% endfor %}
{% if paginate.pages > 1 %}
{{ paginate | default_pagination }}
{% endif %}
{% endpaginate %}
上から解説していきます。
- {% paginate blog.articles by 5 %}・・・コレクションの時と同様、paginateで1ページに表示できる記事の数を指定する
- {{ blog.title }}・・・ブログのタイトル。この場合は「BLOG」が入る
- {% for article in blog.articles %}・・・「blog.articles」で記事を取り出すことができる
- {{ article.author }}・・・記事の著者
- {{ article.created_at }}・・・作成日
- {% if article.excerpt.size > 0 %} {{ article.excerpt }}・・・記事の抜粋に何か記載されていたらその部分を表示(下記画像参考)

- { article.content | strip_html | truncatewords: 100 }}・・・記事のコンテンツを表示。
「truncatewords: 100」で100文字まで表示
「strip_html」でHTMLタグを除いた文章を表示(<strong>などで記載されていても無視される) - {% if paginate.pages > 1 %}・・・コレクションの時と同じ、次のページなどに行くためのボタン
以上で解説を終わります。
独自デザインに修正
続いて、デフォルトの機能を残したまま、デザインを変更します。
blog.liquidを下記コードに変更してください。
{% section 'blog-header' %}
{% render 'breadcrumbs' %}
<div class="main">
<div class="container">
<div class="row">
<div class="col-9">
<div class="list-group mb-5">
{% paginate blog.articles by 3 %}
{% for article in blog.articles %}
<a href="{{ article.url }}" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100">
<img src="{{article.image.src | img_url: '1920x'}}" alt="" class="img-thumbnail cover_img" width="150px"
height="150px">
<div class="ml-3">
<h5 class="mb-1">{{ article.title }}</h5>
<div class="d-flex mb-1">
<small class="text-muted mr-2">{{ article.created_at }}</small>
<small class="text-muted mr-2">{{ article.author }}</small>
</div>
<div class="d-flex mb-1">
{% for tag in article.tags %}
<small class="text-muted mr-2">{{tag}}</small>
{% endfor %}
</div>
<p class="mb-1">
{% if article.excerpt.size > 0 %}
{{ article.excerpt }}
{% else %}
{{ article.content | strip_html | truncatewords: 100 }}
{% endif %}
</p>
</div>
</div>
</a>
{% endfor%}
</div>
{% if paginate.pages > 1 %}
<nav aria-label="Page navigation example" class="pagination_nav">
{{ paginate | default_pagination: next: '»', previous: '«' }}
</nav>
{% endif %}
{% endpaginate%}
</div>
<div class="col-3">
<h5>カテゴリー</h5>
<ul>
{% for tag in blog.all_tags %}
<li class="mb-1"><a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a></li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
新しく加わった部分を解説します。
サイドバーにタグの一覧表示をしたかったため、下記コードを作成しました。
<div class="col-3">
<h5>カテゴリー</h5>
<ul>
{% for tag in blog.all_tags %}
<li class="mb-1"><a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a></li>
{% endfor %}
</ul>
</div>
「blog.all_tags」でブログのタグを全て取ってこれるため、これを1つずつ取り出しています。
また、「blog-header.liquid」をsectionsフォルダに追加し、下記コードを貼り付けてください。
<div class="subpage_bg_img d-flex justify-content-center align-items-center" style="background-image: url('{{section.settings.blog_header_image | img_url: '1920x'}}');">
<h2 class="f36">BLOG</h2>
</div>
{% schema %}
{
"name":"Blog Header Image",
"settings":[
{
"type":"image_picker",
"id":"blog_header_image",
"label":"Blog Header Image"
}
]
}
{% endschema %}
内容は今までの「xxx-header.liquid」と変わりませんので解説は省略します。
表示することができました。

記事ページを作成しよう
続いて個別の記事のページを作成します。
デフォルトテンプレートの解説
まずはデフォルトテンプレートの解説です。
記事は「article.liquid」で修正できます。
{% assign number_of_comments = article.comments_count %}
{% if comment and comment.created_at %}
{% assign number_of_comments = article.comments_count %}
{% endif %}
<h1>{{ article.title }}</h1>
{% capture author %}<strong>{{ article.author }}</strong>{% endcapture %}
{% capture date %}<time datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: format: 'month_day_year' }}</time>{% endcapture %}
{{ article.author }} @ {{ article.created_at }}
<div>{{ article.content }}</div>
{% if blog.comments_enabled? %}
<h2>{{ number_of_comments }} comments</h2>
{% paginate article.comments by 5 %}
{% for comment in article.comments %}
<div>
<div>{{ comment.content }}</div>
{{ comment.author }} @ {{ comment.created_at }}
</div>
{% endfor %}
{% if paginate.pages > 1 %}
{{ paginate | default_pagination }}
{% endif %}
{% endpaginate %}
<div>
{% form 'new_comment', article %}
{{ form.errors | default_errors }}
<label for="CommentAuthor">name</label>
<input type="text" name="comment[author]" id="CommentAuthor" placeholder="name" value="{{ form.author }}" autocapitalize="words">
<label for="CommentEmail">email</label>
<input type="email" name="comment[email]" id="CommentEmail" placeholder="email" value="{{ form.email }}" autocorrect="off" autocapitalize="off">
<label for="CommentBody">message</label>
<textarea name="comment[body]" id="CommentBody" placeholder="message">{{ form.body }}</textarea>
<input type="submit" value="post">
{% endform %}
</div>
{% endif %}
上から解説をしていきます。
まず、下記コードなのですが、
すみません...なぜif文の中で同じ変数を定義しているかわかりません...
(分かり次第解説します)
{% assign number_of_comments = article.comments_count %}
{% if comment and comment.created_at %}
{% assign number_of_comments = article.comments_count %}
{% endif %}
続いてcaptureについてです
{% capture author %}<strong>{{ article.author }}</strong>{% endcapture %}
{% capture date %}<time datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: format: 'month_day_year' }}</time>{% endcapture %}
{% capture 変数名 %}{% endcapture %}
で囲ったところは
{{ 変数名 }}
で呼び出すことが可能になります。
関数みたいなものですね。
この場合、今後{{ author }} で著者が、{{ time }}で公開日が表示できるようになります。
続いてコメントです。
コメントは「ブログ記事」→「ブログを管理する」→ブログ選択→コメント
で管理できます。


今回は勉強も兼ねて、コメントの「コメントが許可され、自動で公開されます」を選択し、保存しましょう。
それではコードに戻ります。
{% if blog.comments_enabled? %}
blog.comments_enabled?で、コメントが許可されている場合のみ表示可能になります。
- {{ number_of_comments }}・・・コメントの数(一番上で定義したもの)
- {% for comment in article.comments %}・・・1つずつコメントを取り出す
- {{ comment.content }}・・・コメントの内容
- {{ comment.author }}・・・コメント著者
- {{ comment.created_at }}・・・コメント作成日時
{% form 'new_comment', article %}
{{ form.errors | default_errors }}
<label for="CommentAuthor">name</label>
<input type="text" name="comment[author]" id="CommentAuthor" placeholder="name" value="{{ form.author }}" autocapitalize="words">
<label for="CommentEmail">email</label>
<input type="email" name="comment[email]" id="CommentEmail" placeholder="email" value="{{ form.email }}" autocorrect="off" autocapitalize="off">
<label for="CommentBody">message</label>
<textarea name="comment[body]" id="CommentBody" placeholder="message">{{ form.body }}</textarea>
<input type="submit" value="post">
{% endform %}
このコードについてですが、お問い合わせフォームのときとほとんど変わらないため、解説は省略します。
独自デザインに修正
では、デフォルトの機能を残したままデザインを変更していきましょう。
ただし、今回はコメントは使いません。
article.liquidを下記コードに書き換えてください。
<div class="subpage_bg_img d-flex justify-content-center align-items-center"
style="background-image: url('{% if article.image %}{{article.image.src | img_url: '1920x'}}{% else %}何らかのURL{% endif %}');">
</div>
{% render 'breadcrumbs' %}
<div class="main">
<div class="container">
<div class="row">
<div class="col-9">
<h2 class="text-center f36 mb-3">{{article.title}}</h2>
<div class="d-flex mb-1">
<small class="text-muted mr-2">{{ article.created_at}}</small>
<small class="text-muted mr-2">{{ article.author}}</small>
</div>
<div class="d-flex mb-1">
{% for tag in article.tags %}
<small class="text-muted mr-2">{{tag}}</small>
{% endfor %}
</div>
<div class="mt-5 mb-5">
<p>{{ article.content }}</p>
</div>
<p><a href="{{blog.url}}"><i class="fas fa-arrow-left mr-1"></i>一覧へ戻る</a></p>
</div>
<div class="col-3">
<h5>カテゴリー</h5>
<ul>
{% for tag in blog.all_tags %}
<li class="mb-1"><a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a></li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
新しく覚える部分は特にありません。
ヘッダー部分は、コレクションの時と同様、サムネイル画像がある記事とない記事があるため、ある場合はサムネイル画像を、内場合は指定した画像を表示します。
画像の追加方法はコレクションページを作成したときのものを参考にしてみてください。

表示することができました。
まとめ
今回は以下の3つを学習しました。
- ブログの追加方法
- ブログ一覧ページの作成方法
- 記事ページの作成方法
今回のコードは下記リンクにまとめてあるので参考にしてみてください。(branch:no11)
なお、質問や要望がありましたら、お問い合わせフォームまたはコメント欄によろしくお願いします。
次回はいよいよ最終回、ログイン機能とその他のページを作成していきます。
参考文献
capture
https://shopify.github.io/liquid/tags/variable/
strip_html
https://shopify.github.io/liquid/filters/strip_html/
ブログの情報取得
https://shopify.dev/docs/themes/liquid/reference/objects/blog
blog.liquidの概要
https://shopify.dev/docs/themes/theme-templates/blog-liquid
個別記事の情報取得
https://shopify.dev/docs/themes/liquid/reference/objects/article
article.liquidの概要
https://shopify.dev/docs/themes/theme-templates/article-liquid
ページ一覧
全体像の確認
https://agata-code.com/programming/original-no1/
開発環境のセット
https://agata-code.com/programming/original-no2/
ヘッダーの作成
https://agata-code.com/programming/original-no3/
フッターの作成
https://agata-code.com/programming/original-no4/
トップページの作成
https://agata-code.com/programming/original-no5/
Aboutページの作成
https://agata-code.com/programming/original-no6/
お問い合わせフォームの作成
https://agata-code.com/programming/original-no7/
コレクションページの作成
https://agata-code.com/programming/original-no8/
個別商品ページの作成
https://agata-code.com/programming/original-no9/
カートページの作成
https://agata-code.com/programming/original-no10/
ブログの作成
https://agata-code.com/programming/original-no11/
ログイン機能の実施