WING WordPress カスタマイズ

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

投稿日:

こんにちは!くまぺです。

今回はWINGでJINやSANGOのようなタブ機能を使えるようにするカスタマイズのご紹介です!:3

Twitterにデモの動画をアップしたので、動きをご確認ください。(PC表示にも対応しています)

(動画では選択されていないタブも赤色ですが、しっくりこなかったのでグレーに変更しました。
このサイトのトップページでも見れるのでご確認ください。)

くまぺ
今回はこのタブ機能を作っていきましょう!

 

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と表示する記事数を変更します。

 

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

完成!(&まとめ)

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

無事に動いていたら完成です!お疲れ様でした:3

 

もし何かあれば僕のTwitterまでご連絡ください!

よく読まれている記事

1

VRヘッドマウントディスプレイ「Oculus Go」が5月1日(日本時間5月2日)に発売されました。 Oculus Goは「一体型VRヘッドセット」や「スタンドアローン型VR機器」とも呼ばれており、「 ...

2

スタンドアロン型のVRヘッドセット、Oculus Goがついに届きました! この記事では、Oculus Goを開封してから実際にVRゲームで遊ぶまでの使い方やセットアップの方法を解説します。 &nbs ...

3

2018年5月1日にOculusが発売したVRヘッドマウントディスプレイ「Oculus Go」が、ついに届きました! 5月6日に注文して5月9日に届いたので割と早かったですね。 もっと届くまで日数がか ...

-WING, WordPress, カスタマイズ
-, , , , , ,

Copyright© kumape.me, , 2018 All Rights Reserved.