WordPressの本文内でタブ表示やアコーディオン表示ができるプラグイン「Squelch Tabs and Accordions Shortcodes」

公開日:2017年6月20日 コンテンツ追加 デザイン
Knowledge Base Wordpress プラグイン
またなかなか長い名前のプラグインを紹介します。

WordPressで固定ページや投稿を作っていて、筆が乗ってしまって何千文字となってしまうことないですか??

書いた本人は内容が分かっているので長い文章でも大丈夫ですが、閲覧者にとってはちょっとくたびれますね。時には開いてざーーっと字が並んでいるだけで閉じてしまう方もいるかもしれません。

そこで見やすくするために行う工夫としてあるのが以下の効果

  1. アコーディオン表示
  2. クリックすると内容を詳しく表示し、普段は閉じているという動作をします

  3. タブ表示
  4. 横に並ぶタブをクリックすると相応の内容を表示するという動作をします。ちょうどYahooや楽天Infoseekなどのトップページにあるニュースタブのようなものです

  5. もくじ・さくいん表示
  6. このプラグインではできませんが、有名なプラグインに「Table Of Content Plus」などがあります。ウィキペディアの先頭にあるもくじのことです。クリックすると該当の場所へジャンプするような動作をします。

を使うのがサイトでは効果的かと思います。しかし個人的にはもくじ方式だと必要なところだけぱっと見て去っていく感じがして(すみませんそんなことしてます私)あまり作り手としては好きな方法ではありません。

そこであと2つの手法となるのですが、作るページによってはどちらかを使ったり併用したりしたいもの(欲張りです)。

それを実現してくれるプラグインがありました。それが今回紹介する「Squelch Tabs and Accordions Shortcodes」です。

このプラグインの表示デモは

でご覧いただけます。

【Squelch Tabs and Accordions Shortcodes】プラグインの基本的な機能・できること

タブやアコーディオン表示をするプラグインを使用する際の作業で困るのは

  1. 現在の投稿内容などをタブ化するため新たにコンテンツを作る必要がある
  2. タブページ作成プラグインで一番多いのは、タブ表示するためのコンテンツ(タブのまとまり、タブごとの内容)を作ってショートコードで固定ページや投稿へ埋め込むというもの。これだと数の少ない固定ページでは有効ですが、たくさんある投稿1つ1つに対してタブコンテンツを別に作るというのはナンセンスな感じがします

  3. 同じページ中に複数のタブやアコーディオンコンテンツが作れない
  4. 「これつかえるじゃん!(なぜかじゃん言葉)」と思って作ってみたら、実は1つのページや投稿に1つのタブコンテンツしか追加できない(動作しない)ものが多いです

  5. タブだけ、アコーディオンコンテンツだけといった単独のものがほとんど
  6. それぞれ単独の機能を持つものはたくさんありますが、両方やろうと思うと複数のプラグインが必要。

1に関しては詳しく後述しますがタブ化したい文章をショートコードで挟んでいくと勝手に?タブ化してくれます

2に関しては複数のタブ・アコーディオンコンテンツを挿入してみたところきちんと動作しました

3に関しては言うまでもなく、ショートコードの書き方によってどちらも表示できます

特に1に関しては今までの固定ページや投稿についても簡単にタブやアコーディオン化できるので他にはない便利さを体感できると思います。

ただ1つこのプラグインで残念なところがあります。それは、タブやアコーディオンのデザイン変更はCSSを編集して行う必要があること。要するにデザインに関する設定メニューがないんですね。でも、CSSの編集が分かる方なら使用に関して全く問題はないと思います。

この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. 有料版と無料版がある場合、テストは原則無料版のみで実施しています
  4. テスト環境については本文中に記載しています
  5. 使用方法で紹介しているショートコードやコードなどをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

WordPressで別の投稿やカスタム投稿タイプの内容を挿入できるプラグイン「Insert Pages」

WordPressでGoogle map Apiを使わず簡単にグーグルマップを挿入できるプラグイン「Pronamic Google Maps」

WordPress本文中の同じ場所で2つの画像を切り替え表示できるプラグイン「OT Before After Images Slide」


【Squelch Tabs and Accordions Shortcodes】プラグインの設定画面や表示の日本語化と翻訳

使用に関してはショートコードを使い分けるだけですから、日本語化の必要はありません

【Squelch Tabs and Accordions Shortcodes】プラグインのインストールと設定

インストール方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

を参照ください

ダッシュボードの「外観」→「Tabs and Accordions」から表示スキン(パターン)の設定ができます。

たくさんのデザインパターンから選択できますのでサイトにあったものを選んでください。

その他の設定はありません。

【Squelch Tabs and Accordions Shortcodes】プラグインの基本的な使い方

