タブ切り替えコンテンツパターンの使い方

タブ切り替えコンテンツパターンの解説ページです。

タブ切り替えコンテンツの動作デモ

このパターンを利用すると、以下のように、タブで表示切替ができるコンテンツを簡単に作ることができます。

タブ切り替えコンテンツの使用方法

機能の有効化

余分なスタイルコードやスクリプトを出力しないよう、設定画面にスイッチを設けています。

タブ切り替えコンテンツ機能を使用する場合は、メニューから「HA Utilitiy」→「追加コンテンツ」を開き「タブ切り替えパターンを使う」を有効にしてください。

パターンの挿入とコンテンツの編集

機能を有効化後、投稿や固定ページの編集画面を開きます。

ブロックの追加→「すべて表示」→「パターン」タブをクリックし、「HAUブロックパターン」から「タブコンテンツ」をクリックしてパターンを挿入します。

以下のようなパターンが挿入されます（編集画面上ではタブ切り替えとして表示されていませんが、表示画面側ではタブ表示になります）。

すべてWordPress標準のブロックで作成していますので、以下のようにして編集を行ってください。

一番上にある「タブ1「#tab1」」「タブ2「#tab2」」はタブ見出しとして表示される部分です。自由に文字列を変更してください。

リストの文字列をリンクにし、それぞれリンク先URLに#tab1 #tab2を指定してください

「タブコンテンツ1」という見出しから「同一のHTMLアンカーがページ内に複数あっても動作はしますが、HTML上好ましい記述ではなくSEOに悪影響が起こりますので、HTMLアンカーは必ず一意のものにしてください」という段落タブまでが「タブ1」をクリックした時に表示される内容です。

画像やリスト、段落など自由にブロックを追加して、最後にサンプル表示させているブロックをすべて削除してください。

「タブコンテンツ2」も同様です。

「タブ1」「タブ2」はそれぞれ別にグループ化しています。先にサンプルブロックを削除してしまうと、グループ化している部分が見づらくなり、不具合が出ることがありますので、作プルブロックの間のどこかに必ず何かのブロックを追加してからサンプルは削除してください

編集が終わったらプレビューなどして確認をしてください。

タブとタブコンテンツを追加したい場合は

パターンから挿入したものは、2つのタブを持つ形にしています。サンプルブロックでも解説していますが、以下のようにすることで、タブとタブコンテンツを任意に追加することができます。

1. タブコンテンツ2のグループを複製し、HTMLアンカーに固有の文字列を指定します
2. 本コンテンツ上部にあるリストブロックのリスト行を追加し、1のリンクを設定します

編集画面上部の「三」アイコンをクリックしてブロックの一覧を表示させると、タブコンテンツ2のグループを複製が簡単にできます。

同一ページ内に別のタブコンテンツを追加したい場合は

このパターンは、HTML上で「tab1」「tab2」というIDを持つ場所をタブのリンクをクリックすることで表示／非表示にするように機能させています。

通常同一ページ内にあるIDは一意（ページ内で重複するものがない）であることが基本であり、重複していると検索エンジンがきちんとコンテンツを認識できないため、ページ内へ別のタブコンテンツパターンを挿入した場合は以下のようにしてIDの変更を行ってください。

• パターンからタブコンテンツを挿入します
• タブコンテンツ1のHTMLアンカーをページ内で一意のものへ変更します
• タブコンテンツ2のHTMLアンカーをページ内で一意のものへ変更します
• タブコンテンツのHTMLアンカーに応じて上部リストのリンク先を変更します

タブなどの色の変更、タブの表示方法の設定

色の変更方法

本コンテンツの色はサイト内共通の設定として設定画面で調整できるようにしています。

さらに以下のフィルターを使うことで、設定画面よりも優先して色の変更を適用できるようにしています。

function tab_contents_color_change_filter(){
	$variables['text-color'] = '#333';//タブの文字色
	$variables['tab-bg-color'] = '#fff';//タブの背景色
	$variables['tab-border-bolor'] = '#ccc';//枠線色
	$variables['tab-selected-text-color'] = '#fff';//選択時の文字色
	$variables['tab-selected-bg-color'] = '#000';//選択時のタブ背景色

	return $variables;
}
add_filter('haup_tab_content_change_color','tab_contents_color_change_filter');

タブ表示の変更方法

設定画面で「タブを等幅にする」を有効にすると、タブをコンテンツ幅いっぱいまで広げ、内部のタブを同じ幅にして表示させることができます。

このスイッチで追加されるのは、後述するスタイルコードにあるリスト項目に対する「flex:1」の指定だけなので、全体はタブ内の文字列に合わせるようにした上で、特定のタブコンテンツだけタブ幅をコンテンツ幅いっぱいにしたい場合には、「タブを等幅にする」をオフにしたままにして、以下のようにします。

1. 挿入したタブ切り替えコンテンツパターンの一番親グループに特定のHTMLアンカーを追加する
2. CSSを追加してそのタブ切り替えコンテンツのタブのみをコンテンツ幅いっぱいにする

例えば、一番親グループに「tab-fit」というHTMLアンカーを設定した場合には以下のスタイルコードをテーマのstyle.cssへ追加します（追加後キャッシュをクリアしても効かない場合は!importantを付けます）

#tab-fit .ha-tab-links li {
    flex: 1;
}