【WordPress】プラグインなしでタブを実装しよう

サイトには、サイトマップが必要として、以前サイトマップの作り方をご紹介しました。

当サイトでは下記のようなHTML版のサイトマップを作成しています。

SITEMAP

固定 BLOG WordPress Word PowerPoint Excel IT Passport LANGUAGE RECOMMEND GALLERY ...

今回は、サイトマップ作成時に利用した、タブの作成方法をご紹介したいと思います。

contents

タブとは
サイトマップにタブを利用した理由
参考サイト
編集箇所
記載コード
コードの意味
まとめ

タブとは

タブは、複数のものを、目的によってグループに分け、

目的を切り替えるときにクリックするパーツのことです。

ExcelやWord、Wikipedia、chromeなどのブラウザなどでも使われていますね。

Excel

Wikipedia

chrome

サイトマップにタブを利用した理由

サイトマップは、サイトに掲載しているすべてのページを一覧化したものです。

カテゴリが1つだけだったり、記事が少ないうちは、1つのページにすべてのページを載せても目的の記事を探すのは容易だと思います。

では、記事が大量にあるサイトではどうでしょうか？

1つのページにすべてのページを載せると、見づらくなってしまいますね。

いかに見やすい、探しやすいサイトマップにするか、

それを考えていきついたのがタブでした。

参考サイト

参考にさせていただいたのは、

集客型ホームページ制作　FANさんの「【WordPressのタブの作り方】jQueryを使い切り替え機能をコピペで簡単実装する方法」です。

https://web-fan.jp/wordpress/tab/

色合いも当サイトにぴったりだったため、そのまま使わせていただきました。

にゃこ

FANさん、ありがとうございます！

編集箇所

タブを作るためにコードを書く場所は以下の3か所です。

Cocoonを利用している場合は、以下に書くことができます。

場所	コード種類	説明
固定ページ	HTML	タブ、サイトマップ用のコードを入力する
固定ページのカスタムCSS	CSS	タブの見た目を調整するコードを入力する
固定ページのカスタム JavaScript	JavaScript	タブクリック時の挙動を設定するコードを入力する

使われているテーマや、サイトの作成方針によって記載場所は変わります。
CSS、JavaScriptは、外観＞テーマエディター＞style.css、javascript.jsに記載することもできます。
当サイトでは、現時点で、タブはサイトマップのページでのみ利用予定のため、サイトマップ用のページでのみ読み込みをするようにしています。

記載コード

それぞれに記載するコードは以下の通りです。

HTML

固定ページで新規作成をクリックし、

タイトルに「サイトマップ」などを書いたうえで、本文に以下を記入します。

＜div class="tab-wrap"＞
 ＜div class="tab-group"＞
    ＜div class="tab is-active"＞タブ名1＜/div＞
    ＜div class="tab"＞タブ名2＜/div＞
    ＜div class="tab"＞タブ名3＜/div＞
 ＜/div＞
 ＜div class="panel-group"＞
    ＜div class="panel is-show"＞
	タブ名1の内容
    ＜/div＞
    ＜div class="panel"＞
	 タブ名2の内容
    ＜/div＞
    ＜div class="panel"＞
	 タブ名3の内容
    ＜/div＞
 ＜/div＞
＜/div＞

· ＜＞は半角に直してください。
· 赤文字部分を変更して記入してください。

JavaScript

Cocoonでは、本文下にカスタムJavaScript欄があります。

その欄に以下を記入します。

jQuery(function($){
  $('.tab').on('click',function(){
    var idx=$('.tab').index(this);
    $(this).addClass('is-active').siblings('.tab').removeClass('is-active');
    $(this).closest('.tab-group').next('.panel-group').find('.panel').removeClass('is-show');
    $('.panel').eq(idx).addClass('is-show');
  });
});

カスタムJavaScriptの入力欄がない場合、
画面上部の表示オプションを開き、
「カスタムJavaScript」のチェックをONにしてください。

CSS

Cocoonでは、本文下にカスタムCSS欄があります。

