Cocoonで使える[ショートコード]のオプションと使い方まとめ

Cocoonで使える[ショートコード]のオプションと使い方まとめ

Cocoonで使えるショートコード+オプション一覧と、使い方が掲載されている公式ページへのリンク集的なまとめです。

便利な機能がたくさんあって流し見でこんな機能あったのか~!なんて発見もあるかもしれません。

ジャンル分けは独断です。
すぐに使い方を忘れてしまうのでまとめました!

スポンサーリンク

【基礎知識】ショートコードの書き方

 これが自己完結型ショートコード
[new_list]
 これが囲み型ショートコード
[caption]ここに内容[/caption]
 これがオプションを指定したショートコード
[new_list count="3" order="desc"]
[ショートコード名 属性="値" 属性="値"]
 投稿のエディター画面(キャプチャ画像)
エディター画面のキャプチャ画像

エディターにコードを記述

 これが実際の表示
【電子書籍対応】Cocoon楽天商品リンクブックマークレット
ソースコードを丸ごとパクられてしまった時の対処の記録
【続・実録】突然Amazonアソシエイトが閉鎖された後の処遇

自動で生成して表示してくれる系

新着記事一覧

投稿ページ・固定ページ・カスタム投稿ページを投稿日順で表示できます。

ショートコード(基本形)
[new_list]
サンプル

オプション

属性説明記述方法初期値
count表示する記事数数値 (例: “10”)5
typeデザインの選択
  • default: 通常リスト
  • border_partition: カードの上下に区切り線(“1″でも可)
  • border_square: カードに枠線(“2″でも可)
  • large_thumb: 大きい画像
  • large_thumb_on: 大きい画像にタイトルを重ねる
default
boldタイトルを太文字にする0 / 1 (標準/太文字)0
arrow矢印を表示する0 / 1 (非表示/表示)0
class任意のclass属性を追加任意のclass名※複数の場合半角スペースで区切る(例:”ex-1 ex-2″)(空欄)
cats表示するカテゴリーを指定数値※複数の場合カンマで区切る (例: “1,2,5”)
すべてのカテゴリの場合: “all” (初期値)
all
children指定カテゴリの子カテゴリを含めるか0 / 1 (含めない/含める)0
tags表示するタグを指定数値※複数の場合カンマで区切る (例: “1,2,5”)(空欄)
modified更新日順で表示する0 / 1 (投稿日順/更新日順)0
order表示順asc / desc (昇順/降順)desc
sticky固定表示設定がされている記事の表示0 / 1 (非表示/表示)1
post_type表示する投稿タイプを選択post / page / カスタム投稿名
(投稿ページ/固定ページ/カスタム投稿)
※複数の場合カンマで区切る(例: “post,page”)
post
taxonomyタクソノミー名を指定タクソノミー名category
使い方
類似ショートコード

PV(ページビュー)数が多い順に投稿ページを表示できます。

ショートコード(基本形)
[popular_list]
サンプル

オプション

属性説明記述方法初期値
days集計期間の指定数値※日数 (例: “7”)
全期間の場合: “all” (初期値)
all
rankランキング順位ナンバーの表示0 / 1 (非表示/表示)0
pvPV数の表示0 / 1 (非表示/表示)0
count表示する記事数数値 (例: “10”)5
typeデザインの選択default / large_thumb / large_thumb_on
(通常リスト/大きい画像/大きい画像にタイトルを重ねる)
default
typeデザインの選択
  • default: 通常リスト
  • border_partition: カードの上下に区切り線(“1″でも可)
  • border_square: カードに枠線(“2″でも可)
  • large_thumb: 大きい画像
  • large_thumb_on: 大きい画像にタイトルを重ねる
default
boldタイトルを太文字にする0 / 1 (標準/太文字)0
arrow矢印を表示する0 / 1 (非表示/表示)0
class任意のclass属性を追加任意のclass名※複数の場合半角スペースで区切る(例:”ex-1 ex-2″)(空欄)
cats表示するカテゴリーを指定数値※複数の場合カンマで区切る (例: “1,2,5”)
すべてのカテゴリの場合: “all” (初期値)
all
使い方
類似ショートコード

サイトマップ

公開中の固定ページ・投稿ページ・カテゴリーページ・月別アーカイブページをすべて表示します。

ショートコード(基本形)
[sitemap]
サンプル
[sitemap page="0"]
[sitemap single="0" category="0"]

 サンプルは当ブログのサイトマップページで

