投稿でタブ表示やアコーディオン表示ができるプラグイン「Squelch Tabs and Accordions Shortcodes」
またなかなか長い名前のプラグインを紹介します。
WordPressで固定ページや投稿を作っていて、筆が乗ってしまって何千文字となってしまうことないですか？？
書いた本人は内容が分かっているので長い文章でも大丈夫ですが、閲覧者にとってはちょっとくたびれますね。時には開いてざーーっと字が並んでいるだけで閉じてしまう方もいるかもしれません。
そこで見やすくするために行う工夫としてあるのが以下の効果
- アコーディオン表示
- タブ表示
- もくじ・さくいん表示
クリックすると内容を詳しく表示し、普段は閉じているという動作をします
横に並ぶタブをクリックすると相応の内容を表示するという動作をします。ちょうどYahooや楽天Infoseekなどのトップページにあるニュースタブのようなものです
このプラグインではできませんが、有名なプラグインに「Table Of Content Plus」などがあります。ウィキペディアの先頭にあるもくじのことです。クリックすると該当の場所へジャンプするような動作をします。
を使うのがサイトでは効果的かと思います。しかし個人的にはもくじ方式だと必要なところだけぱっと見て去っていく感じがして（すみませんそんなことしてます私）あまり作り手としては好きな方法ではありません。
そこであと２つの手法となるのですが、作るページによってはどちらかを使ったり併用したりしたいもの（欲張りです）。
それを実現してくれるプラグインがありました。それが今回紹介する「Squelch Tabs and Accordions Shortcodes」です。
このプラグインの表示デモは
でご覧いただけます。
【Squelch Tabs and Accordions Shortcodes】プラグインの基本的な機能・できること
タブやアコーディオン表示をするプラグインを使用する際の作業で困るのは
- 現在の投稿内容などをタブ化するため新たにコンテンツを作る必要がある
- 同じページ中に複数のタブやアコーディオンコンテンツが作れない
- タブだけ、アコーディオンコンテンツだけといった単独のものがほとんど
タブページ作成プラグインで一番多いのは、タブ表示するためのコンテンツ（タブのまとまり、タブごとの内容）を作ってショートコードで固定ページや投稿へ埋め込むというもの。これだと数の少ない固定ページでは有効ですが、たくさんある投稿１つ１つに対してタブコンテンツを別に作るというのはナンセンスな感じがします
「これつかえるじゃん！（なぜかじゃん言葉）」と思って作ってみたら、実は１つのページや投稿に１つのタブコンテンツしか追加できない（動作しない）ものが多いです
それぞれ単独の機能を持つものはたくさんありますが、両方やろうと思うと複数のプラグインが必要。
１に関しては詳しく後述しますがタブ化したい文章をショートコードで挟んでいくと勝手に？タブ化してくれます
２に関しては複数のタブ・アコーディオンコンテンツを挿入してみたところきちんと動作しました
３に関しては言うまでもなく、ショートコードの書き方によってどちらも表示できます
特に１に関しては今までの固定ページや投稿についても簡単にタブやアコーディオン化できるので他にはない便利さを体感できると思います。
ただ１つこのプラグインで残念なところがあります。それは、タブやアコーディオンのデザイン変更はCSSを編集して行う必要があること。要するにデザインに関する設定メニューがないんですね。でも、CSSの編集が分かる方なら使用に関して全く問題はないと思います。
この記事を参考にプラグインの導入をする際以下に留意ください
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
- すべての環境で動作するとは限りません
- できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
- 有料版と無料版がある場合、テストは原則無料版のみで実施しています
- テスト環境については本文中に記載しています
- 使用方法で紹介しているショートコードやコードなどをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「"」「'」などの記号を入力し直してみてください。
【Squelch Tabs and Accordions Shortcodes】プラグインの設定画面や表示の日本語化と翻訳
使用に関してはショートコードを使い分けるだけですから、日本語化の必要はありません
【Squelch Tabs and Accordions Shortcodes】プラグインのインストールと設定
インストール方法
インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、ページ先頭の画像をクリックして表示される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」から表示スキン（パターン）を開くと作成したテーマが選択できるようになっているのでクリックして保存すれば完了です。
jqueryui.com
ThemeRoller | jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.
※設定したら右のプレビュー画面の余白でクリックしてしばらく待つと画面が変わります
ボタンなどの動作がいろいろありますから、この方法の方が単純で簡単ですヨ。あとは細かい調整をCSSで行って完成です。このテーマはすべてのタブやアコーディオンへ適用されますから便利ですね（当たり前か・・・）。
独自にCSSを適用するときには前述したスキンで「No jQuery UI theme」を選択して行います（これ以外のスキンでもカスタマイズはできますが、余分なデザインが適用されていないのでカスタマイズしやすいと思います）
デベロッパーツールを使えばどこにどのCSSが割り当てられているかはわかると思いますので敢えて紹介する必要はないと思いますので自身でカスタマイズしてください。
ちなみに代表的なCSSセレクタはこちらの作者サイトで掲載されています
ちょっとした工夫
タブ化したりすることで長い文章も見やすくまとまるようになるこのプラグインですが、タブ表示の際閲覧する側からするとちょっと使いにくいところがあります。それは、別のタブを見たいときにわざわざマウスなどでスクロールしなければならないということ。作成者は分かって作っているから気づきにくいのですが、ユーザーの側に立って実際に使ってみると気づく部分です。
できると便利なのが次のタブの内容を続けて表示することですね。ページ内リンクを使ってできないことはないのですが、ジャンプさせてみるとタブの内容が先頭に来てしまってタブが見えないので何となく分かりづらい印象です。
ではどうするか？？ということになるのですが、単純にタブの上に来る見出し（ショートコードの中の見出し）をなしにして、タブ表示の上に見出しを設け、そこにリンクターゲットを設けてジャンプさせる方法。これだと見出しが先頭に来るのでその下にあるタブの内容も表示されて具合がいいようです。実際にここをクリックするとタブの上まで戻りますのでお試しあれ。
ページ内リンク？？という方のために簡単に説明すると
例えば「<h2>見出し</h2>」の下にタブ表示をしている前提ではこのタグを
「<h2 id=”tababove”>見出し</h2>」のようにid属性を付けておきます。
そして各タブの内容の一番下に
<a href=”#tabtop”>もどる</a>
というリンクを付けておくと、この「もどる」という文字をクリックすればタブの上の部分まで戻ることができます。
全部のタブの最後にこれを付けておくと、訪問してくれた方が迷わずに済むと思いますよ。ちょっとよくないですか？？
WordPressのカスタマイズ・不具合対応などご相談ください
Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラ
のダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。
【スポンサーリンク】