その欄に以下を記入します。

/*--------------------------------------
  tab
--------------------------------------*/
.tab-wrap{
    margin-bottom: 40px;
}
.tab-group{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-end;
}
.tab{
    flex-grow: 1;
    background: #58A9EF;
    border-radius: 10px 10px 0 0;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    margin: 0 5px;
    padding: 14px 0 12px;
    text-align: center;
    transition: 1s;
    vertical-align: bottom;
}
.panel-group{
    min-height:100px;
    border:solid 1px #CCC;
    border-top: 8px solid #C8E4FF;
    padding: 10px;
}
.panel{
    display:none;
}
.tab.is-active{
    color:#FFF;
    transition: 1s;
    opacity: 0.6;
    padding-bottom: 20px;
}
.panel.is-show{
    display:block;
}

@media screen and (max-width:480px) { 
.tab{
    padding: 10px 0 7px;
}
.tab.is-active{
    padding-bottom: 15px;
}
}

カスタムCSSの入力欄がない場合、
画面上部の表示オプションを開き、
「カスタムCSSｘ」のチェックをONにしてください。

コードの意味

記載したコードそれぞれの意味は以下とおりです。

ぜひ、書くだけでなく、意味も理解して使ってくださいね✨

HTML

<!--タブ全体を囲むクラス-->
＜div class="tab-wrap"＞
 <!--すべてのタブの名前を定義するクラス。中にタブ1つ1つの名前を定義する-->
 ＜div class="tab-group"＞
　　<!--タブの名前を定義するクラス。「is-active」は初期表示時に選択しているタブ-->
    ＜div class="tab is-active"＞タブ名1＜/div＞
    ＜div class="tab"＞タブ名2＜/div＞
    ＜div class="tab"＞タブ名3＜/div＞
 ＜/div＞
 <!--すべてのタブの中身を定義するクラス。中にタブ1つ1つの中身を定義する-->
 ＜div class="panel-group"＞
　　<!--タブの中身を定義するクラス。「is-show」は初期表示時に表示するタブの中身-->
    ＜div class="panel is-show"＞
	タブ名1の内容
    ＜/div＞
    ＜div class="panel"＞
	 タブ名2の内容
    ＜/div＞
    ＜div class="panel"＞
	 タブ名3の内容
    ＜/div＞
 ＜/div＞
＜/div＞

JavaScript

jQuery(function($){
  // 「tab」クラスをクリックした場合の挙動
  $('.tab').on('click',function(){

    // クリックした要素が何番目かを定数に入れる
    var idx=$('.tab').index(this);

    // (this).addClass('is-active')で、「is-active」クラスをクリックした要素に付与し、
    // siblings('.tab').removeClass('is-active')で、その他の兄弟要素からは「is-active」クラスを取り除く
    // これにより、今押されているタブがどれかがわかるようになる。
    $(this).addClass('is-active').siblings('.tab').removeClass('is-active'); 

    // 「tab-group」に一致する箇所を探し、
    // その次の「panel-group」要素を持っている要素から「panel」クラスを探し、
    // 「is-show」クラスを取り除く
    $(this).closest('.tab-group').next('.panel-group').find('.panel').removeClass('is-show');

    // クリックした要素に一致する「panel」クラスに「is-show」クラスを付与する
    // これにより、押されたタブの内容が表示されるようになる。
    $('.panel').eq(idx).addClass('is-show');
  });
});

CSS

タブ全体

/* タブ全体の下部の余白を40pxにする*/
.tab-wrap{
    margin-bottom: 40px;
}

タブの名前部分の表示指定

/* タブの名前定義欄の表示設定 */
.tab-group{
    /* 要素を並列に表示する */
    display: flex;

    /* タブの名前を画面の左右中央に配置する */
    justify-content: center;

    /* タブ要素が多い場合に、 　　　　　　　　　　　　　　　　　　　　　*/
    /* 名前の定義欄の中で左上から右下に向かってタブを折り返して表示する */
    flex-wrap: wrap;

    /* 要素を下部の横軸に合わせて、タブ要素を下部に表示する */
    align-items: flex-end;
}

