ウェブサイト検索

WordPress の投稿とページにタブを追加する方法

タブは、多くの Web サイト、特に e コマース ストアでかなり一般的な機能です。電子商取引ストアのオーナーは通常、製品説明領域のタブを使用し、レビュー、説明、技術仕様などを複数のタブに分割します。

それでも、タブは電子商取引 Web サイトだけでなく、他のさまざまな種類の Web サイトでも使用されています。公式 WordPress.org Web サイトでも、プラグインの説明ページにタブが使用されています。 WP.org で強調表示されているタブを確認するには、下の画像を参照してください。

他の多くの Web サイト所有者は、さまざまな種類の Web サイトでタブを使用しています。ただし、タブをアコーディオンと混同しないでください。アコーディオンは展開して情報を表示します。以下に、私が Web サイトでアコーディオンをどのように使用したかをご覧ください。

しかし、アコーディオンはさておき、ここではタブについて話したいので、集中力を切らさないようにしましょう。タブとアコーディオンの区別を明確にする必要があるだけでした。さて、私たちが同じ考えを持っていることを願っています 🙂

基本的に、Web 所有者はタブを使用して、タブを使用しないとページ全体または投稿全体を占める情報を分割します。つまり、タブを使用すると、必ずしもユーザーがスクロール ホイールを何百万回も押す必要がなく、情報を理解しやすくなります。

言い換えれば、タブは、特に注意力が持続する時間が短い世界において、Web サイトの使いやすさを向上させます。したがって、長いページでユーザーを飽きさせずに、より長くサイトに留めておきたい場合は、タブの使用を検討する必要があります。

今日の投稿では、WordPress の投稿とページにタブを追加する方法を正確に説明します。この投稿を終えるまでに、タブを有効に使用するために必要なすべての手順を理解できるようになります。最後までお楽しみいただければ幸いです。コメント欄で感想を共有せずに退出しないでください。それはさておき、始めましょう。

ページビルダーを使用する

すでにページビルダーがインストールされている場合は、幸運です。おそらく、すぐにタブモジュールをすでに持っているでしょう。主要なページ ビルダーのほとんどは、ページ ビルダー要素のコア セットの一部としてタブを提供しています。ここで私たちのお気に入りのうち 2 つを簡単に見てみましょう。

Elementor 無料ページビルダー

人気の Elementor ページ ビルダーには、プラグインの無料版の一部としてタブが含まれています。ページにタブ要素を挿入し、タイトル、コンテンツ、スタイルなどを編集するだけです。それだけです。

WPBakery プレミアム ページ ビルダー

WPBakery Page Builder を含むプレミアム テーマ (独自の Total テーマなど) を使用していますか?素晴らしい！タブが組み込まれており、使いやすいです。

WPBakery タブ モジュールは、タブを追加したときに最初は空であるため、前の例とは少し異なります。コンテンツを追加するには、タブ内に追加のページ要素 (テキスト領域、画像、アイコンなど) を挿入する必要があります。ただし、これにより、(組み込みのスタイル オプションに加えて) タブを自由に作成できるようになります。このページ ビルダーについては以前にブログで取り上げたことがありますので、より詳細な手順が必要な場合は、WPBakery ガイドをご覧ください (注 – このプラグインは以前は Visual Composer と呼ばれていました。混乱を招いた場合はあらかじめご了承ください)。

タブWordPressプラグインをインストールする

ページビルダーを使用していない場合は、タブのためだけにページビルダーを使用する必要はありません。 WP Shop Mart の Tabs として知られる無料の WordPress プラグインなど、優れた代替手段がたくさんあります。 Tabs は、汗をかかずに無制限の数の美しいタブを作成できる気の利いた WordPress プラグインです。

まず、Tabs WordPress プラグインをインストールしましょう。公式 WordPress プラグイン リポジトリで入手できるため、WordPress 管理ダッシュボード内からプラグインを直接インストールできます。

ここでは無料版を使用していますが、後で追加機能を追加するためにアップグレードしたい場合は、プレミアム版も利用できます。

タブWordPressプラグインのインストール

WordPress 管理ダッシュボードにログインし、[プラグイン] > [新規追加] に移動し、キーワード検索ボックスに「tabs wpshopmart」と入力します。適切なプラグインを見つけたら、以下に示すように [今すぐインストール] ボタンを押します。

その後、[有効化] ボタンをクリックします。以上で、タブレスポンシブ WordPress プラグインを使用する準備が整いました。次に、このプラグインが何を提供するのかを確認するためにいくつかのタブを作成しましょう。

タブのレスポンシブ WordPress プラグインを構成する

プラグインを有効にすると、WordPress 管理メニューに新しい項目が追加されます。新しいタブを作成するには、以下のスクリーンショットで詳しく説明しているように、[タブ レスポンシブ] > [新しいタブの追加] に移動します。

そうすることで、ボスのような美しいタブを作成するために必要なすべての機能がぎっしり詰まったタブ レスポンシブ ビルダーが表示されます。何が期待されるのかについては、下の画像をご覧ください。

かなりの巻物ですよね？ほとんどの機能は右側のサイドバーにあります。個々のタブにはそれぞれの設定があることにも注意してください。タブ上で WYSIWYG エディタを使用することもできるため、タブを十分に制御できます。

次に、いくつかのサンプル タブを作成し、ページまたは投稿に表示してみましょう。

表題を加える

上の画像に示すように、まずタブにわかりやすいタイトルを付けます (ナビゲーション メニューの場合と同じように)。こうすることで、後で編集が必要になった場合に、WordPress 管理ダッシュボードでタブを簡単に識別できます。このチュートリアルの目的のために、私はタブに「テスト ホーム タブ」という名前を付けました。