サイトマップ
ものぐさWEBノートのサイトマップ
オプション
属性説明記述方法初期値
page固定ページ一覧の表示0 /1 (非表示/表示)1
single投稿ページ一覧の表示0 /1 (非表示/表示)1
categoryカテゴリーページ一覧の表示0 /1 (非表示/表示)1
archive月別アーカイブページ一覧の表示0 /1 (非表示/表示)0
使い方

目次

投稿ページ・固定ページのページ内目次を任意の位置に表示できます。

ショートコード(基本形)
[toc]
サンプル
メモ
「Cocoon設定>目次>目次の表示」の設定に関わらず表示されます。
使い方

ブログカード

URL情報のみで任意の位置にブログカードを表示できます。

ショートコード(基本形)
[http://URL]
サンプル
[https://web.monogusa-note.com]

※当ブログはCSSカスタマイズを行っています。

メモ
使い方

自分で登録・設定してから表示する系

プロフィールボックス

「(WordPress管理画面)ユーザー>ユーザー一覧」の中から指定したユーザーのプロフィールを表示します。

ショートコード(基本形)
[author_box]
サンプル
[author_box label="猫好きの管理人"]
猫好きの管理人
草村

オタク。虚弱体質。猫が好き。
CSSだけでなんとかしたい。
時代に取り残されていく一方の
しがないWebデザイナー

草村をフォローする
オプション
属性説明記述方法初期値
idユーザーID数値(例: “3”)
※指定なし: 投稿者のプロフィール
(空欄)
labelキャプションが表示出来ます。自由なテキスト(空欄)
使い方

(WordPress設定)外観>メニュー」で登録したメニューを記事一覧として表示します。

ショートコード(基本形)
[navi_list name="XXX"]
登録画面(キャプチャ画像)
ナビカードをメニューに登録した画面のキャプチャ

管理画面URL: /wp-admin/nav-menus.php

サンプル

オプション
属性説明記述方法初期値
name「メニュー」で登録したメニュー名を指定(必須)“登録したメニュー名”(空欄)
typeデザインの選択
  • default: 通常リスト
  • border_partition: カードの上下に区切り線(“1″でも可)
  • border_square: カードに枠線(“2″でも可)
  • large_thumb: 大きい画像
  • large_thumb_on: 大きい画像にタイトルを重ねる
default
boldタイトルを太文字にする0 / 1 (標準/太文字)0
arrow矢印を表示する0 / 1 (非表示/表示)0
class任意のclass属性を追加任意のclass名※複数の場合半角スペースで区切る(例:”ex-1 ex-2″)(空欄)
使い方
類似ショートコード

[navi]で表示する(旧ナビショートコード)

デフォルトの表示形式が異なりますが、最新のCocoonでも利用可能です。

ショートコード(基本形)
[navi name="XXX"]
サンプル
[navi name="ナビカードサンプル用メニュー"]
navi_listとの初期値の違い
naviでは「bold=”1″ arrow=”1″」(タイトル太字、矢印表示)が初期値になっています

テンプレート(定型文)

Cocoon設定メニュー/テンプレート」で登録したテンプレートを表示します。

ショートコード(基本形)
[temp id="XX"]
登録画面(キャプチャ画像)
テンプレート登録画面のキャプチャ

管理画面URL: /wp-admin/admin.php?page=theme-func-text

サンプル
[temp id="4"]
こちらはテンプレートのサンプルです
オプション
属性説明記述方法初期値
idテンプレートID(必須)数値(空欄)
使い方

ランキング(商品等の任意のアイテム)

Cocoon設定メニュー/ランキング作成」で登録したランキングを表示します。

ショートコード(基本形)
[rank id="XX"]
登録画面(キャプチャ画像)
ランキング作成画面のキャプチャ

管理画面URL: /wp-admin/admin.php?page=theme-ranking

サンプル
[rank id="1"]

Splatoon 2 (スプラトゥーン2) - Switch

ゲーム初心者からガチ勢まで楽しめる対戦ゲーム!対人戦が苦手な人も今作から追加されたサーモンランは味方との協力プレイが楽しめるぞ!

【PS4】ドラゴンクエストXI 過ぎ去りし時を求めて

大ボリュームのシナリオに、ユーモアたっぷりで魅力的なキャラクターはシリーズファンも初めてプレイする方も堪能出来る事間違いなし!

ぷよぷよ(TM)テトリス(R)S - Switch

不朽の名作ぷよぷよとテトリス同時に遊べる!1人用のストーリーモード、マルチプレイやオンライン対戦もあり地味なようでお得な一本だ!

オプション
属性説明記述方法初期値
idランキングID(必須)数値(空欄)
使い方

広告・アフィリエイト系

広告表示

「Cocoon設定>広告>アドセンス設定>広告コード」で設定したアドセンス広告を任意の位置に表示します。「[ad]ショートコードを有効にする」にチェックを入れる必要があります。

ショートコード(基本形)
[ad]
メモ
一行に対し[ad]だけを書く必要があります。
使い方

アフィリエイトタグ

Cocoon設定メニュー/アフィリエイトタグ」で登録したアフィリエイトタグを表示します。

ショートコード(基本形)
[affi id="XX"]
登録画面(キャプチャ画像)
アフィリエイトタグ登録画面のキャプチャ

管理画面URL: /wp-admin/admin.php?page=theme-affiliate-tag

サンプル
[affi id="8"]
オプション
属性説明記述方法初期値
idアフィリエイトタグID(必須)数値(空欄)
使い方

Amazon商品リンク

「Cocoon設定>API」を設定すればAmazon商品リンクをショートコードで表示できます。

ショートコード(基本形)
[amazon asin="XXX" kw="XXX"]
サンプル

[amazon asin="4088454928" kw="群青にサイレン1" size="s" btn1_url="https://shonenjumpplus.com/episode/10834108156638855981" btn1_text="試し読み"]
[amazon asin="4088454928" kw="群青にサイレン1" btn1_url="https://shonenjumpplus.com/episode/10834108156638855981" btn1_text="試し読み"]
[amazon asin="4088454928" kw="群青にサイレン1" size="l" btn1_url="https://shonenjumpplus.com/episode/10834108156638855981" btn1_text="試し読み"]
オプション

属性説明記述方法初期値
asinAmazon商品IDを指定(必須)*Amazon商品ID(空欄)
idasinと同等*(同上)(空欄)
kw商品検索ボタン用の検索キーワードを指定自由なテキスト(空欄)
title商品タイトル自由なテキスト(空欄)
desc商品リンクに説明文を追加自由なテキスト(リンク可)
(例: ‘<a href=”#”>Link</a>’)
(空欄)
price価格表示0 / 1 / 指定なし (非表示/表示/テーマ設定に準拠)(空欄)
reviewレビューリンクの表示
※テキストはCocoon設定>APIから変更可能
0 / 1 / 指定なし (非表示/表示/テーマ設定に準拠)(空欄)
size表示サイズs / m / l (小/中/大)m
amazonAmazon商品検索ボタン表示0 / 1 (非表示/表示)1
rakuten楽天市場商品検索ボタン表示0 / 1 (非表示/表示)1
yahooYahoo!ショッピング商品検索ボタン表示0 / 1 (非表示/表示)1
text_onlyテキストリンクとして表示する0 / 1 (通常表示/テキストリンク)0
catalogカタログ写真の表示0 / 1 / 指定なし (非表示/表示/テーマ設定に準拠)(空欄)
image_only画像のみ表示0 / 1 (通常表示/画像のみ表示)0
image_indexAPIが取得した画像の中から表示する画像を選択数値 (例: “3”)0
border枠線の表示0 / 1 (非表示/表示)1
logoロゴの表示0 / 1 / 指定なし (非表示/表示/テーマ設定に準拠)(空欄)

*どちらか一つのオプション入力必須

ボタン追加
属性説明記述方法初期値
btn1_urlボタン先頭に「詳細ページ」ボタンを追加
※btn1_tagが優先される
URL (例: “http://example.com”)(空欄)
btn1_text先頭に追加するボタンのキャプションを指定
※ボタンはbtn1_urlを設定する事で表示されます
自由なテキスト詳細ページ
btn1_tagタグをそのまま先頭にボタンとして追加する
(タグ改変禁止のアフィリエイトリンク等に)
‘HTML’
※シングルクォーテーションで囲む
(例: ‘<a href=”#”>Link</a>’)
(空欄)
btn2_urlボタン末尾に「詳細ページ」ボタンを追加
※btn2_tagが優先される
URL (例: “http://example.com”)(空欄)
btn2_text末尾に追加するボタンのキャプションを指定
※ボタンはbtn2_urlを設定する事で表示されます
自由なテキスト詳細ページ
btn2_tagタグをそのまま末尾にボタンとして追加する
(タグ改変禁止のアフィリエイトリンク等に)
‘HTML’
※シングルクォーテーションで囲む
(例: ‘<a href=”#”>Link</a>’)
(空欄)
btn3_urlボタン末尾に「詳細ページ」ボタンを追加
※btn3_tagが優先される
URL (例: “http://example.com”)(空欄)
btn3_text末尾に追加するボタンのキャプションを指定
※ボタンはbtn3_urlを設定する事で表示されます
自由なテキスト詳細ページ
btn3_tagタグをそのまま末尾にボタンとして追加する
(タグ改変禁止のアフィリエイトリンク等に)
‘HTML’
※シングルクォーテーションで囲む
(例: ‘<a href=”#”>Link</a>’)
(空欄)
メモ
使い方

楽天商品リンク

「Cocoon設定>API」を設定すれば楽天商品リンクをショートコードで表示できます。

ショートコード(基本形)
[rakuten id="XXX" kw="XXX"]
サンプル

[rakuten no="4547366349405" shop="book" kw="Lemon (通常盤) 米津玄師" size="s" btn2_url="https://youtu.be/SX_ViT4Ra7k" btn2_text="Youtubeで試聴"]
[rakuten no="4547366349405" shop="book" kw="Lemon (通常盤) 米津玄師" btn2_url="https://youtu.be/SX_ViT4Ra7k" btn2_text="Youtubeで試聴"]
オプション

属性説明記述方法初期値
id楽天のアイテムコード(商品ID)を指定(必須)*
※商品番号で指定する場合のオプションは別記↓参照
楽天のアイテムコード(商品ID)(空欄)
kw商品検索ボタン用の検索キーワードを指定自由なテキスト(空欄)
title商品タイトル自由なテキスト(空欄)
desc商品リンクに説明文を追加自由なテキスト(リンク可)
(例: ‘<a href=”#”>Link</a>’)
(空欄)
price価格表示0 / 1 / 指定なし (非表示/表示/テーマ設定に準拠)(空欄)
size表示サイズs / m (小/中)
※l(大)はありません
m
amazonAmazon商品検索ボタン表示0 / 1 (非表示/表示)1
rakuten楽天市場商品検索ボタン表示0 / 1 (非表示/表示)1
yahooYahoo!ショッピング商品検索ボタン表示0 / 1 (非表示/表示)1
catalogカタログ写真の表示0 / 1 / 指定なし (非表示/表示/テーマ設定に準拠)(空欄)
image_only画像のみ表示0 / 1 (通常表示/画像のみ表示)0
border枠線の表示0 / 1 (非表示/表示)1
logoロゴの表示0 / 1 / 指定なし (非表示/表示/テーマ設定に準拠)(空欄)
商品番号で指定する場合にセット使用出来るオプション
属性説明記述方法初期値
no楽天の商品番号(アイテムコードとは別物)*JAN / ISBN / UPC / EAN(空欄)
shop楽天のショップコードを指定するショップコード(空欄)
search検索ワードを指定してキーワード検索結果の中からソート順最上位商品を表示商品を特定出来るようなキーワード(空欄)
sort同じ商品番号の商品の中から指定したソート順を指定する
ソート順で最上位の商品が表示される
※デフォルトで料率が高い順に設定されています。

+付きは昇順(+を-に変更で降順)

  • +affiliateRate (アフィリエイト料率順)
  • +reviewCount (レビュー件数順)
  • +reviewAverage (レビュー平均順)
  • +itemPrice (価格順)
  • +updateTimestamp (商品更新日時順)
  • standard (楽天標準ソート順)
-affiliateRate

*どちらか一つのオプション入力必須

ボタン追加
属性説明記述方法初期値
btn1_urlボタン先頭に「詳細ページ」ボタンを追加
※btn1_tagが優先される
URL (例: “http://example.com”)(空欄)
btn1_text先頭に追加するボタンのキャプションを指定
※ボタンはbtn1_urlを設定する事で表示されます
自由なテキスト詳細ページ
btn1_tagタグをそのまま先頭にボタンとして追加する
(タグ改変禁止のアフィリエイトリンク等に)
‘HTML’
※シングルクォーテーションで囲む
(例: ‘<a href=”#”>Link</a>’)
(空欄)
btn2_urlボタン末尾に「詳細ページ」ボタンを追加
※btn2_tagが優先される
URL (例: “http://example.com”)(空欄)
btn2_text末尾に追加するボタンのキャプションを指定
※ボタンはbtn2_urlを設定する事で表示されます
自由なテキスト詳細ページ
btn2_tagタグをそのまま末尾にボタンとして追加する
(タグ改変禁止のアフィリエイトリンク等に)
‘HTML’
※シングルクォーテーションで囲む
(例: ‘<a href=”#”>Link</a>’)
(空欄)
btn3_urlボタン末尾に「詳細ページ」ボタンを追加
※btn3_tagが優先される
URL (例: “http://example.com”)(空欄)
btn3_text末尾に追加するボタンのキャプションを指定
※ボタンはbtn3_urlを設定する事で表示されます
自由なテキスト詳細ページ
btn3_tagタグをそのまま末尾にボタンとして追加する
(タグ改変禁止のアフィリエイトリンク等に)
‘HTML’
※シングルクォーテーションで囲む
(例: ‘<a href=”#”>Link</a>’)
(空欄)
メモ
使い方

装飾系

評価スター(レーティングスター)

数値での評価を星マークで表現できます。

ショートコード(基本形)
[star]
サンプル
[star rate="3.5"]
3.5
オプション
属性説明記述方法初期値
rate評価値0~100の数値(0.1刻み)5
max評価の最大値1~100の数値(整数)5
number数値の表示0 / 1 (非表示/表示)1
使い方

タイムライン(時系列・年表)

年表等に便利なタイムライン形式の表示が出来ます。

ショートコード(基本形)
[timeline][ti label="XXX"]ここに内容[/ti][/timeline]
サンプル
[timeline title="大見出し"]
[ti label="ラベル1" title="見出し1"]ここに内容1[/ti]
[ti label="ラベル2" title="見出し2"]ここに内容2[/ti]
[/timeline]
大見出し
  • ラベル1
    見出し1
    ここに内容1
  • ラベル2
    見出し2
    ここに内容2
オプション
コード属性説明記述方法初期値
[timeline]title大見出し自由なテキスト(空欄)
[ti]labelラベル自由なテキスト(空欄)
title見出し自由なテキスト(空欄)
メモ
ブロックエディターなら簡単にタイムラインを作成出来るようになりました(Cocoon 1.7.4.1~)
Cocoon Blocksの現在の対応状況 | Cocoon
使い方

便利系

ログインユーザーのみに表示する

ショートコードに囲まれた内容はログインユーザーのみに表示されます。

ショートコード(基本形)
[login_user_only msg="XXX"]ここに内容[/login_user_only]
サンプル
[login_user_only msg="あなたはログインユーザーではありませんね!"]
あなたはログインユーザーです
[/login_user_only]
オプション
属性説明記述方法初期値
msgログインしていないユーザー向けのメッセージを入力自由なテキスト(リンク可)
(例: “<a href=’#’>Link</a>”)
(空欄)
メモ
ショートコード内(ログインユーザー向けコンテンツ)はHTMLも利用できます。
使い方

(過去~)経過時間

設定したの日付からの経過時間(○年/○ヶ月/○日/○時間)を表示できます。

ショートコード(基本形)
[ago from="XXXX-XX-XX"]
サンプル
当ブログ爆誕から[ago from="2018-12-17"]経過
当ブログ爆誕から11ヶ月経過

 こんな書き方もできる

昨日の12:00から約[ago from="yesterday 12:00"]経過
昨日の12:00から約20時間経過
オプション
属性説明記述方法初期値
from基点となる日時(必須)あらゆる形式の日時表記
(例: “2018-12-17”)
(例: “2018/12/17”)
(例: “20181217”)
(空欄)
メモ
サーバやプラグインの高速化設定でページキャッシュを利用している場合キャッシュが作成された時点での経過時間が表示されます。
現在時間がUTC時間で計算されるため日本時間と9時間のズレが発生します。(確認:Cocoon 1.6.8)

functions.phpは編集前に必ずバックアップを取って保存してください。編集後エラーが出た場合バックアップファイルを元に復元してください。

Cocoonテーマlib/shortcodes.php内296行目付近にあるago_shortcode関数を、子テーマのfunctions.phpにコピペして、次のように変更すれば「(WordPress管理画面)設定>一般>タイムゾーン」設定に合った経過時間で計算されるようになります。

function ago_shortcode( $atts ){
  return get_human_time_diff_advance( $from, date_i18n('U') );
}
使い方

(過去~)経過年数

設定した日付からの経過年数を表示できます。年単位に絞った機能です。

ショートコード(基本形)
[yago from="XXXX-XX-XX"]
サンプル
1回目の東京オリンピックから[yago from="1964-10-10"]年経過
1回目の東京オリンピックから55年経過
オプション
属性説明記述方法初期値
from基点となる日付(必須)あらゆる形式の日時表記
(例: “1964-10-10”)
(例: “1964/10/10”)
(例: “19641010”)
(空欄)
unit単位自由なテキスト(例: “年”)(空欄)
メモ
サーバやプラグインの高速化設定でページキャッシュを利用している場合キャッシュが作成された時点での経過時間が表示されます。
使い方

(過去~)年齢

設定した日付からの経過年数(○歳)を表示できます。

ショートコード(基本形)
[age birth="XXXX-XX-XX"]
サンプル
Pepperくんは[age birth="2014-06-05"]!
Pepperくんは5歳!
オプション
属性説明記述方法初期値
birth基点となる日付(必須)*あらゆる形式の日時表記
(例: “2014-06-05”)
(例: “2014/06/05”)
(例: “20140605”)
(空欄)
frombirthと同等*(同上)(空欄)
unit単位自由なテキスト(例: “才”)
※非表示の場合空欄を設定(例: “”)

*どちらか一つのオプション入力必須

メモ
サーバやプラグインの高速化設定でページキャッシュを利用している場合キャッシュが作成された時点での経過時間が表示されます。
使い方

(~未来)カウントダウン

設定した日付までの日数を表示できます。当日以降の表示は0になります。

ショートコード(基本形)
[countdown to="XXXX-XX-XX"]
サンプル
ドラえもん誕生まであと[countdown to="2112-09-03"]日!
ドラえもん誕生まであと33870日!
オプション
属性説明記述方法初期値
to終点となる日付(必須)あらゆる形式の日時表記
(例: “2112-09-03”)
(例: “2112/09/03”)
(例: “21120903”)
(空欄)
unit単位自由なテキスト(例: “日”)(空欄)
メモ
サーバやプラグインの高速化設定でページキャッシュを利用している場合キャッシュが作成された時点での日にちが表示されます。
使い方

(おまけ)WordPress標準で使えるショートコード

長くなったのでページを分割しました。詳細は2ページ目をご覧ください。
ショートコード一覧
  1. gallery: ギャラリー表示
  2. caption: 画像にキャプションを付ける
  3. audio: オーディオ埋め込み
  4. video: 動画の埋め込み
  5. playlist: プレイリストを表示
  6. embed: 埋め込み

あとがき

以上、(多分)すべてのショートコード一覧でした。
オプションの説明や注意点は独自の解釈で掲載している部分もあるので間違いがあったら申し訳ない。

詳しい使い方はCocoon公式サイトをご確認くださいね!

まとめるの大変だった…多機能すぎるぜCocoon!

この記事に掲載されている内容について
  • ショートコードは現在Cocoon1.9.8までのものです(随時更新予定)
  • 当サイトはCSSカスタマイズしているためサンプルのデザインがデフォルトと異なる場合があります
  • コピペで使用する場合、HTMLタグも一緒にコピーされてしまい(例: [<span>shortcode</span>])上手くショートコードが使えない場合があります。コピーした文字を一旦メモ帳などに貼り付けてから改めてコピーすればプレーンテキストとしてコピペ出来るかと思います。

コメント

  1. Mr. Mike より:

    Hello こんにちは,

    I want to know how to do tab wrap.

    https://i.imgur.com/Ih74qEN.png

    Sorry, my Japanese is not good.

    Please teach me.

    • 草村草村 より:

      Hello こんにちは!

      そのタブ切り替えは独自にカスタマイズしたものです。
      The tab switching is customized by oneself.

      少し複雑なHTMLになりますが解説させていただきます。
      It will be a little complicated HTML, but I will explain.

      英語で伝える事が難しいため日本語の後にGoogle翻訳で翻訳した英語を記載します。
      As it is difficult to communicate in English, I will write English translated with Google Translate after Japanese.

      まずCocoonの子テーマのstyle.cssに以下のCSSをコピペしてください。
      First, copy and paste the following CSS into style.css of Cocoon Child theme.

      .tab-container {
          border-top: 3px solid #68a6c5;
      }
      .tab-content {
          height: 0;
          overflow: hidden;
          transition: opacity .8s;
          opacity: 0;
      }
      .tab-label {
          color: #fff;
          background: #cbcfd2;
          padding: 3px 12px;
          display: inline-block;
          font-size: 14px;
          position: relative;
          text-shadow: 0 -1px 0 rgba(0,0,0,.2);
      }
      .tab-label:before {
          content: '';
          border-top: 10px solid #fff;
          border-left: 10px solid rgba(0, 0, 0, .25);
          position: absolute;
          top: 0;
          right: 0;
          box-shadow: 0 0 1px rgba(255,255,255,.3);
      }
      .tab-label:hover:before {
          border: none;
      }
      .tab-checkbox:checked+.tab-label {
          background: #68a6c5;
      }
      .tab-checkbox:first-of-type:checked~.tab-container>.tab-content:first-of-type,
      .tab-checkbox:last-of-type:checked~.tab-container>.tab-content:last-of-type,
      .tab-checkbox:nth-of-type(2):checked~.tab-container>.tab-content:nth-child(2),
      .tab-checkbox:nth-of-type(3):checked~.tab-container>.tab-content:nth-child(3),
      .tab-checkbox:nth-of-type(4):checked~.tab-container>.tab-content:nth-child(4){
          height: auto;
          opacity: 1;
      }
      .tab-checkbox,
      .tab-label+br,
      .tab-wrap p:empty  {
          display: none;
      }

      1つのタブ切り替えに、5つまでのタブが使えます。
      Up to 5 tabs can be used in one tab switch.

      5つ以上利用する場合次のように数字を増やしたコードを追加する必要があります。
      If you use 5 or more, you need to add the code which increased the number as follows.

      .tab-checkbox:nth-of-type(4):checked~.tab-container>.tab-content:nth-child(4),
      .tab-checkbox:nth-of-type(5):checked~.tab-container>.tab-content:nth-child(5),
      .tab-checkbox:nth-of-type(6):checked~.tab-container>.tab-content:nth-child(6)

      次に、ブロックエディタの場合カスタムHTMLブロック(クラシックエディタの場合テキストモード)に、以下のHTMLをコピペして利用してください。
      Next, copy and use the following HTML in a custom HTML block (text mode in the classic editor) for block editor

      <div class="tab-wrap">
          <input id="TAB01-01" type="radio" name="TAB-01" class="tab-checkbox" checked="checked" /><label class="tab-label" for="TAB01-01">Button 1</label>
          <input id="TAB01-02" type="radio" name="TAB-01" class="tab-checkbox" /><label class="tab-label" for="TAB01-02">Button 2</label>
          <input id="TAB01-03" type="radio" name="TAB-01" class="tab-checkbox" /><label class="tab-label" for="TAB01-03">Button 3</label>
          <div class="tab-container">
              <div class="tab-content">
                  Contents 1
              </div>
              <div class="tab-content">
                  Contents 2
              </div>
              <div class="tab-content">
                  Contents 3
              </div>
          </div>
      </div>

      <input>name属性はすべて同じ名前にする必要があります。
      All “name attribute” of <input> must be the same name.

      一行の<input><label>のタグはid属性とfor属性を同じ名前にしてください。
      Make sure that the tags for <input> and <label> in one line have the same name for “id attribute” and “for attribute”.

      もし同じページ内で複数のタブ切り替えを利用したい場合は、name属性・id属性・for属性に別の名前を付ける必要があります。
      If you want to use multiple tab switching in the same page, you need to give different names to “name attribute”, “id attribute” and “for attribute”.

      例えば次のような感じです。
      For example, it looks like the following.

      <div class="tab-wrap">
          <input id="TAB02-01" type="radio" name="TAB-02" class="tab-checkbox" checked="checked" /><label class="tab-label" for="TAB02-01">Button 1</label>
          <input id="TAB02-02" type="radio" name="TAB-02" class="tab-checkbox" /><label class="tab-label" for="TAB02-02">Button 2</label>
          <input id="TAB02-03" type="radio" name="TAB-02" class="tab-checkbox" /><label class="tab-label" for="TAB02-03">Button 3</label>
          <div class="tab-container">
              <div class="tab-content">
                  Contents 1
              </div>
              <div class="tab-content">
                  Contents 2
              </div>
              <div class="tab-content">
                  Contents 3
              </div>
          </div>
      </div>

      コードの実行サンプルはこちらのページで公開しました。
      A code execution sample has been published on this page.
      https://codepen.io/kusamura_mono/pen/WqQEpz

      また、このタブ切り替えはこちらのページを参考にしてカスタマイズしたものです。
      In addition, this tab switching is customized referring to this page.
      https://bagelee.com/design/css/create_tabs_using_only_css/

      参考になれば幸いです。
      I’m glad if you can use it as a reference.

      コメントありがとうございました!
      Thank you for your comment!

      • Mr. Mike より:

        Hello 草村,

        Thank you for teaching me these! (。◕∀◕。)

        But I am currently experiencing problems

        I want to put the Tab-warp in the Sidebar (サイドバー).

        But it seem doesn't work

        The reason is that there will also be the same Tab-warp in .mobile-menu-buttons

        Do you have a solution to this problem?

        • 草村草村 より:

          こんにちは!

          片方のchecked属性が無効化されるのが原因みたいですね。

          CSSを以下のコードに変更すれば、初期状態で最後のタブをアクティブに出来ます。
          仕様上、最初のタブをアクティブにする事は難しいです。

          Hello!

          It seems that the cause is that one “checked attribute” is invalidated.

          You can activate the last tab by default by changing the CSS to the following code.
          By design, it is difficult to activate the first tab.

          .tab-container {
              border-top: 3px solid #68a6c5;
          }
          .tab-content,
          .tab-checkbox:checked~.tab-container>.tab-content:last-of-type {
              height: 0;
              overflow: hidden;
              transition: opacity .8s;
              opacity: 0;
          }
          .tab-label,
          .tab-checkbox:checked~.tab-checkbox:last-of-type+.tab-label {
              color: #fff;
              background: #cbcfd2;
              padding: 3px 12px;
              display: inline-block;
              font-size: 14px;
              position: relative;
              text-shadow: 0 -1px 0 rgba(0,0,0,.2);
          }
          .tab-label:before {
              content: '';
              border-top: 10px solid #fff;
              border-left: 10px solid rgba(0, 0, 0, .25);
              position: absolute;
              top: 0;
              right: 0;
              box-shadow: 0 0 1px rgba(255,255,255,.3);
          }
          .tab-label:hover:before {
              border: none;
          }
          .tab-checkbox:checked+.tab-label,
          .tab-checkbox:last-of-type+.tab-label {
              background: #68a6c5;
          }
          .tab-content:last-of-type,
          .tab-checkbox:first-of-type:checked~.tab-container>.tab-content:first-of-type,
          .tab-checkbox:last-of-type:checked~.tab-container>.tab-content:last-of-type,
          .tab-checkbox:nth-of-type(2):checked~.tab-container>.tab-content:nth-child(2),
          .tab-checkbox:nth-of-type(3):checked~.tab-container>.tab-content:nth-child(3),
          .tab-checkbox:nth-of-type(4):checked~.tab-container>.tab-content:nth-child(4){
              height: auto;
              opacity: 1;
          }
          .tab-checkbox,
          .tab-label+br,
          .tab-wrap p:empty  {
              display: none;
          }

          初期状態のアクティブなタブがサイドバーとモバイルスライドインで一致しなくなるので、HTMLのchecked="checked"は削除していいかもしれません。

          You may want to delete the HTML checked = "checked", as the initial active tab will not match in the sidebar and mobile slide-in.

          Sample : https://codepen.io/kusamura_mono/pen/OeMmBr

          ▼もし左のタブをアクティブに見せたい場合以下のコードを追加すれば、最後のタブを左に移動できます。
          ※調整が必要になるかもしれません。

          If you want the left tab to appear active, you can move the last tab to the left by adding the following code.
          *Adjustment may be necessary.

          .tab-wrap {
              display:flex;
              flex-wrap:wrap;
          }
          .tab-label {
              margin-right:.5em;
          }
          .tab-label:last-of-type {
              order:-1;
          }
          .tab-container {
              width:100%;
          }

          Sample : https://codepen.io/kusamura_mono/pen/PrZmxx

          お試しください。

          Please try it.

          • Mr. Mike より:

            Hello~ 草村,

            Thank you so much!! ヽ(●´∀`●)ノ

            According to your teaching, I successfully show the Tab-warp in sidebar (サイドバー).

            You can see the GIF right here:
            https://i.imgur.com/FISQhHn.gifv

            Very grateful, I think this can be used as a great tutorial posts.

            • 草村草村 より:

              こんにちは!

              上手くいったようでよかったです!
              質問やご報告を画像で伝えてくださったのでわかりやすかったです。

              お役に立てて嬉しいです。
              コメントありがとうございました!

              Hello!

              I’m glad it went well!
              It was easy to understand, as we communicated the questions and reports in the form of images.

              I’m glad to help you.
              Thank you for your comment!

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