投稿や固定ページでタブやアコーディオンを使いたい場所でショートコードを使用します。

  1. タブ表示の基本ショートコード
  2. [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]を加えていけばタブは無限に増やせます

  3. アコーディオン表示の基本ショートコード
  4. [accordions title=”” disabled=”false” active=”0″ autoheight=”false” collapsible=”true”] [accordion title=”Pane 0″]Accordion pane 0 content[/accordion] [/accordions]

    アコーディオン部分の増やし方はタブと同じです

  5. トグル表示の基本ショートコード
  6. [toggles title=”” speed=”800″ active=”0,2″ theme=”jqueryui”] [toggle title=”Pane 0″]Toggle pane 0 content[/toggle] [/toggles]

  7. アコーディオン(縦)の基本ショートコード
  8. [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などの同時翻訳機能のあるブラウザでないと英語で対応になりますから解読が大変かもしれません

  1. 下のリンクからタブやアコーディオンで使うデザインテーマを作ります
  2. 開いたら、左画面から「ギャラリー」を選んで一番自分の目指すデザインに近いものを選び「編集」をクリックします(一から作るよりもあるものを編集した方が簡単です)
  3. 画面の左で設定した内容が右にプレビュー表示されるようになっていますから、どんどんカスタマイズします
  4. ※設定したら右のプレビュー画面の余白でクリックしてしばらく待つと画面が変わります

  5. 編集が終わったら、「テーマをダウンロード」をクリックします
  6. 次の画面でバージョンを1.9.2にして、あとは下までスクロールして「ダウンロード」をクリックします
  7. ファイル名は替えてもそのままでもOKです。デスクトップなどにダウンロードしたら解凍します
  8. 解凍したフォルダをFTPでサイトの「wp content」→「uploads」へアップロードします
  9. WordPressのダッシュボードへ行き、「外観」→「Tabs and Accordions」から表示スキン(パターン)を開くと作成したテーマが選択できるようになっているのでクリックして保存すれば完了です。

ボタンなどの動作がいろいろありますから、この方法の方が単純で簡単ですヨ。あとは細かい調整をCSSで行って完成です。このテーマはすべてのタブやアコーディオンへ適用されますから便利ですね(当たり前か・・・)。

独自にCSSを適用するときには前述したスキンで「No jQuery UI theme」を選択して行います(これ以外のスキンでもカスタマイズはできますが、余分なデザインが適用されていないのでカスタマイズしやすいと思います)

デベロッパーツールを使えばどこにどのCSSが割り当てられているかはわかると思いますので敢えて紹介する必要はないと思いますので自身でカスタマイズしてください。

ちなみに代表的なCSSセレクタはこちらの作者サイトで掲載されています

ちょっとした工夫

タブ化したりすることで長い文章も見やすくまとまるようになるこのプラグインですが、タブ表示の際閲覧する側からするとちょっと使いにくいところがあります。それは、別のタブを見たいときにわざわざマウスなどでスクロールしなければならないということ。作成者は分かって作っているから気づきにくいのですが、ユーザーの側に立って実際に使ってみると気づく部分です。

できると便利なのが次のタブの内容を続けて表示することですね。ページ内リンクを使ってできないことはないのですが、ジャンプさせてみるとタブの内容が先頭に来てしまってタブが見えないので何となく分かりづらい印象です。

ではどうするか??ということになるのですが、単純にタブの上に来る見出し(ショートコードの中の見出し)をなしにして、タブ表示の上に見出しを設け、そこにリンクターゲットを設けてジャンプさせる方法。これだと見出しが先頭に来るのでその下にあるタブの内容も表示されて具合がいいようです。実際にここをクリックするとタブの上まで戻りますのでお試しあれ。

ページ内リンク??という方のために簡単に説明すると

例えば「<h2>見出し</h2>」の下にタブ表示をしている前提ではこのタグを

「<h2 id=”tababove”>見出し</h2>」のようにid属性を付けておきます。

そして各タブの内容の一番下に
<a href=”#tabtop”>もどる</a>
というリンクを付けておくと、この「もどる」という文字をクリックすればタブの上の部分まで戻ることができます。

全部のタブの最後にこれを付けておくと、訪問してくれた方が迷わずに済むと思いますよ。ちょっとよくないですか??

Wordpress関連本 人気ランキング

Amazonの人気ランキング

CS Shop

楽天市場の人気ランキング

小さなお店&会社のWordPress超入門 初めてでも安心!思いどおりのホームページを作ろう! 初めてでもホームページがすぐ作れる!/..

小さなお店&会社のWordPress超入門 初めてでも安心!思いどおりのホームページを作ろう! 初めてでもホームページがすぐ作れる!/..

2,178 円 (税込)
著者星野邦敏(著) 吉田裕介(著) 羽野めぐみ(著)出版社技術評論社発行年月2019年07月ISBN9784297105556ページ数239P9784297105556内容紹介初めてでも安心!思いどおりのホームページを作ろう!誰でもかんたんに作れる!専門知識がなくてもきれいなホームページが作れる!最新..
【中古】カンタン!WordPressでつくるビジネスサイト スマホ・パソコン両対応のHPをつくろう! 増補改訂版/ソシム/遠藤裕司 (単行本)

【中古】カンタン!WordPressでつくるビジネスサイト スマホ・パソコン両対応のHPをつくろう! 増補改訂版/ソシム/遠藤裕司 (単行本)

899 円 (税込) 送料込
◆◆◆中古商品のためキズ、日焼け、使用感等ある場合が御座いますが綺麗な状態になります。迅速・丁寧な発送を心がけております。【毎日発送】商品状態著者名:遠藤裕司、伊藤みゆき発行者:ソシム発売日2016年01月
楽天ウェブサービスセンター CS Shop
ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報