カテゴリーごとに「カリキュラム」「レッスン」「動画」のタブ表示を切り替えたい

フォローする
オウルキャスト

カテゴリ別コンテンツ一覧 ページを開いたとき、
初期設定では「カリキュラム」「レッスン」「動画」のタブが表示され、
はじめにカリキュラムから確認できるようになっています。

oc_category.png

・「基礎」というカテゴリーだけカリキュラムとレッスンが無いので、「動画」のタブだけ表示したい

と言った場合があるかと思います。

このページでは、カテゴリーごとに「カリキュラム」「レッスン」「動画」のタブの表示・非表示を切り替える編集方法をご案内します。
例として、特定の1つのカテゴリーだけ「カリキュラム」「レッスン」の表示を消し、「動画」だけ確認できるように編集していきます。

※編集方法で案内している行数などの指定は、テンプレートが初期設定の状態を元にしています。
既にテンプレートを編集済みの場合は、行数がずれる可能性がありますので、ご了承ください。

1.事前準備

「動画」タブだけ表示したいカテゴリの、カテゴリIDを調べます。
コンテンツ管理 > カテゴリ一覧から、該当のカテゴリの(ID:●)と書いてある数字をメモしておいてください。

2.PC表示の編集方法

デザイン管理 > テンプレート > 「PC版」タブ > ページテンプレート > 「カテゴリ別コンテンツ一覧」


①67行目に
{% if category.id not in [動画だけを表示させたいカテゴリのID(例:1, 2, 3)]  %}
を追加してください。
 
②88行目に67行目のifを終了する
{% endif %}
を追加してください 。
 
③91行目のclass属性内に
class="nav-link no-scroll-target {% if input_get('activetab', 'curricula') == 'contents' or category.id in [動画だけを表示させたいカテゴリのID(例:1, 2, 3)]  %}active{% endif %}"
と追加してください。(追加部分を太文字としております。)
 
④128行目に
{% if category.id not in [動画だけを表示させたいカテゴリのID(例:1, 2, 3)]  %}
を追加してください。
 
⑤173行目に128行目のifを終了する
{% endif %}
を追加してください。
 
⑥175行目のclass属性内に
<div class="tab-pane {% if input_get('activetab', 'curricula') == 'contents' or category.id in [動画だけを表示させたいカテゴリのID(例:1, 2, 3)] %}active{% endif %}" id=...
と追加してください。(追加部分を太文字としております。)

3.スマートフォン表示の編集方法

デザイン管理 > テンプレート > 「スマートフォン版」タブ > ページテンプレート > 「カテゴリ別コンテンツ一覧」


①23行目に
{% if category.id not in [動画だけを表示させたいカテゴリのID(例:1, 2, 3)] %}
を追加してください。
 
②30行目に23行目のifを終了する
{% endif %}
を追加してください。
 
③32行目のclass属性内に
<a href="#tab-contents-list" class="nav-link btn-theme {% if input_get('activetab', 'curricula') == 'contents' or category.id in [動画だけを表示させたいカテゴリのID(例:1, 2, 3)] %}active{% endif %}" data-toggle=...</a>
と追加してください。(追加部分を太文字としております。)
 
④63行目に
{% if category.id not in [動画だけを表示させたいカテゴリのID(例:1, 2, 3)] %}
を追加してください。
 
⑤84行目に63行目のifを終了する
{% endif %}
を追加してください。
 
⑥85行目のclass属性内に
<div id="tab-contents-list" class="tab-pane {% if input_get('activetab', 'curricula') == 'contents' or category.id in [動画だけを表示させたいカテゴリのID(例:1, 2, 3)] %}active{% endif %}">
と追加してください。(追加部分を太文字としております。)
 
⑦176行目の
var activetab = '{{input_get('activetab', 'curricula')}}';
の下に

if ([動画だけを表示させたいカテゴリのID(例:1, 2, 3)].includes({{ category.id }})) {
    activetab = 'contents';
}

を追加してください。

 

特定のカテゴリの詳細ページだけ、「動画」タブのみ表示させることができました。
oc_category2.png

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています