カスタマイズ画面でGUIを使って固定ブログの位置を調節できる方法を解説します。完成形はこんな感じです。
無料テーマの一つSimpleを例に解説しますが、他のテーマでもほとんど同じようにカスタマイズできると思います。
ブログ記事一覧の列数・行数設定方法やタグを表示する方法はこちらから。
固定記事の情報を取得
固定記事判定用のタグを追加
どの記事が固定記事かを判定するために、固定ブログ記事用のタグを固定記事に追加します。私はfixというタグを固定ブログ記事用のタグとします。もちろん固定記事用のタグとしてfix以外を指定しても構いませんが、通常の記事のタグと被らないようにする必要があります。
オンラインストア > ブログ記事 > 固定したい記事 > タグ
からタグを追加できます。
固定記事とそのインデックスを取得
前節で追加した固定記事用のタグを目印に固定記事とそのインデックスを取得します。
sections/featured-blog.liquidを編集していきます。32行目あたりの{% unless blog.articles_count == 0 %}の上に次のコード(2~19行目まで)を追加します。
コードが何をやっているのが気になる人のために説明します。とにかく実装したいという人は読み飛ばしてください。
1行目は変数fixed_tag_nameに前節で追加した固定記事用のタグを代入してします。
3行目の変数fixed_article_desired_indexは固定記事を表示する位置です。位置というのは、ブログ記事一覧において上に行くほど、左に行くほどインデックスが小さくなるとした場合の位置です。例えば左上に表示する場合は1、その一つ右に表示する場合は2とします。
その下のコードではセクションで設定したブログ記事をfor文で回して、タグにfixed_tag_nameを持っている記事のインデックスを取得し、fixed_article_indexにその値を代入しています。7行目では固定記事をfixed_articleという変数に代入してします。
{% endfor %}の下のif文ではブログ記事の表示数を改めて計算しています。
{% comment %} @@@@@@@@@@ ここから @@@@@@@@@@ {% endcomment %}
{% assign fixed_tag_name = 'fix' %}
{% assign fixed_article_desired_index = 1 %}
{% for article in blog.articles %}
{% for tag in article.tags %}
{% if tag == fixed_tag_name %}
{% assign fixed_article = article %}
{% break %}
{% endif %}
{% endfor %}
{% if fixed_article %}
{% assign fixed_article_index = forloop.index %}
{% break %}
{% endif %}
{% endfor %}
{% if fixed_article_index > post_limit %}
{% assign post_limit = post_limit | minus: 1 %}
{% endif %}
{% comment %} @@@@@@@@@@ ここまでを追加 @@@@@@@@@@ {% endcomment %}
{% unless blog.articles_count == 0 %}出力する位置を計算
先ほど追加したコードのすぐ下に以下のコードを追加してください。
ここでは、固定記事を何番目表示するかを計算してその値をfixed_article_output_indexに代入しています。固定記事の現在のインデックスが、固定記事を表示したい位置のインデックスより小さい場合、表示する位置を1プラスしています。こうすることで固定記事を所望の位置に表示することでが出来ます。
{% assign fixed_article_output_index = fixed_article_desired_index %}
{% if fixed_article_desired_index > fixed_article_index %}
{% assign fixed_article_output_index = fixed_article_desired_index | plus: 1 %}
{% endif %}固定記事を所望の位置に表示
今まで取得した固定記事の情報を基に固定記事を所望の位置に表示します。
貼り付ける位置は先ほどのunlessタグの中の、gridとgrid–uniformクラスを持つdiv開始タグの直下です。
ここではforloop.indexでfor文のループ回数を取得し、それがfixed_article_output_index、固定記事を表示したい表示位置、と同じときに固定記事を出力しています。
{% unless blog.articles_count == 0 %}
<div class="grid grid--uniform">
{% comment %} @@@@@@@@@@ ここから @@@@@@@@@@ {% endcomment %}
{% if fixed_article_index == fixed_article_desired_index %}
{% elsif forloop.index == fixed_article_output_index %}
<div class="grid__item {{ width }} slide-up-animation animated">
<div class="featured-blog__post">
{% if section.settings.blog_show_image %}
{% unless fixed_article.image == blank %}
<a class="fixed_article__featured-link" href="{{ fixed_article.url }}">
<noscript>
{{ fixed_article.image | img_url: '1024x1024' | img_tag: fixed_article.title | escape }}
</noscript>
<div class="article__featured-image-wrapper" style="padding-top:{{ 1 | divided_by: fixed_article.image.aspect_ratio | times: 100}}%;">
{% assign img_url = fixed_article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="article__featured-image lazyload"
src="{{ fixed_article.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[310, 360, 480, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ fixed_article.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ fixed_article.title | escape }}">
</div>
</a>
{% endunless %}
{% endif %}
{% unless section.settings.col_limit == 1 and section.settings.blog_show_image %}
{% include 'featured-blog', article: fixed_article %}
{% endunless %}
</div>
</div>
{% elsif forloop.index == fixed_article_index %}
{% continue %}
{% endif %}
{% comment %} @@@@@@@@@@ ここまでを追加 @@@@@@@@@@ {% endcomment %}
固定位置調節用のGUIを追加
今は固定記事を表示する位置を固定の値としてfixed_article_desired_indexに代入しています。カスタマイズ画面のGUIから調節できるようにするため、sections/featured-blog.liquidの下部にある{% schema %}タグ内にGUIの設定情報を追加し、その設定値をfixed_article_desired_indexに代入するようにします。
sections/featured-blog.liquid内で、下のコードの1~31行目と同じところを探し出し、その下に32~62行目までをコピーして貼り付けてください。
min、max、step、defaultの値は1以上の自然数なら好きな値にして大丈夫です(たいていの場合)。それぞれの意味は次の通りです。
| 説明 | |
| min | 表示位置の最小値 |
| max | 表示位置の最大値 |
| step | 位置を変更するときの幅(例えば2だと1->3->5と変わる) |
| default | 表示位置のデフォルト値 |
{
"type": "range",
"id": "post_limit",
"label": {
"cs": "Příspěvky",
"da": "Opslag",
"de": "Posts",
"en": "Posts",
"es": "publicaciones",
"fi": "Julkaisut",
"fr": "Articles",
"it": "Articoli",
"ja": "投稿",
"ko": "게시물",
"nb": "Innlegg",
"nl": "Berichten",
"pl": "Posty",
"pt-BR": "posts",
"pt-PT": "Publicações",
"sv": "Inlägg",
"th": "โพสต์",
"tr": "Gönderiler",
"vi": "Bài viết",
"zh-CN": "发布",
"zh-TW": "貼文"
},
"min": 1,
"max": 3,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "fixed_blog_index",
"label": {
"cs": "Příspěvky",
"da": "Opslag",
"de": "Posts",
"en": "Posts",
"es": "publicaciones",
"fi": "Julkaisut",
"fr": "Articles",
"it": "Articoli",
"ja": "固定ブログの位置",
"ko": "게시물",
"nb": "Innlegg",
"nl": "Berichten",
"pl": "Posty",
"pt-BR": "posts",
"pt-PT": "Publicações",
"sv": "Inlägg",
"th": "โพสต์",
"tr": "Gönderiler",
"vi": "Bài viết",
"zh-CN": "发布",
"zh-TW": "貼文"
},
"min": 1,
"max": 10,
"step": 1,
"default": 1
},最後にGUIの設定を反映させます。 「固定記事とそのインデックスを取得」で追加したコードでfixed_article_desired_indexに代入している箇所を次のように変更します。
{% assign fixed_article_desired_index = 1 %}
{% comment %} 変更前 ↑ {% endcomment %}
{% comment %} 変更後 ↓ {% endcomment %}
{% assign fixed_article_desired_index = section.settings.fixed_blog_index %}ここまでできればカスタマイズ画面のGUIで固定記事の位置を調節することが出来ます。下のGIFと見た目が少し違っているかもしれませんが、気にしなくても大丈夫です。もし同じようなカスタマイズしたい場合はこちらを参考にしてください。
記事ページで固定記事用タグを非表示にする
固定記事をクリックして記事の個別ページに飛ぶと、固定記事用のタグが表示されています。
固定記事用タグを非表示にるために、sections/article-template.liquidの46~55行目を編集します。
fixed_tag_nameには固定記事用のタグを代入してください。私は固定記事用のタグをfixにしているのでfixを代入してています。
加えたコードはタグがfixed_tag_nameならそのタグを出力しないようにしています。
{% if article.tags.size > 0 %}
<ul class="list--inline txt--minor">
<li>
<span>{{ 'blogs.article.tags' | t }}:</span>
{% for tag in article.tags %}
<a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a>{% unless forloop.last %}, {% endunless %}
{% endfor %}
</li>
</ul>
{% endif %}
{% comment %} @@@@@@@@@@ 変更前 ↑ @@@@@@@@@@ {% endcomment %}
{% comment %} @@@@@@@@@@ 変更後 ↓ @@@@@@@@@@ {% endcomment %}
{% assign tag_size_min = 0 %}
{% assign fixed_tag_name = 'fix' %}
{% for tag in article.tags %}
{% if tag == fixed_tag_name %}
{% assign tag_size_min = 1 %}
{% endif %}
{% endfor %}
{% if article.tags.size > tag_size_min %}
<ul class="list--inline txt--minor">
<li>
<span>{{ 'blogs.article.tags' | t }}:</span>
{% for tag in article.tags %}
{% if tag == fixed_tag_name%}
{% continue %}
{% endif %}
<a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a>{% unless forloop.last %}, {% endunless %}
{% endfor %}
</li>
</ul>
{% endif %}うまくいけばこのように固定記事用のタグは表示されなくなります。
ブログ記事一覧内の記事にタグを表示している人で、固定記事用のタグを表示したくない人は次の章を見てください。
ブログ記事一覧内で固定ブログ用タグを非表示にする(タグを出力しているひとのみ)
この記事などを参考にしてブログ記事一覧内でタグを表示している人は、現時点では固定記事用のタグが表示されていると思います。ここではそれを非表示にします。
snippets/featured-blog.liquidの{% if section.settings.blog_show_tag %}から{% endif %}までを編集して次のようにします。
{% if section.settings.blog_show_tag %}
{% assign tag_size_min = 0 %}
{% if article == fixed_article %}
{% assign tag_size_min = 1 %}
{% endif %}
{% if article.tags.size > tag_size_min %}
<ul class="list--inline txt--minor">
{% for tag in article.tags %}
{% if tag == fixed_tag_name %}
{% continue %}
{% endif %}
<li class="tag">
<a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% endif %}コードを編集してうまくいけばこのように、固定記事用のタグが非表示になっているはずです。