上記により、次のように表示されます。

タブの名前部分の見た目指定

/* タブの名前定義欄の見た目設定 */
.tab{
 }

    /* タブの横幅を指定した比率に応じて伸ばす。0の場合伸ばさずに表示する */
    flex-grow: 1;

0を指定した場合

1を指定した場合
（比率は、折り返しの指定やその他プロパティにより長さが異なる）

    /* タブの背景色を指定 */
    background: #58A9EF;

    /* タブの文字色を指定 */
    color: #fff;

色は下記等をご参考ください。

HTML,CSS　カラーコード一覧表　｜　背景色や文字色の設定

HTML,CSS　500色のカラーコード一覧表。W3C指定16色やセーフカラー216色など、ホームページのフォントカラーや背景色。カラーコード一覧表

    /* タブの丸みを指定　上部左右の角を10px分まるめる */
    border-radius: 10px 10px 0 0;

    /* タブ上でマウスオーバーしたときのマウスの形 */
    /* pointerは手の形になる */
    cursor: pointer;

その他のマウスの形を指定する場合は、以下をご参照ください。

cursor - CSS: カスケーディングスタイルシート | MDN

cursor は CSS のプロパティで、マウスポインターが要素の上にいるときに表示されるマウスカーソルを設定します。

    /* タブが横並び、かつ文字列に合わせたサイズになる */
    display: inline-block;

    /* タブ内の文字の大きさを指定 */
    font-size: 13px;

    /* タブ内の文字を太字に指定 */
    font-weight: bold;

    /* タブ周辺の幅を指定 */
    /* タブ同士の左右の隙間を指定 */
    margin: 0 5px;
    
    /* タブ内文字の上下の余白を指定 */
    padding: 14px 0 12px;

    /* 文字を中央揃えにする */
    text-align: center;

    /* クリック時の動作時間を指定する */
    transition: 1s;

    /* 要素を下端揃えにする */
    vertical-align: bottom;

タブの中身部分外枠の表示

/* タブの中身枠の定義 */
.panel-group{

    /* 要素の高さの最小値 */
    min-height:100px;

    /* 枠線全体の定義（種類、太さ、色） */
    border:solid 1px #CCC;

    /* 枠線上部の定義（種類、太さ、色） */
    border-top: 8px solid #C8E4FF;

    /* 枠線内文字周辺の余白（下部ご参照） */
    padding: 10px;
}

タブの中身の設定

/* タブの中身の設定 */
.panel{
    /* タブの中身を非表示にする */
    display:none;
}

上記を設定していないと、タブの中身がすべて表示されます。

指定すると、タブの中身が見えなくなります。

アクティブタブの設定

/* アクティブタブの設定 */
.tab.is-active{
    /* 背景色の指定 */
    color:#FFF;

    /* クリック時の動作時間を指定する */
    transition: 1s;

    /* 透明度を指定する */
    opacity: 0.6;

    /* 下部の空白を指定                        */
    /* これにより指定したタブが少し浮いて見える */
    padding-bottom: 20px;
}

アクティブタブの中身の設定

/* アクティブタブの中身の設定 */
.panel.is-show{

    /* 要素の前後に改行を入れる */
    display:block;
}

アクティブタブの中身の設定（スマホ用）

/*　画面サイズが480pxまでは以下の設定にする　*/
@media screen and (max-width:480px) { 

 /* タブの名前定義欄の見た目設定 */
.tab{

    /* タブ内文字の余白を指定 */
    padding: 10px 0 7px;
}

 /* アクティブタブの設定 */
.tab.is-active{

    /* 下部の空白を指定 */
    /* これにより指定したタブが少し浮いて見える */
    padding-bottom: 15px;
}
}

まとめ

コードの意味がわかれば、目的に応じて変更する場所がわかりますね。

色や透明度、丸みなどを変更するだけでも印象の違うタブになります。

いろいろ変更して、ご自身の好きなタブにしてみてくださいね。