新着記事と人気記事をタブ切り替えで設置する【Cocoonウィジェット】

Cocoonはショートコードで新着記事や人気記事を簡単に呼び出せます。

普通に呼び出して縦に並べるのも良いですが、コンパクトに設置したいこともあります。

今回はタブ切り替えによって新着記事と人気記事を一つの場所に配置する方法を紹介します。

そらしど

タブ切り替えはCocoon設定のフロントページタイプ「タブ一覧」のようなイメージです。

完成イメージ
カスタマイズ手順
1. CSSの設定手順
2. HTMLの設定手順
当サイトで掲載しているソースコードについて
1. 著作権およびライセンス
2. 免責事項
まとめ
ブログカスタマイズ関連のおすすめ記事

完成イメージ

以下のようになります。

新着記事

カスタマイズ手順

CSSとHTMLを利用します。順番に解説します。

そらしど

HTMLはテンプレートに登録すると何度か使うのに楽です。

CSSの設定手順

カスタマイズ手順

STEP1
WordPress管理画面でstyle.cssエディタを開く
STEP2
CSSをコピーする
STEP3
style.cssに貼り付ける
STEP4
保存を押す

WordPress管理画面からテーマエディターを使って直接style.cssを編集する手順です。

テーマエディターの使用には注意が必要です。可能であればFTPソフトを使いましょう。

WordPress管理画面でstyle.cssエディタを開く

まず普段通りにWordPressにログインしてください。

次の順番で画面を移動してください。

画面遷移

外観→テーマエディタ→style.css

外観にマウスを当てるとサブメニューが出ます。テーマエディタを選択してください。

子テーマ（Cocoon-child）のstyle.cssを開いてください。（画像付きの手順）

CSSをコピーする

以下のCSSをコピーしてください。Copyボタンを押すと簡単にコピーできます。

/* タブ切り替え 新着記事-人気記事 開始 */
.tab-wrap {
	background: #F9FFFF;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	padding: 0 0 20px;
}

.tab-label {
	color: Gray;
	cursor: pointer;
	flex: 1;
	font-weight: bold;
	order: -1;
	padding: 12px 24px;
	position: relative;
	text-align: center;
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
	user-select: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	border-bottom: 3px solid #ddd;
}

.tab-label:hover {
	background: rgba(100, 100, 100,.1);
}

.tab-switch:checked + .tab-label {
	color: #545454;
}

.tab-label::after {
	background: #545454;
	bottom: -3px;
	content: '';
	display: block;
	height: 3px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(100%);
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
	width: 100%;
	z-index: 1;
}

.tab-switch:checked ~ .tab-label::after {
	transform: translateX(-100%);
}

.tab-switch:checked + .tab-label::after {
	opacity: 1;
	transform: translateX(0);
}

.tab-content {
	height:0;
	opacity:0;
	padding: 0 10px;
	pointer-events:none;
	transform: translateX(-30%);
	transition: transform .3s 80ms, opacity .3s 80ms;
	width: 100%;
}

.tab-switch:checked ~ .tab-content {
	transform: translateX(30%);
}

.tab-switch:checked + .tab-label + .tab-content {
	height: auto;
	opacity: 1;
	order: 1;
	pointer-events:auto;
	transform: translateX(0);
}

.tab-wrap::after {
	content: '';
	height: 20px;
	order: -1;
	width: 100%;
}

.tab-switch {
	display: none;
}
/* タブ切り替え 新着記事-人気記事 終了 */

Copy

style.cssに貼り付ける

先ほど開いたテーマエディタのstyle.cssに貼り付けます。

貼り付ける場所はファイル内の任意の場所ですが、他のコードの間に貼り付けないように注意してください。（画像付きの貼り付け箇所例）

保存する

画面下部にあるファイルを更新ボタンを押してください。

緑色の枠で「ファイルの編集に成功しました。」と表示されたら完了です。

HTMLの設定手順

カスタマイズ手順

STEP1
HTMLをコピーする
STEP2
カスタムHTMLに貼り付ける

HTMLをコピーする

以下のHTMLをコピーしてください。Copyボタンを押すと簡単にコピーできます。

<div class="tab-wrap">
    <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" /><label class="tab-label" for="TAB-01">新着記事</label>
    <div class="tab-content">[new_list count=5 type=2 arrow=1]
    </div>
    <input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">人気記事</label>
    <div class="tab-content">[popular_list days=30 rank=1 count=5 type=2 arrow=1]
    </div>
</div>

Copy

カスタムHTMLに貼り付ける

「カスタムHTML」に貼り付けてください。

貼り付け位置の例

特定の投稿ページに設置したい場合: 投稿作成画面の「カスタムHTML」ブロックへ貼り付け。
トップページに設置したい場合: 外観→ウィジェット画面の「インデックスリストトップ」「インデックスリストミドル」「インデックスリストボトム」のいずれかへ「カスタムHTML」ウィジェットを追加して貼り付け。
全ての投稿ページの下部に設置したい場合: 外観→ウィジェットから「投稿本文下」「投稿SNSボタン下」「投稿関連記事下」などへ「カスタムHTML」ウィジェットを追加して貼り付け。