wordpress プラグイン Tabby Responsive Tabs

画面サイズによってタブがアコーディオンに変わるプラグイン

今までは、プラグイン「Shortcodes Ultimate」のタブを利用していたが、タブの数が多いとスマホ表示時にタブヘッダーが上部に集まってしまい、切り替わるコンテンツが見えないと言う事態に。

そこで、タブを画面サイズによってアコーディオンにしてくれるプラグインを探すが、ネットではjQueryのプラグインの記事が多い。
wordpress.ORG日本語サイトでプラグインを探してみる。

使えそうなのがいくつかあった。

Responsive Tabs

Tab setsメニューからタブグループを作りショートコードで実装。画面幅が狭くなったときは、タブが上部でメニューになりプルダウンする。
タブヘッダと罫線の色を指定可能。
コンテンツ部分はボックスで囲まない。

Tabby Responsive Tabs

設定無しショートコードで実装。画面幅が狭くなったときはアコーディオン。有料でカスタマイズ用のプラグインがある。
767pxで表示が切り替わる。

［tabby title=タイトル1］
コンテンツ 1
［tabby title=タイトル2］
コンテンツ 2
［tabbyending］←最後に挿入

Tabs

HTML＆CSS3のタブ
Tabsメニューからタブスタイル、コンテンツを設定してショートコードで実装。
タブスタイルでタブの設定、タブコンテンツで各タブのタイトル、コンテンツ設定。
※使用テーマ「border」では機能しなかった。

いくつか試して、「Tabby Responsive Tabs」を使用する事に。

Tabby Responsive Tabsのcssを変更。

文字が大きすぎたのを修正。子テーマのcssに記述しても反映されない。プラグインのcssが優先されている。

調べてみると、cssで優先させる要素に「!important」を追加すると優先されるらしい。

参考サイト

プラグインのcssがテーマのcssより優先される場合などに便利。

「Tabby Responsive Tabs」のスタイルを変更する。

/* ---------------------------------------------
Tabby レスポンシブル タブの設定
------------------------------------------------ */
.responsive-tabs .responsive-tabs__list__item {
background: transparent;
border: 1px solid transparent;
border-bottom: none;
-webkit-border-top-left-radius: 5px !important;
-webkit-border-top-right-radius: 5px !important;
-moz-border-radius-topleft: 5px !important;
-moz-border-radius-topright: 5px !important;
border-top-left-radius: 5px !important;
border-top-right-radius: 5px !important;
color: #fff;
font-size: 14px !important;/* 変更 */
line-height: 19px !important;/* 変更 */
text-transform: inherit;
margin: 1px 1px 0 0 !important;
padding: 5px 7px 5px !important;/* 変更 */
}
.responsive-tabs .responsive-tabs__panel {
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px !important;
border-radius: 10px !important;
-webkit-border-top-left-radius: 10px !important;
-moz-border-radius-topleft: 10px !important;
border-top-left-radius: 10px !important;
}

768pxで表示がアコーディオンになるように本体のcssも変更した。