タブ切り替えを実装できる「Shortcodes Ultimate」というプラグインを今回は紹介したいと思います。

こちらのプラグインを追加するとプログラミングの知識が全くない方でも記事の中にタブを挿入することができます。プラグインは海外製ですが日本語で利用することができるようになっているので安心です。

非常に多機能なプラグインでタブの挿入以外にも様々な機能を活用することができるので、無料テーマを使用している方でプログラミングの知識がない方はこのプラグインをインストールすることで、1つ上のクオリティのコンテンツを作成することができるようになるでしょう。

タブ機能を利用されたい方は是非ご参考にしてください。

タブ切り替えできるプラグイン

Shortcodes Ultimate

https://ja.wordpress.org/plugins/shortcodes-ultimate/

まずプラグインのインストールをしましょう。

ワードプレスの管理画面から「プラグイン」→「新規追加」とクリックしてプラグインの画面を表示します。プラグインの検索画面に「Shortcodes Ultimate」と入力します。

プラグインが表示されたら「インストール」をクリックします。インストールが完了すると「有効化」と表示されるので、こちらもクリックしておいてください。

インストールと有効化が完了するとワードプレス管理画面に「ショートコード」という項目が追加されます。特に設定をする必要はありませんが、このプラグインで何ができるのかを確認するために「Available shortcodes」をクリックしてください。

「Shortcodes Ultimate」をインストールしたことによって使えるようになった機能の一覧をみることができます。今回はタブ機能にフォーカスを当てていますので「タブ」をクリックしてみましょう。

タブの詳細が表示されます。プラグインを活用することによって使えるようになるタブのプレビューを実際に操作することもできますので、タブ以外の項目でも気になる機能があった場合はこちらから確認すると分かりやすいです。

それでは、実際に記事にタブを挿入してみましょう。ワードプレス管理画面より「投稿」→「新規追加」をクリックして投稿画面を表示しましょう。

投稿画面のエディタを見てみると「ショートコードを挿入」が追加されているのが分かります。こちらをクリックしてみましょう。

プラグインで使えるショートコード一覧が表示されます。ここで「タブ」を選択します。

タブの設定画面が表示されます。上から順に見ていきましょう。

• スタイル：タブのスタイルを指定します。タブ機能はデフォルトのみになっていますので、そのままでOKです。
• 有効なタブ：最初に表示するタブを指定します。
• 垂直：「いいえ」で横表示、「はい」で縦表示になります。
• 別のCSSクラス：別のCSSクラスを指定したい場合に使います。
• コンテンツ：ショートコードの内容が表示されます。

一番下に表示されている「ライブプレビュー」をクリックすると現在の設定を反映したプレビューを確認することができます。

タブの設定を保存しておきたい時は「プリセット」にカーソルを合わせて「現在の設定をプリセットとして保存」をクリックします。

プリセット名を入力して「OK」をクリックします。

これで次回からプリセットを選択するだけで設定が完了するので便利です。プリセットを削除したい場合はプリセット名の横にある「X」マークをクリックすれば削除できます。

設定が完了したら「ショートコードを挿入」をクリックして投稿画面にショートコードを挿入します。

ショートコードが追加されました。投稿のプレビューでどのように表示されているか確認してみます。

しっかりとタブが挿入されています。簡単な操作でタブを挿入するこができました。

タブに文字を入力する

「タブ名」と「タブコンテンツ」を編集するには、コードの中のそれぞれのテキストを編集します。ショートコードをそのままの状態で編集しても良いですが、分かりにくいので次のように並び替えました。

「タブ名」にタブのタイトルを入力して「タブコンテンツ」にテキストやリンク、画像などを入力します。上画像のように並び替えをする時はエディタのモードを「テキストエディタ」に変更してから改行しましょう。

それぞれの項目に入力したらプレビューで確認します。

このようにタブの中のテキストなどは通常通り装飾することができます。文字装飾をする際はビジュアルモードに変更して編集した方が直感的に操作できるのでおすすめです。

タブの数を増やすor減らす方法

タブはショートコードの数で決まります。そのため、投稿画面に挿入されたコードをコピーして追加したり、削除することでタブの数を調整することができます。

デフォルトでは3つのタブになっていますので、好みやコンテンツの内容に応じて調整しましょう。コードを編集する時はテキストモードで行います。

タブを5つにしてみると以下のように反映されます。

これでタブの数を調整できます。

ただしスマートフォンなどモバイルデバイスでサイトを閲覧した時は縦並びでタブが表示されます。

これで設定は完了です。投稿を「公開」すれば、そのままタブが反映されます。

タブのデザインを変更する

Shortcodes Ultimatの便利なタブ機能はデフォルトの状態では、タブのデザインを変更することができません。もちろんプログラミングの知識がある方なら簡単にデザインの編集をすることはできますが、Shortcodes Ultimatの有料パッケージを購入することで多彩なデザインを選択することもできます。

投稿画面で「ショートコード挿入」→「タブ」と進みスタイルの選択画面で「より多くのスタイルを取得 →」をクリックします。

有料バージョンの購入画面が表示されます。「Purchase」をクリックすると有料版の購入ができます。「Single Site」は、1つのサイトでのみ有効なバージョンで14ドルと安い価格でタブ以外にも様々なデザインが利用可能になります。

「2-5 Sites」は2つから5つまでのサイトでプラグインを使用したい方向けのプランで24ドル、「Unlimited Sites」は無制限に利用できるプランで69ドルとなっています。プログラミングの知識がなくてタブのデザインをおしゃれにしたい方は利用してもいいでしょう。

タブは以下のようなデザインが利用できます。

まとめ

ワードプレスでプログラミングスキルがない初心者の方でも簡単にタブを挿入することができるプラグインShortcodes Ultimateのタブの挿入方法を解説しました。シンプルな操作で見やすいタブを挿入することができました。

タブを活用することでスマートフォンなどでサイトを閲覧する際に画面をスクロールすることなく商品のススペックなどを紹介することができるようになります。ユーザーにとって必要な重要な情報をタブにまとめてあげることで非常に分かりやすく見やすいサイトになるでしょう。

Shortcodes Ultimateを使いこなして魅力的なコンテンツを増やしていきましょう。