今回は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"]]
という部分です。(3箇所あります)
まず、cat=””の中に、表示したい記事一覧のカテゴリーIDを入れます。(例;カテゴリーIDが52の場合は cat=”52″ )
次に、page=”10″の10という数字を表示したい記事数に変更します(そのままだと10記事表示されます)
ショートコード3箇所すべてのカテゴリーIDと表示する記事数を変更します。
以上でカスタマイズ完了です!
完成!(&まとめ)
トップページでタブの動きを確認しましょう。
無事に動いたら完成です。
コメント