今回はWINGでJINやSANGOのようなタブ機能を使えるようにするカスタマイズの紹介です。
Twitterにデモの動画をアップしたので、動きをご確認ください。
（このカスタマイズはPC表示にも対応しています）
（動画では選択されていないタブも赤色ですが、しっくりこなかったのでグレーに変更しました。）
今回は人気のWordPressテーマ「WING」にこのタブ機能を実装していきましょう。
style.cssにコピペ
まずは、子テーマのstyle.cssに以下のコードをコピペしましょう。
「外観」→「テーマの編集」でstyle.cssの編集画面を開きます。
style.css冒頭の/* ~ */でコメントされている部分の後で改行してから、以下のコードをコピペしてください。
/* ---------- WINGタブ機能用CSS ---------- */
.post .post-tab-list ul.tab-list {
display: flex;
padding: 0;
}
.post-tab-list ul li {
flex-direction: row;
width: 25%;
text-align: center;
cursor: pointer;
padding: 5px 0;
position: relative;
background-color: rgba(189,189,189,.17); /* タブの背景色 */
color: #666; /* タブの文字色 */
list-style: none;
font-size: .9em;
}
.post-tab-list ul li.selected {
background-color: #a61919; /* 選択中のタブの背景色 */
color: #fff; /* 選択中のタブの文字色 */
}
.post-tab-list ul li:not(:first-child){
margin-left: 5px;
}
.post-tab-list ul li.selected::after {
position: absolute;
content: "";
bottom: -8px;
left: 50%;
margin-left: -8px;
opacity: 1;
width: 0;
height: 0;
border-top: 8px solid #2b2b2b;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top-color: #a61919; /* 選択中のタブの下矢印の色 */
}
.ptl > .kanren {
padding-top: 0;
margin-top: 0;
}
main > article > aside > .kanren {
padding-top: 0;
}
main > article > .post, .top-wbox-t {
padding-bottom: 0;
}
.ptl, main > article > aside > .kanren.unselected, .st-pagelink.unselected {
display: none;
}
.ptl.selected {
display: block;
}
@media only screen and (max-width: 767px) {
.post-tab-list ul.tab-list {
display: flex;
flex-wrap: wrap;
}
.post-tab-list ul li {
width: calc(50% - 2px);
}
.post-tab-list ul li:nth-child(odd){
margin: 0 4px 4px 0;
}
.post-tab-list ul li:nth-child(even){
margin: 0 0 4px 0;
}
.post-tab-list ul li.selected::after {
content: none;
}
}
タブの背景色や文字色も変えられるので、お好みのカラーコードに変更してください。
ウィジェットにコピペ
次に、ウィジェットでタブやカテゴリーの記事一覧を表示させます。
「外観」→「ウィジェット」でウィジェットの編集画面を開きます。
その中にある「トップページ上部ウィジェット」に「テキスト」というウィジェットを追加し、テキストモードで以下のコードをコピペしてください。
<div class="post-tab-list">
<ul class="tab-list">
<li class="post-tab-1 selected">最新記事</li>
<li class="post-tab-2">ここにカテゴリー名を入力してください</li>
<li class="post-tab-3">ここにカテゴリー名を入力してください</li>
<li class="post-tab-4">ここにカテゴリー名を入力してください</li>
</ul>
<div class="post-tab-list-inner">
<div class="ptl post-tab-list-1 selected"></div>
</div>
</div>
<div class="ptl post-tab-list-2">[[st-catgroup cat="" page="10" order="desc" orderby="id"]]</div>
<div class="ptl post-tab-list-3">[[st-catgroup cat="" page="10" order="desc" orderby="id"]]</div>
<div class="ptl post-tab-list-4">[[st-catgroup cat="" page="10" order="desc" orderby="id"]]</div>
<script>
$('.tab-list li').on('click',function(){
$('.tab-list li.selected').removeClass('selected');
ptlNum = $(this).attr('class');
ptlNum = ptlNum.slice(-1);
$(this).addClass('selected');
if (ptlNum == 1) {
$('.ptl.selected').removeClass('selected');
$('main > article > aside > .kanren').removeClass('unselected');
$('.st-pagelink').removeClass('unselected');
} else {
$('main > article > aside > .kanren').addClass('unselected');
$('.st-pagelink').addClass('unselected');
$('.ptl.selected').removeClass('selected');
$('.post-tab-list-' + ptlNum).addClass('selected');
}
});
</script>
カテゴリー名とショートコードの値を調整
先ほどコピペしたウィジェットのコードを調整していきます。
まずは4~6行目の「ここにカテゴリー名を入力してください」の部分に、タブで表示したいカテゴリー名を入力します。
次に、ショートコードを調整します。12~14行目の
[[st-catgroup cat="" page="10" order="desc" orderby="id"]]
という部分です。（３箇所あります）
まず、cat=””の中に、表示したい記事一覧のカテゴリーIDを入れます。（例；カテゴリーIDが52の場合は cat=”52″ ）
次に、page=”10″の10という数字を表示したい記事数に変更します（そのままだと10記事表示されます）
ショートコード3箇所すべてのカテゴリーIDと表示する記事数を変更します。
以上でカスタマイズ完了です！
完成！（&まとめ）
トップページでタブの動きを確認しましょう。
無事に動いたら完成です。
コメント