WING(AFFINGER5)にJINやSANGOのようなタブ機能を追加するカスタマイズ【WordPress】

WINGにJINやSANGOのようなタブ機能を実装 WordPress

今回は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行目の「ここにカテゴリー名を入力してください」の部分に、タブで表示したいカテゴリー名を入力します。

JIN同様、最初のタブは最新記事で固定になります。

ショートコードでは2, 3, 4番目のタブの記事を設定してください。

次に、ショートコードを調整します。12~14行目の

[[st-catgroup cat="" page="10" order="desc" orderby="id"]]

という部分です。(3箇所あります)

まず、cat=””の中に、表示したい記事一覧のカテゴリーIDを入れます。(例;カテゴリーIDが52の場合は cat=”52″ )

次に、page=”10″の10という数字を表示したい記事数に変更します(そのままだと10記事表示されます)

ショートコード3箇所すべてのカテゴリーIDと表示する記事数を変更します。

以上でカスタマイズ完了です!

完成!(&まとめ)

トップページでタブの動きを確認しましょう。

無事に動いたら完成です。

コメント

タイトルとURLをコピーしました