タブのデザインテンプレートを選択

上のスクリーンショットに見られるように、次のステップでは、タブに使用するデザイン テンプレートを選択します。 Tabs WordPress プラグインの無料版では、デザイン テンプレートが 1 つだけ提供されていますが、いつでもさらに 19 個 追加できるプレミアム バージョンにアップグレードできます。デザインの自由についての話。

タブの追加

次に、以下に示すように、必要な数のタブを追加します。

上記の [タブの追加] セクションでできることを詳しく説明した番号付きリストを作成しました。番号は各エリアに対応しています。

  1. タブ タイトル – このフィールドにタブ タイトルを追加します。例: 説明、仕様、詳細など。
  2. タブの説明 – ここにタブの説明を追加します。このフィールドを使用すると、タブのコンテンツを追加できます。最も良い点は、WYSIWYG エディター (以下の 3 を参照) を使用して、画像、音楽、ビデオなどのリッチ コンテンツをタブに追加できることです。
  3. WYSIWYG を使用する – 使い慣れた What-You-See-< を使用したい場合Strong>Is-What-You-Get エディターでタブのコンテンツを作成します。お気軽にこれをクリックしてくださいポップアップウィンドウを起動するボタン
  4. タブ アイコン – このフィールドは、タブで使用するアイコンを選択するのに役立ちます。 Tabs WordPress プラグインを使用すると、大量の Font Awesome アイコンにアクセスして、プロのようにタブをおしゃれにすることができます
  5. アイコンの上に表示 – アイコンの横にタブ タイトルを表示したい場合は、この機能が最適です。さらに、タブのタイトルに触れずにアイコンを無効にすることができます
  6. 削除 – 特定のタブを削除するには、このボタンを押します。
  7. 新しいタブを追加 – タブをさらに追加するには、このボタンをクリックします。
  8. すべて削除 – すべてのタブにうんざりしていませんか? [すべて削除] ボタンをクリックしてすべてをリセットします。

あなたに役立ついくつかのボーナスヒント。まず、タブをドラッグ アンド ドロップして、必要に応じて並べ替えたり配置したりできます。

2 つ目 – 誤ってタブ ビルダーから離れてしまった場合に変更内容が失われないように、タブを作成するときに 下書きを保存 ボタンを 1 回か 2 回押すことを忘れないでください。

最後に – サポートが必要な場合は、タブの追加セクション (およびプラグインのほとんどのページ) のすぐ下に大きな青い サポートを受ける ボタンがあり、公式タブにアクセスできます。 WordPress.org のサポート フォーラム。サポートが必要な場合は、いつでも遠慮なくサポート ボタンを押してください。

タブのショートコード

次に、任意のページまたは投稿にタブを追加して表示するために使用するタブのショートコードを見つけます。たとえば、ショートコードは [TABS_R id=443] です。ページ上にタブを表示するには、上記のショートコードをコピーしてその特定のページに貼り付けるだけです。

タブウィジェット

Web サイトのウィジェット領域にタブを追加したいと考えていますか?もしそうなら、Tabs WordPress プラグインに付属するウィジェットのサポートを気に入っていただけるでしょう。

上の画像の [ここをクリック] リンクをクリックすると、WordPress ウィジェット画面が表示されます。テーマ内のウィジェット領域がある場所ならどこにでも自由にタブを追加できます。

カスタムCSS

Tabs WordPress プラグインには多くのタブのカスタマイズ オプションが付属していますが (右側のサイドバーを見てください。スタイル オプションがたくさんあります!)、以下に示すように独自のカスタム CSS スタイルを追加できます。

さらに、上の画像にあるように [デフォルト設定を更新] ボタンをクリックするだけで、カスタム設定をすべての新しいタブのデフォルト設定として設定できます。

右サイドバー

上の画像で強調表示されている右側のサイドバーは、あなたの一日を真に伝えます。タブを思う存分スタイル設定するために必要なすべてのオプションが満載です。注目すべきオプションは次のとおりです。

  • タブの背景色
  • タブのフォントの色
  • フォントファミリーとスタイル
  • タブのタイトルとアイコンの表示オプション
  • タブアイコンの位置揃え（タブタイトルの前後）
  • タブの境界線
  • 複数のタブの説明アニメーション
  • 他にもたくさん

WordPress ページまたは投稿にタブを追加する

タブのコンテンツとスタイルのオプションを追加したら、上にスクロールして、以下に示すように [公開] ボタンをクリックします。

この時点で、タブの準備が整いました。 WordPress ページまたは投稿にタブを追加するだけです。前に見たタブのショートコードをコピーするだけです。私たちのものは [TABS_R id=443] です。

投稿エディターを起動し (Gutenberg を使用している場合でも)、ショートコードを投稿/ページに貼り付けます。その後、以下に示すように [公開] ボタンをクリックします。

約 5 分間セットアップを行った後、私は Twenty Seventeen テーマと Lorem Ipsum をたっぷりと使用しており、次のような結果が得られました。

色などをカスタマイズしていないことに注意してください。あなたの意見を教えてください。それは簡単ではありませんでしたか？

WordPress ページや投稿にタブを追加するのは 4 年生の内容です。特に WP Shop Mart の Tabs などのプラグインを使用している場合は、問題が発生することはないと思います。

WordPress ページや投稿にタブを追加するにはどうすればよいですか?あなたのお気に入りのタブ WordPress プラグインはどれですか?コメントであなたの考えを共有してください。楽しく作成してください!