投稿でタブ表示やアコーディオン表示ができるプラグイン「Squelch Tabs and Accordions Shortcodes」
なかなか長い名前のプラグインを紹介します。
WordPressで固定ページや投稿を作っていて、筆が乗ってしまって何千文字となってしまうことないですか？？
書いた本人は内容が分かっているので長い文章でも大丈夫ですが、閲覧者にとってはちょっとくたびれますね。時には開いてざーーっと字が並んでいるだけで閉じてしまう方もいるかもしれません。
そこで見やすくするために行う工夫としてあるのが以下の効果
アコーディオン表示
クリックすると内容を詳しく表示し、普段は閉じているという動作をします
タブ表示
横に並ぶタブをクリックすると相応の内容を表示するという動作をします。ちょうどYahooや楽天Infoseekなどのトップページにあるニュースタブのようなものです
もくじ・さくいん表示
このプラグインではできませんが、有名なプラグインに「Table Of Content Plus」などがあります。ウィキペディアの先頭にあるもくじのことです。クリックすると該当の場所へジャンプするような動作をします。
を使うのがサイトでは効果的かと思います。しかし個人的にはもくじ方式だと必要なところだけぱっと見て去っていく感じがして（すみませんそんなことしてます私）あまり作り手としては好きな方法ではありません。
そこであと２つの手法となるのですが、作るページによってはどちらかを使ったり併用したりしたいもの（欲張りです）。
それを実現してくれるプラグインがありました。それが今回紹介する「Squelch Tabs and Accordions Shortcodes」です。
このプラグインの表示デモはこちらでご覧いただけます。
【Squelch Tabs and Accordions Shortcodes】プラグインの基本的な機能・できること
タブやアコーディオン表示をするプラグインを使用する際の作業で困るのは
現在の投稿内容などをタブ化するため新たにコンテンツを作る必要がある
タブページ作成プラグインで一番多いのは、タブ表示するためのコンテンツ（タブのまとまり、タブごとの内容）を作ってショートコードで固定ページや投稿へ埋め込むというもの。これだと数の少ない固定ページでは有効ですが、たくさんある投稿１つ１つに対してタブコンテンツを別に作るというのはナンセンスな感じがします
同じページ中に複数のタブやアコーディオンコンテンツが作れない
「これつかえるじゃん！（なぜかじゃん言葉）」と思って作ってみたら、実は１つのページや投稿に１つのタブコンテンツしか追加できない（動作しない）ものが多いです
タブだけ、アコーディオンコンテンツだけといった単独のものがほとんど
それぞれ単独の機能を持つものはたくさんありますが、両方やろうと思うと複数のプラグインが必要。
１に関しては詳しく後述しますがタブ化したい文章をショートコードで挟んでいくと勝手に？タブ化してくれます
２に関しては複数のタブ・アコーディオンコンテンツを挿入してみたところきちんと動作しました
３に関しては言うまでもなく、ショートコードの書き方によってどちらも表示できます
特に１に関しては今までの固定ページや投稿についても簡単にタブやアコーディオン化できるので他にはない便利さを体感できると思います。
ただ１つこのプラグインで残念なところがあります。それは、タブやアコーディオンのデザイン変更はCSSを編集して行う必要があること。要するにデザインに関する設定メニューがないんですね。でも、CSSの編集が分かる方なら使用に関して全く問題はないと思います。
本記事を参考にWordPressサイトへプラグインの導入を検討される方へ
WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。
さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。
そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。
本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。
- テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能などが異なる場合があります。
※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。 - プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
- このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
- プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）
【Squelch Tabs and Accordions Shortcodes】プラグインの設定画面や表示の日本語化と翻訳
使用に関してはショートコードを使い分けるだけですから、日本語化の必要はありません
【Squelch Tabs and Accordions Shortcodes】プラグインのインストールと設定
インストール方法
インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。
WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。
ダッシュボードの「外観」→「Tabs and Accordions」から表示スキン（パターン）の設定ができます。
たくさんのデザインパターンから選択できますのでサイトにあったものを選んでください。
その他の設定はありません。
【Squelch Tabs and Accordions Shortcodes】プラグインの基本的な使い方
投稿や固定ページでタブやアコーディオンを使いたい場所でショートコードを使用します。
タブ表示の基本ショートコード
[tabs title="タブのタイトル" disabled="false" collapsible="true" active="0" event="click"][tab title="Tab 0"]Tab 0 content[/tab][/tabs]必要に応じて[tabs title=”タブのタイトル” disabled=”false” collapsible=”true” active=”0″ event=”click”][/tabs]の間に[tab title=”Tab 0″]Tab 0 content[/tab]を加えていけばタブは無限に増やせます
アコーディオン表示の基本ショートコード
[accordions title="" disabled="false" active="0" autoheight="false" collapsible="true"] [accordion title="Pane 0"]Accordion pane 0 content[/accordion] [/accordions]アコーディオン部分の増やし方はタブと同じです
トグル表示の基本ショートコード
[toggles title="" speed="800" active="0,2" theme="jqueryui"] [toggle title="Pane 0"]Toggle pane 0 content[/toggle] [/toggles]アコーディオン（縦）の基本ショートコード
[haccordions title="" width="300" height="150" hwidth="28" activateon="click" active="0" speed="800" autoplay="false" pauseonhover="true" cyclespeed="6000" theme="jqueryui" rounded="false" enumerate="false"] [haccordion title="Pane 0"]Accordion pane 0 content[/haccordion] [/haccordions]です。
【Squelch Tabs and Accordions Shortcodes】プラグインの便利な使い方・カスタマイズ方法など
より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない事柄などを紹介します。
デザインの変更方法
プラグイン作者のサイトではデザインを施したスキンを作ってそれを適用するように書かれていますので、ちょっと頑張って設定してみましょう（結局CSSでごちゃごちゃ考えるより簡単でした）
※ただし、Google Chromeなどの同時翻訳機能のあるブラウザでないと英語で対応になりますから解読が大変かもしれません
下のリンクからタブやアコーディオンで使うデザインテーマを作ります
- 開いたら、左画面から「ギャラリー」を選んで一番自分の目指すデザインに近いものを選び「編集」をクリックします（一から作るよりもあるものを編集した方が簡単です）
- 画面の左で設定した内容が右にプレビュー表示されるようになっていますから、どんどんカスタマイズします
※設定したら右のプレビュー画面の余白でクリックしてしばらく待つと画面が変わります
- 編集が終わったら、「テーマをダウンロード」をクリックします
- 次の画面でバージョンを１．９．２にして、あとは下までスクロールして「ダウンロード」をクリックします
- ファイル名は替えてもそのままでもOKです。デスクトップなどにダウンロードしたら解凍します
- 解凍したフォルダをFTPでサイトの「wp content」→「uploads」へアップロードします
- WordPressのダッシュボードへ行き、「外観」→「Tabs and Accordions」から表示スキン（パターン）を開くと作成したテーマが選択できるようになっているのでクリックして保存すれば完了です。
ボタンなどの動作がいろいろありますから、この方法の方が単純で簡単ですヨ。あとは細かい調整をCSSで行って完成です。このテーマはすべてのタブやアコーディオンへ適用されますから便利ですね（当たり前か・・・）。
独自にCSSを適用するときには前述したスキンで「No jQuery UI theme」を選択して行います（これ以外のスキンでもカスタマイズはできますが、余分なデザインが適用されていないのでカスタマイズしやすいと思います）
デベロッパーツールを使えばどこにどのCSSが割り当てられているかはわかると思いますので敢えて紹介する必要はないと思いますので自身でカスタマイズしてください。
ちなみに代表的なCSSセレクタはこちらの作者サイトで掲載されています
ちょっとした工夫
タブ化したりすることで長い文章も見やすくまとまるようになるこのプラグインですが、タブ表示の際閲覧する側からするとちょっと使いにくいところがあります。それは、別のタブを見たいときにわざわざマウスなどでスクロールしなければならないということ。作成者は分かって作っているから気づきにくいのですが、ユーザーの側に立って実際に使ってみると気づく部分です。
できると便利なのが次のタブの内容を続けて表示することですね。ページ内リンクを使ってできないことはないのですが、ジャンプさせてみるとタブの内容が先頭に来てしまってタブが見えないので何となく分かりづらい印象です。
ではどうするか？？ということになるのですが、単純にタブの上に来る見出し（ショートコードの中の見出し）をなしにして、タブ表示の上に見出しを設け、そこにリンクターゲットを設けてジャンプさせる方法。これだと見出しが先頭に来るのでその下にあるタブの内容も表示されて具合がいいようです。実際にここをクリックするとタブの上まで戻りますのでお試しあれ。
ページ内リンク？？という方のために簡単に説明すると
例えば「<h2>見出し</h2>」の下にタブ表示をしている前提ではこのタグを
「<h2 id=”tababove”>見出し</h2>」のようにid属性を付けておきます。
そして各タブの内容の一番下に
<a href=”#tabtop”>もどる</a>
というリンクを付けておくと、この「もどる」という文字をクリックすればタブの上の部分まで戻ることができます。
全部のタブの最後にこれを付けておくと、訪問してくれた方が迷わずに済むと思いますよ。ちょっとよくないですか？？
いちばんやさしい WordPress 入門教室
(2021年11月29日 09:09 GMT +09:00 時点 - 追加情報商品価格と取扱状況は記載された日時の時点で正確で、また常に変動します。Amazon のサイトに表示された価格と取扱状況の情報は、この商品が購入されたその時のものが適用されます。)
サイトへの支援をお願いします
最後までお読みいただきありがとうございました。本記事の内容がお役に立てましたら幸いです。
今後もよりよい情報を提供し続けることができるよう、投げ銭によるサイトへの支援、およびSNSによる拡散をお願いします
作者: ひまあーと（管理人）
☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
年齢：40代 趣味／園芸・ペット・卓球
