サイトの煩雑さを最小限に抑え、タブのエンゲージメントを向上させる

サイトを合理化するためにできることは何でも良いことです。結局のところ、サイト訪問者が必要な情報を得るために必要な作業は少ないほど良いのです。ただし、サイトの性質上、多くの情報を含める必要がある場合、これは困難になる可能性があります。このようなサイトの最終結果には、通常、最後までスクロールする人がほとんどいない非常に長いページがあるサイトや、同様にクリックスルーする人がほとんどいない大量のページがあるサイトが含まれます。

では、超長いページや多すぎるページに代わるものは何でしょうか?もちろんタブです！心配する必要はありません。サイトにタブを表示するのにコーディングの天才である必要はありません。この機能を有効にするプラグインはたくさんあります。タブ付きコンテンツを WordPress サイトにすばやく簡単に追加するのに役立つものをいくつかまとめました。

ポスト UI タブ

投稿 UI タブを使用すると、投稿、ページ、その他の投稿タイプを問わず、コンテンツ内に jQuery タブを簡単に追加できます。エディターにショートコードを挿入するだけでタブが有効になります。

このプラグインには、既存のテーマとの一致を容易にする 24 の異なる UI テーマが含まれています。または、知識がある場合は、カスタムスタイルシートを作成して、外観と操作性をさらに向上させます。

プラグインがインストールされたら、投稿エディター内の関連する TinyMCE ボタンをクリックして適切なショートコードを挿入するだけです。 Post UI タブの公式 WordPress ディレクトリリストによると、次のショートコードを直接使用してタブを挿入することもできます。

これらのタブに HTML を自由に挿入してください。これは問題なく処理されるはずで、コンテンツはサイトの他の場所と同じように表示されることになります (ご想像のとおり、コンテンツはタブ内に含まれています)。

簡単にレスポンシブなタブ

サイトにタブを追加したい場合に必ずチェックすべきもう 1 つのプラグインは、Easy Responsive Tabs です。ブートストラップ 3.0 と互換性があるだけでなく、TinyMCE ボタンがビジュアルエディターに追加され、ボタンをクリックするだけで応答性の高いタブを挿入することが非常に簡単になります。

このボタンをクリックすると、設定パネルが開き、見出し、アクティブなタブ、ホバー、背景など、タブのさまざまな側面の色を選択できます。タブを上部または下部に表示するように設定することもできます。このプラグインは、セットアップが簡単ですぐに使えるため、本当にお気に入りです。

Tabby のレスポンシブタブ

応答性が主な懸念事項の 1 つである場合は、Tabby Responsive Tabs が適しています。簡単に言えば、このプラグインを使用すると、ショートコードを使用して投稿やページ内にレスポンシブなタブを挿入できます。単純なページまたは投稿で複数のタブのセットをサポートし、jQuery を使用して小さな画面でタブとアコーディオン効果を作成します。キーボードを使用してタブにアクセスすることもできます。

タブを挿入するには、[tabby] と [tabbyending] の 2 つのショートコードを挿入するだけです。具体的には、 [tabby title=“tabname ”] を使用してタブ名を設定します。次に、必要な HTML など、このタブに含めるコンテンツを書き出します。必要に応じて、さらにタブを挿入できます。次に、そのタブのセットを終了するには、[tabbyending] ショートコードを使用してタブグループを閉じます。

これらのタブのスタイルを変更したい場合は、コードをもう少し詳しく調べる必要があります。プラグインの WordPress ディレクトリページによると、プラグインのスタイルシートを子テーマにコピーし、タブスタイルまたはアコーディオンスタイルを必要に応じて変更する必要があります。

タブ内のウィジェット

場合によっては、個々のタブ内のニーズがもう少し複雑になることがあります。このような場合には、Widgets in Tabs プラグインを使用します。必要なウィジェットをすべてタブ内に配置してスペースを節約し、Web サイト上でより整理されたエクスペリエンスを作成できます。さまざまな用途があります。

たとえば、タブを使用して「最近の投稿」ウィジェットや「最近のコメント」ウィジェットを表示することを選択できます。カテゴリを追加して、タブの表示をさらに充実させることができます。または、Facebook Like Box、Twitter フィード、Google+、Pinterest ピンボードなどの埋め込みソーシャルメディアウィジェット専用のタブのグループを作成することもできます。

タブ内のウィジェットについて私が特に気に入っている点の 1 つは、独自のスタイルが含まれていないため、テーマに合わせてスタイルを設定できることです。タブはサイトに溶け込み、まるでサイトに属しているかのように見えます。

タブのタイトルもスクロール可能で、従来の積み上げアプローチに代わる優れた方法です。ウィジェット間の遷移にはアニメーションオプションもあり、あるタブから次のタブに移動するまでに待機する秒数を設定できます。

ここにリストされている他のすべてのタブプラグインと同様、短いコード [wit] のおかげで簡単に挿入できます。

WP UI – タブ、アコーディオン、スライダー

ここで説明する最後のプラグインは、WP UI – タブ、アコーディオン、スライダーです。このプラグインを使用すると、投稿やページにタブを簡単に埋め込むことができるだけでなく、アコーディオン、スライダー、ダイアログなどの他の書式設定スタイルを簡単に統合することもできます。このプラグインは jQuery を利用しており、必要に応じて各ページで複数の jQuery UI テーマを使用できます。

使いやすいオプションページが付属しており、セットアップと使用法が簡単です。また、ナビゲーションを簡素化するための専用のメニューとダイアログも追加されます。上記のすべてのプラグインと同様に、このプラグインは主にショートコードに依存して高速実装を実現します。ショートコード [wp tabs] は style 引数を使用して簡単に強化でき、「 wpui-blue 」など約 24 の異なる方法で変更して、タブにテーマとより一体感のある外観を与えることができます。

しかし、私にとってこのプラグインの本当のハイライトは、投稿とフィードをタブまたはアコーディオンに表示できる機能です。ショートコードは [wptabposts] で、これを使用すると一連のタブ内に投稿を表示できます。または、ページまたは投稿内にフィードを表示したい場合は、[wpuifeeds] ショートコードを使用します。 WP UI の WordPress ディレクトリのリストによると、[wpspoiler post=“3028 ”] を使用すると、この特殊な形式で投稿を 1 つだけ表示できます。

簡単なショートコード

もちろん、基本的なタブだけが必要な場合は、WPExplorer で手作りされた Symple Shortcodes WordPress プラグインを必ず検討してください。このプラグインには、サイトのどのページでも使用できる素敵な最小限のタブに加えて、その他の優れたコンテンツ整理機能が多数含まれています。列、トグル、アコーディオン、その他多くのアクセント (ボタン、ソーシャルアイコンなど) を追加します。

最初は複雑に思えるかもしれませんが、サイトにタブを追加するプロセスは実際には非常に簡単です。上記のプラグインを使用すると、それが簡単に行え、最終結果は魅力的かつ機能的になります。私の意見では、これらはチェックしてみる価値があります。サイトの訪問者は、全体のデザインを乱雑にすることなく、必要なだけの情報にアクセスできます。これは、リソースやコンテンツが大量にあるサイトにとっては簡単なソリューションです。

サイトでタブを使用していますか?具体的には、これらのプラグインについてはどうですか?もしそうなら、彼らはあなたのために働いていますか？サイトにタブを組み込む別の方法を見つけましたか?この気の利いた組織的トリックに関するあなたの経験をコメント欄でぜひ聞かせてください。