Recommended!2020年オススメする有料WordPressテーマ7選 Read More
プラグイン

【WPプラグイン】投稿記事中のコンテンツをコンパクトに収めるレスポンシブタブ

最終更新日2021年2月10日 by samurai

コンテンツが縦にダラダラと並んでいると思わずページを閉じてしまいたくなりますが、タブで切り替えることでコンテンツが変わるタブを利用すれば、短いスペースで多くの情報を提供できます。

スクロールせずに多くのコンテンツを表示する事ができるタブはとても便利なモノです。

今回は、オシャレにタブを切り替えるプラグイン「Tabs – Responsive Tabs with WooCommerce Product Tab Extension」をご紹介いたします。

もちろん Responsive とあるように、レスポンシブなのでスマホ対応にもなっています。

また、WooCommerceとありますが、通常のWordPressテーマで使用できますのでご安心ください。

Tabs – Responsive Tabs with WooCommerce Product Tab Extension

ショートコードで簡単にレスポンシブタブが挿入できるので、重宝するプラグインです。

実装すると、こんな感じで表示されます。

インストールから有効化までは省略いたします。

レスポンシブタブの管理画面

サイドバーに専用メニューが追加されています。

初期画面が表示されています。

クローン(複製)を作成したり、編集、削除、テンプレートの変更などが行なえます。

レスポンシブタブの作成

レスポンシブタブを作成する場合は「Create New」をクリックします。

各Styleが表示されますので、好みのStyleを選んで 「Create Style」をクリックし、Styleを決定します。

タイトルを入力し「Save」します。

一般設定は動作の設定などを行います。

そんなに難しくはないですし、後ほど変更も可能ですので、最初はサラッと設定しておいても良さそうです。

ヘッダー部分の設定です。

これも後ほど設定変更できますので、サラッと設定してください。


ディスクリプション設定も最初は設定変更せずにセットしてみて、後ほど変更でも問題ないと思います。

右のサイドバーにショートコードが出ていますので、それをサイトにコピペすればOKです。

タブの順序は「Rearrange Tabs」からドラッグアンドドロップで変更できます。

最初に紹介したページですが、このように表示されます。

Pro版ではないので色やフォントなどの制限はありますが、これでも十分な機能があるのではないでしょうか。

Tabs – Responsive Tabs with WooCommerce Product Tab Extension まとめとして

ショートコードで簡単に入力できるレスポンシブタブは非常に便利なので導入しておくのは良いでしょう。

しかし、レスポンシブタブは他にも数多く出ていますので、正直 このプラグインがベストとは思いません。

機能的にはどれも同じ様な機能を有していますので、後はデザイン的にどれが好きなのかというところでしょうか。

デザインは好みがありますから、「コレだ!」というプラグインは、わかりませんw

プラグイン検索で「Tabs」と入れてみるとたくさん出てきますので、チェックしてみるのも良いでしょう。

関連記事
プラグインGutenberg

2021Gutenbergの優れたブロックプラグインはこの7選で決まり!

最終更新日2021年2月16日 by samurai Gutenber…
プラグイン

LoftLoaderプラグインでローディング画面の印象をアップするアニメーションプリローダーを

最終更新日2021年1月30日 by samurai 色んなサイトを訪…
プラグイン

あなたのサイトのセキュリティを高めるプラグインWordfence

最終更新日2021年1月26日 by samurai あなたのWord…
WordPressテーマをテストしているサブサイトはこちらからどうぞ ↓

テストサイトに各WordPressテーマを実際にインストールしてみました。

各テーマ毎に少しカスタマイズしたところもありますが、基本的に同じ画像、同じ記事で構成していますので、参考になるかと思います。

WordPress SAMURAI

0