オウルキャスト
カテゴリ別コンテンツ一覧 や 検索結果一覧 ページを開いたとき、
初期設定では「カリキュラム」「レッスン」「動画」のタブが表示され、
はじめにカリキュラムから確認できるようになっています。
・レッスンだけ設定しているので、カリキュラムと動画は表示しなくてよい
・カリキュラムだけ見せたいのでレッスンと動画は表示しなくてよい
といった場合があるかと思います。
このページでは、必要な一覧だけ表示するための編集方法をご案内します。
例として、「カリキュラム」の表示を消し、はじめに「レッスン」から確認できるように編集していきます。
※編集方法で案内している行数などの指定は、テンプレートが初期設定の状態を元にしています。
既にテンプレートを編集済みの場合は、行数がずれる可能性がありますので、ご了承ください。
１．PC表示の編集方法
１．カテゴリ別コンテンツ一覧
デザイン管理＞テンプレート＞「PC版」タブ＞ページテンプレート＞「カテゴリ別コンテンツ一覧」
67～95行目でタブの表示・非表示を指定しています。
表示しなくて良いタブの<li class="nav-item">から</li>を削除、
もしくはコメントアウト（{#と#}で囲む）してください。
初期値として表示しておきたいタブの、input_get('activetab', 'curricula') のcurricula部分をlessonsかcontentsに変更してください。
例）「カリキュラム」のタブを消し、「レッスン」を初めに表示する場合の編集内容
{#<li class="nav-item">
<a
class="nav-link no-scroll-target {% if input_get('activetab', 'curricula') == 'curricula' %}active{% endif %}"
data-toggle="tab"
href="#curricula"
role="tab"
aria-controls="curricula"
aria-selected="true"
>{{config('site.title_design.curriculum_icon')}}{{config('site.title_design.curriculum_title')}}</a>
</li>#}
<li class="nav-item">
<a
class="nav-link no-scroll-target {% if input_get('activetab', 'lessons') == 'lessons' %}active{% endif %}"
data-toggle="tab"
href="#lessons"
role="tab"
aria-controls="lessons"
aria-selected="true"
>{{config('site.title_design.lesson_icon')}}{{config('site.title_design.lesson_title')}}</a>
</li>
<li class="nav-item">
<a
class="nav-link no-scroll-target {% if input_get('activetab', 'lessons') == 'contents' %}active{% endif %}"
data-toggle="tab"
href="#contents"
role="tab"
aria-controls="contents"
>{{config('site.title_design.contents_icon')}}{{config('site.title_design.contents_title')}}</a>
</li>続いて、 127～196行目の間で、何の一覧情報をはじめに表示するか指定しています。
表示しなくて良い一覧の<div class="tab-pane {% if input_get('activetab',・・・>から</div>を削除、
もしくはコメントアウト（{#と#}で囲む）してください。
初期値として表示しておきたい一覧の、input_get('activetab', 'curricula') のcurricula部分をlessonsかcontentsに変更してください。
例）「カリキュラム」の一覧を消し、「レッスン」を初めに表示する場合の編集内容
{# <div class="tab-pane {% if input_get('activetab', 'curricula') == 'curricula' %}active{% endif %}" id="curricula" style="border:none;" role="tabpanel">
<h2 class="ttl-md">このカテゴリの{{config('site.title_design.curriculum_title')}}一覧</h2>
{% set paginatorCurricula = get_curricula_pager({search: {category_ids: [category.id]}, sort: sort, order: order }, input_get('page_curricula', 1), 3, 'page_curricula') %}
{{ paginatorCurricula.appends({activetab: 'curricula'}).links()|raw }}
<div class="curriculum-list">
{% for curriculum in paginatorCurricula.getCollection() %}
{% include 'study::curricula.partial.curriculumBox.twig' with {row: curriculum} only %}
{% else %}
<div class="col-12">
<div class="alert alert-info fade show mb-0" role="alert">
<div class="container">
検索結果がありません
</div>
</div>
</div>
{% endfor %}
</div>
{{ paginatorCurricula.appends({activetab: 'curricula'}).links()|raw }}
</div> #}
<div class="tab-pane {% if input_get('activetab', 'lessons') == 'lessons' %}active{% endif %}" id="lessons" style="border:none;" role="tabpanel">
<h2 class="ttl-md">このカテゴリの{{config('site.title_design.lesson_title')}}一覧</h2>
{% set paginatorLessons = get_lessons_pager({search: {category_ids: [category.id]}, sort: sort, order: order }, input_get('page_lessons', 1), 3, 'page_lessons') %}
{{ paginatorLessons.appends({activetab: 'lessons'}).links()|raw }}
<div class="lesson-list">
{% for lesson in paginatorLessons.getCollection() %}
{% include 'study::lessons.partial.lessonBox.twig' with {row: lesson} only %}
{% else %}
<div class="col-12">
<div class="alert alert-info fade show mb-0" role="alert">
<div class="container">
検索結果がありません
</div>
</div>
</div>
{% endfor %}
</div>
{{ paginatorLessons.appends({activetab: 'lessons'}).links()|raw }}
</div>
{% if not study_starter_enable () %}
<div class="tab-pane {% if input_get('activetab', 'lessons') == 'contents' %}active{% endif %}" id="contents" style="border:none;" role="tabpanel">
<h2 class="ttl-md">このカテゴリの{{config('site.title_design.contents_title')}}一覧</h2>
{% include 'contents.partial.sortBox' with {sort: sort, order: order, form: form } only %}
{% set paginator = get_contents_pager({search: {category_ids: [category.id]}, sort: sort, order: order }, input_get('page', 1), 12) %}
{{ paginator.appends({activetab: 'contents'}).links()|raw }}
<div class="content-list row">
{% for content in paginator.getCollection() %}
{% include 'contents.partial.box' with {content:content, category_id: category.id, columnClass: 'col-lg-4 col-md-6'} only %}
{% else %}
<div class="col-12">
<div class="alert alert-info fade show mb-0" role="alert">
<div class="container">
検索結果がありません
</div>
</div>
</div>
{% endfor %}
</div>
{{ paginator.appends({activetab: 'contents'}).links()|raw }}
</div>「カリキュラム」のタブが消え、「レッスン」タブと一覧が初めに表示されるようになりました。
２．コンテンツ検索結果
デザイン管理＞テンプレート＞「PC版」タブ＞ページテンプレート＞「コンテンツ検索結果」
16～43行目でタブの表示・非表示を指定しています。
表示しなくて良いタブの<li class="nav-item">から</li>を削除、
もしくはコメントアウト（{#と#}で囲む）してください。
初期値として表示しておきたいタブの、input_get('activetab', 'curricula') のcurricula部分をlessonsかcontentsに変更してください。
例）「カリキュラム」のタブを消し、「レッスン」を初めに表示する場合の編集内容
{# <li class="nav-item">
<a
class="nav-link no-scroll-target {% if input_get('activetab', 'curricula') == 'curricula' %}active{% endif %}"
data-toggle="tab"
href="#curricula"
role="tab"
aria-controls="curricula"
aria-selected="true"
>{{config('site.title_design.curriculum_icon')}}{{config('site.title_design.curriculum_title')}}</a>
</li> #}
<li class="nav-item">
<a
class="nav-link no-scroll-target {% if input_get('activetab', 'lessons') == 'lessons' %}active{% endif %}"
data-toggle="tab"
href="#lessons"
role="tab"
aria-controls="lessons"
>{{config('site.title_design.lesson_icon')}}{{config('site.title_design.lesson_title')}}</a>
</li>
<li class="nav-item">
<a
class="nav-link no-scroll-target {% if input_get('activetab', 'lessons') == 'contents' %}active{% endif %}"
data-toggle="tab"
href="#contents"
role="tab"
aria-controls="contents"
>{{config('site.title_design.contents_icon')}}{{config('site.title_design.contents_title')}}</a>
</li>続いて、 91～211行目の間で、何の一覧情報をはじめに表示するか指定しています。
表示しなくて良い一覧の<div class="tab-pane {% if input_get('activetab',・・・>から</div>を削除、
もしくはコメントアウト（{#と#}で囲む）してください。
初期値として表示しておきたい一覧の、input_get('activetab', 'curricula') のcurricula部分をlessonsかcontentsに変更してください。
例）「カリキュラム」の一覧を消し、「レッスン」を初めに表示する場合の編集内容
{# <div class="tab-pane {% if input_get('activetab', 'curricula') == 'curricula' %}active{% endif %}" id="curricula" style="border:none;" role="tabpanel">
<h2 class="ttl-md">
検索結果
<a class="btn btn-theme icon float-right mt-0" href="#search-section-curriculum">再度検索する<i class="fa fa-search"></i></a>
</h2>
{% set curriculum_paginator = get_curricula_pager({search: search}, input_get('page_curricula', 1), 3, 'page_curricula') %}
{{ curriculum_paginator.appends({activetab: 'curricula'}).links()|raw }}
{% for curriculum in curriculum_paginator.getCollection() %}
{% if loop.first %}
<div class="lesson-list">
{% endif %}
{% include 'study::curricula.partial.curriculumBox.twig' with {row: curriculum} only %}
{% if loop.last %}
</div>
{% endif %}
{% else %}
<div class="col-12">
<div class="alert alert-info fade show mb-0" role="alert">
<div class="container">
検索結果がありません
</div>
</div>
</div>
{% endfor %}
{{ curriculum_paginator.appends({activetab: 'curricula'}).links()|raw }}
<section id="search-section-curriculum" class="box-section">
<h1 class="ttl-lg">検索</h1>
<div class="box-form card">
{{ form_start(curriculumForm)|raw }}
{{ form_row(curriculumForm.keyword)|raw }}
{{ form_row(curriculumForm.category_id)|raw }}
{{ form_row(curriculumForm.limit_type)|raw }}
{{ form_row(curriculumForm.buttons)|raw }}
<input type="hidden" name="activetab" value="curricula">
{{ form_end(curriculumForm, false)|raw }}
</div>
</section>
</div> #}
<div class="tab-pane {% if input_get('activetab', 'lessons') == 'lessons' %}active{% endif %}" id="lessons" style="border:none;" role="tabpanel">
<h2 class="ttl-md">
検索結果
<a class="btn btn-theme icon float-right mt-0" href="#search-section-lesson">再度検索する<i class="fa fa-search"></i></a>
</h2>
{% set lesson_paginator = get_lessons_pager({search: search}, input_get('page_lessons', 1), 3, 'page_lessons') %}
{{ lesson_paginator.appends({activetab: 'lessons'}).links()|raw }}
{% for lesson in lesson_paginator.getCollection() %}
{% if loop.first %}
<div class="lesson-list">
{% endif %}
{% include 'study::lessons.partial.lessonBox.twig' with {row: lesson} only %}
{% if loop.last %}
</div>
{% endif %}
{% else %}
<div class="col-12">
<div class="alert alert-info fade show mb-0" role="alert">
<div class="container">
検索結果がありません
</div>
</div>
</div>
{% endfor %}
{{ lesson_paginator.appends({activetab: 'lessons'}).links()|raw }}
<section id="search-section-lesson" class="box-section">
<h1 class="ttl-lg">検索</h1>
<div class="box-form card">
{{ form_start(lessonForm)|raw }}
{{ form_row(lessonForm.keyword)|raw }}
{{ form_row(lessonForm.category_id)|raw }}
{{ form_row(lessonForm.limit_type)|raw }}
{{ form_row(lessonForm.buttons)|raw }}
<input type="hidden" name="activetab" value="lessons">
{{ form_end(lessonForm, false)|raw }}
</div>
</section>
</div>
{% if not study_starter_enable () %}
<div class="tab-pane {% if input_get('activetab', 'lessons') == 'contents' %}active{% endif %}" id="contents" style="border:none;" role="tabpanel">
<h2 class="ttl-md">
検索結果
<a class="btn btn-theme icon float-right mt-0" href="#search-section">再度検索する<i class="fa fa-search"></i></a>
</h2>
{% include 'contents.partial.sortBox' with {sort: sort, order: order, form: form } only %}
{% set paginator = get_contents_pager({search: search, sort: sort, order: order }, input_get('page', 1), 12) %}
{{ paginator.appends({activetab: 'contents'}).links()|raw }}
<div class="content-list row">
{% for content in paginator.getCollection() %}
{% include 'contents.partial.box' with {content:content, columnClass: 'col-lg-4 col-md-6'} only %}
{% else %}
<div class="col-12">
<div class="alert alert-info fade show mb-0" role="alert">
<div class="container">
検索結果がありません
</div>
</div>
</div>
{% endfor %}
</div>
{{ paginator.appends({activetab: 'contents'}).links()|raw }}
<section id="search-section" class="box-section">
<h1 class="ttl-lg">検索</h1>
<div class="box-form card">
{{ form_start(form)|raw }}
{{ form_row(form.keyword)|raw }}
{{ form_row(form.category_id)|raw }}
{{ form_row(form.type)|raw }}
{{ form_row(form.limit_type)|raw }}
{{ form_row(form.buttons)|raw }}
<input type="hidden" name="activetab" value="contents">
{{ form_end(form, false)|raw }}
</div>
</section>
</div>「カリキュラム」のタブが消え、「レッスン」タブと一覧が初めに表示されるようになりました。
２．スマートフォン表示の編集方法
１．カテゴリ別コンテンツ一覧
デザイン管理＞テンプレート＞「スマートフォン版」タブ＞ページテンプレート＞「カテゴリ別コンテンツ一覧」
22～47行目でタブの表示・非表示を指定しています。
表示しなくて良いタブの<li class="nav-item">から</li>を削除、
もしくはコメントアウト（{#と#}で囲む）してください。
初期値として表示しておきたいタブの、input_get('activetab', 'curricula') のcurricula部分をlessonsかcontentsに変更してください。
例）「カリキュラム」のタブを消し、「レッスン」を初めに表示する場合の編集内容
<ul class="nav nav-tabs tab-4">
{#<li class="nav-item">
<a href="#tab-curricula-list" class="nav-link btn-theme {% if input_get('activetab', 'curricula') == 'curricula' %}active{% endif %}" data-toggle="tab">{{config('site.title_design.curriculum_icon')}}{{config('site.title_design.curriculum_title')}}一覧</a>
</li>#}
<li class="nav-item">
<a href="#tab-lessons-list" class="nav-link btn-theme {% if input_get('activetab', 'lessons') == 'lessons' %}active{% endif %}" data-toggle="tab">{{config('site.title_design.lesson_icon')}}{{config('site.title_design.lesson_title')}}一覧</a>
</li>
<li class="nav-item">
<a href="#tab-contents-list" class="nav-link btn-theme {% if input_get('activetab', 'lessons') == 'contents' %}active{% endif %}" data-toggle="tab">{{config('site.title_design.contents_icon')}}{{config('site.title_design.contents_title')}}一覧</a>
</li>
<li class="nav-item">
<a href="#tab-info" class="nav-link btn-theme" data-toggle="tab">カテゴリ情報</a>
</li>
</ul>
{% elseif study_enable()%}
<ul class="nav nav-tabs tab-3">
{#<li class="nav-item">
<a href="#tab-curricula-list" class="nav-link btn-theme {% if input_get('activetab', 'curricula') == 'curricula' %}active{% endif %}" data-toggle="tab">{{config('site.title_design.curriculum_title')}}一覧</a>
</li>#}
<li class="nav-item">
<a href="#tab-lessons-list" class="nav-link btn-theme {% if input_get('activetab', 'lessons') == 'lessons' %}active{% endif %}" data-toggle="tab">{{config('site.title_design.lesson_title')}}一覧</a>
</li>
<li class="nav-item">
<a href="#tab-info" class="nav-link btn-theme" data-toggle="tab">カテゴリ情報</a>
</li>
</ul>続いて、 61～96行目の間で、何の一覧情報をはじめに表示するか指定しています。
表示しなくて良い一覧の<div id="tab-contents-list" class="tab-pane {% if input_get('activetab',・・・>から</div>を削除、
もしくはコメントアウト（{#と#}で囲む）してください。
初期値として表示しておきたい一覧の、input_get('activetab', 'curricula') のcurricula部分をlessonsかcontentsに変更してください。
例）「カリキュラム」の一覧を消し、「レッスン」を初めに表示する場合の編集内容
{# <div id="tab-curricula-list" class="tab-pane {% if input_get('activetab', 'curricula') == 'curricula' %}active{% endif %}">
<h2 class="ttl-sm">このカテゴリの{{config('site.title_design.curriculum_title')}}一覧</h2>
<div id="result-curricula" class="lesson-list">
<div id="no-result-message" class="alert alert-info mb-0" style="display:none;" role="alert">
<div class="container">
検索結果がありません
</div>
</div>
</div>
</div> #}
<div id="tab-lessons-list" class="tab-pane {% if input_get('activetab', 'lessons') == 'lessons' %}active{% endif %}">
<h2 class="ttl-sm">このカテゴリの{{config('site.title_design.lesson_title')}}一覧</h2>
<div id="result-lessons" class="lesson-list">
<div id="no-result-message" class="alert alert-info mb-0" style="display:none;" role="alert">
<div class="container">
検索結果がありません
</div>
</div>
</div>
</div>
<div id="tab-contents-list" class="tab-pane {% if input_get('activetab', 'lessons') == 'contents' %}active{% endif %}">
<h2 class="ttl-sm">このカテゴリの{{config('site.title_design.contents_title')}}一覧</h2>
<section>
<h3 class="btn btn-block btn-accent btn-toggle">並べ替え<i class="fa fa-sm fa-plus-circle"></i></h3>
<div class="accordion-box">
{% include 'contents.partial.sortBox' with {sort: sort, order: order} only %}
</div>
</section>
<div id="result">
<div id="no-result-message" class="alert alert-info mb-0" style="display:none;" role="alert">
<div class="container">
検索結果がありません
</div>
</div>
</div>
</div>「カリキュラム」のタブが消え、「レッスン」タブと一覧が初めに表示されるようになりました。
２．コンテンツ検索結果
デザイン管理＞テンプレート＞「スマートフォン版」タブ＞ページテンプレート＞「コンテンツ検索結果」
50～66行目でタブの表示・非表示を指定しています。
表示しなくて良いタブの<li class="nav-item">から</li>を削除、
もしくはコメントアウト（{#と#}で囲む）してください。
初期値として表示しておきたいタブの、input_get('activetab', 'curricula') のcurricula部分をlessonsかcontentsに変更してください。
例）「カリキュラム」のタブを消し、「レッスン」を初めに表示する場合の編集内容
<ul class="nav nav-tabs tab-3">
{# <li class="nav-item">
<a href="#curricula"
class="nav-link btn-theme {% if input_get('activetab', 'curricula') == 'curricula' %}active{% endif %}"
data-toggle="tab">{{config('site.title_design.curriculum_icon')}}{{config('site.title_design.curriculum_title')}}<br />一覧</a>
</li> #}
<li class="nav-item">
<a href="#lessons"
class="nav-link btn-theme {% if input_get('activetab', 'lessons') == 'lessons' %}active{% endif %}"
data-toggle="tab">{{config('site.title_design.lesson_icon')}}{{config('site.title_design.lesson_title')}}<br />一覧</a>
</li>
<li class="nav-item">
<a href="#contents"
class="nav-link btn-theme {% if input_get('activetab', 'lessons') == 'contents' %}active{% endif %}"
data-toggle="tab">{{config('site.title_design.contents_icon')}}{{config('site.title_design.contents_title')}}<br />一覧</a>
</li>
</ul>続いて、 71～143行目の間で、何の一覧情報をはじめに表示するか指定しています。
表示しなくて良い一覧の<div id="｛curricula/lessons/contents｝" class="tab-pane {% if input_get('activetab',・・・>から</div>を削除、
もしくはコメントアウト（{#と#}で囲む）してください。
初期値として表示しておきたい一覧の、input_get('activetab', 'curricula') のcurricula部分をlessonsかcontentsに変更してください。
例）「カリキュラム」の一覧を消し、「レッスン」を初めに表示する場合の編集内容
{# <div id="curricula" class="tab-pane {% if input_get('activetab', 'curricula') == 'curricula' %}active{% endif %}">
<h2 class="ttl-sm">検索結果</h2>
<section>
<h2 class="btn btn-block btn-accent btn-toggle icon">検索する<i class="fa fa-plus-circle" aria-hidden="true"></i></h2>
<div class="accordion-box box-form">
{{ form_start(curriculumForm)|raw }}
{{ form_row(curriculumForm.keyword)|raw }}
{{ form_row(curriculumForm.category_id)|raw }}
{{ form_row(curriculumForm.limit_type)|raw }}
{{ form_row(curriculumForm.buttons)|raw }}
<input type="hidden" name="activetab" value="curricula">
{{ form_end(curriculumForm, false)|raw }}
</div>
</section>
<div id="result-curricula" class="curriculum-list">
<div id="no-result-message" class="alert alert-info mb-0" style="display:none;" role="alert">
<div class="container">
検索結果がありません
</div>
</div>
</div>
</div> #}
<div id="lessons" class="tab-pane {% if input_get('activetab', 'lessons') == 'lessons' %}active{% endif %}">
<h2 class="ttl-sm">検索結果</h2>
<section>
<h2 class="btn btn-block btn-accent btn-toggle icon">検索する<i class="fa fa-plus-circle" aria-hidden="true"></i></h2>
<div class="accordion-box box-form">
{{ form_start(lessonForm)|raw }}
{{ form_row(lessonForm.keyword)|raw }}
{{ form_row(lessonForm.category_id)|raw }}
{{ form_row(lessonForm.limit_type)|raw }}
{{ form_row(lessonForm.buttons)|raw }}
<input type="hidden" name="activetab" value="lessons">
{{ form_end(lessonForm, false)|raw }}
</div>
</section>
<div id="result-lessons" class="lesson-list">
<div id="no-result-message" class="alert alert-info mb-0" style="display:none;" role="alert">
<div class="container">
検索結果がありません
</div>
</div>
</div>
</div>
{% endif %}
{% if not study_starter_enable() %}
<div id="contents" class="tab-pane {% if input_get('activetab', 'lessons') == 'contents' %}active{% endif %}">
<h2 class="ttl-sm">検索結果</h2>
<section>
<h2 class="btn btn-block btn-accent btn-toggle icon">検索する<i class="fa fa-plus-circle" aria-hidden="true"></i></h2>
<div class="accordion-box box-form">
{{ form_start(form)|raw }}
{{ form_row(form.keyword)|raw }}
{{ form_row(form.category_id)|raw }}
{{ form_row(form.type)|raw }}
{{ form_row(form.limit_type)|raw }}
{{ form_row(form.buttons)|raw }}
<input type="hidden" name="activetab" value="contents">
{{ form_end(form, false)|raw }}
</div>
<h3 class="btn btn-block btn-accent btn-toggle">並べ替え<i class="fa fa-sm fa-plus-circle"></i></h3>
<div class="accordion-box">
{% include 'contents.partial.sortBox' with {sort: sort, order: order} only %}
</div>
</section>
<div id="result">
<div id="no-result-message" class="alert alert-info mb-0" style="display:none;" role="alert">
<div class="container">
検索結果がありません
</div>
</div>
</div>
</div>最後に、 81行目のvar activetab = '{{input_get('activetab', 'curricula')}}';
のcurricula部分を初期値として表示しておきたいlessonsかcontentsに変更してください。
例）「カリキュラム」の一覧を消し、「レッスン」を初めに表示する場合の編集内容
var activetab = '{{input_get('activetab', 'lessons')}}';
「カリキュラム」のタブが消え、「レッスン」タブと一覧が初めに表示されるようになりました。