Shopifyでオリジナルテーマを作成しよう～No.11[ブログの作成]～

こんな方におすすめ

Shopifyでテーマカスタマイズしたい人
Shopifyでブログを書きたい人
Shopifyでブログを独自のデザインにしたい人

はじめに

Shopifyオリジナルテーマを作成しよう、の第11回は「ブログの作成」です。

下の画像のようなページを作成します。

今回の学習を通して学べることは主に以下の3つです。

ブログの追加方法
ブログ一覧ページの作成方法
記事ページの作成方法

今回のコードは下記リンクにまとめてあるので参考にしてみてください。（branch：no11）

https://github.com/masa-ino/shopify-training/tree/no11

また、今回のテーマのもとのhtmlは第１回の記事に公開してあるので、そちらからダウンロードをお願いします。

https://agata-code.com/programming/original-no1/

ブログを追加しよう

それではさっそくブログを追加していきます。

オンラインストア→ブログ記事
で「ブログ記事を作成する」をクリックしてください。

記事を追加しよう

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

続いて、下の方に行き、「ブログ」の部分を
「ニュース」から「新しいブログを作成する」に変更してください。
そして、そのタイトルを「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>

新しく覚える部分は特にありません。

ヘッダー部分は、コレクションの時と同様、サムネイル画像がある記事とない記事があるため、ある場合はサムネイル画像を、内場合は指定した画像を表示します。
画像の追加方法はコレクションページを作成したときのものを参考にしてみてください。