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

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

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


eコマースWebサイトで動作しているタブの例

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

wordpress.orgプラグインの説明ページのタブ

他の多くのWebサイト所有者は、さまざまなタイプのWebサイトのタブを使用しています。ただし、タブと混同しないでください。 アコーディオン, 展開して情報を表示します。以下、ウェブサイトでのアコーディオンの使用方法を確認してください.

vistamedia.xyzのアコーディオン

アコーディオンはさておき、私たちはここで話をします タブ, ですから、焦点を失わないようにしましょう。タブとアコーディオンの違いを明確にする必要があるだけです。今、私は同じページにいると思います��

本質的に、Web所有者はタブを使用して、別の方法ではページ全体または投稿を取得するはずだった情報を分割します。つまり、タブを使用すると、必ずしもスクロールホイールを100万回押す必要がなくても、情報をより簡単に要約できます。.

言い換えれば、タブは、特に世界のあなたのウェブサイトの使いやすさを向上させます 注意スパンの短縮. そのため、長いページでユーザーを飽きさせずにサイトに長く滞在させたい場合は、タブの使用を検討する必要があります.

今日の投稿では、WordPressの投稿とページにタブを追加する方法を正確に示します。この投稿が終了する前に、タブを活用するために必要なすべての手順がわかります。最後までお楽しみいただければ幸いです。コメント欄でご意見をお聞かせください。それはさておき、始めましょう.

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

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

Elementor Free Page Builder

Elementor Page Builderタブ

情報とダウンロードデモを見る

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

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

WPBakeryページビルダーのタブ

WPBakery Page Builderを含むプレミアムテーマ(独自のTotalテーマなど)を使用していますか?すごい!タブは組み込みで使いやすい.

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

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

タブ無料のWordPressプラグイン

ページビルダーを使用していない場合は、タブ専用に使用する必要はありません。 WP Shop Martによって単にタブと呼ばれている無料のWordPressプラグインのように、多くの優れた選択肢があります。タブは、汗をかくことなく、無制限の数の美しいタブを作成するのに役立つ気の利いたWordPressプラグインです。.

まず、タブのWordPressプラグインをインストールします。公式のWordPressプラグインリポジトリで利用できるため、WordPress管理ダッシュボード内から直接プラグインをインストールできます.

私たちは無料版を使用していますが、後で追加機能のためにアップグレードしたい場合は、プレミアム版が利用可能です.

Tabs WordPressプラグインのインストール

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

タブワードプレスプラグインのインストール

その後、 活性化 ボタン。これで、Tabs Responsive WordPressプラグインを使用する準備が整いました。次に、いくつかのタブを作成して、このプラグインが提供する機能を見つけましょう.

Tabs Responsive WordPressプラグインを構成する

プラグインを有効にすると、WordPress管理メニューに新しいアイテムが追加されます。新しいタブを作成するには、 タブレスポンシブ>新しいタブの追加 以下のスクリーングラブで詳しく説明します.

タブレスワードプレスプラグインを使用して新しいタブを追加する

そうすることで、ボスのような美しいタブを作成するために必要なすべての機能を一杯に備えたタブレスポンシブビルダーにつながります。何が期待できるかを垣間見るには、下の画像を参照してください.

タブレスポンシブワードプレスプラグインタブビルダー

かなりの巻物ではありませんか?そうですね、ほとんどの機能は右側のサイドバーにあります。また、個々のタブには設定があります。タブでWYSIWYGエディターを使用することもできます。つまり、タブを十分に制御できます。.

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

表題を加える

タブのタイトルを追加する

上の画像に示すように、(ナビゲーションメニューの場合と同様に)タブにわかりやすいタイトルを付けることから始めます。これにより、後で何かを編集する必要がある場合に備えて、WordPress管理ダッシュボードでタブを簡単に識別できます。このチュートリアルでは、タブに「Test Home Tabs」という名前を付けました。

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

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

上記のスクリーンショットにあるように、次のステップは、タブに使用するデザインテンプレートを選択することです。 Tabs WordPressプラグインの無料バージョンは、1つのデザインテンプレートしか提供しませんが、いつでもプレミアムバージョンにアップグレードできます。 さらに19. デザインの自由の話.

タブを追加

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

新しいタブを追加する

私たちはあなたが何ができるかを詳述した番号付きリストを作成しました タブを追加 上記のセクション。数字は各エリアに対応.

  1. タブのタイトル –このフィールドにタブタイトルを追加します。. 説明、仕様、詳細, 等.
  2. タブの説明 –ここにタブの説明を追加します。このフィールドでは、タブのコンテンツを追加できます。最良の部分は、WYSIWYGエディター(下の番号3に表示)を使用して、画像、音楽、ビデオなどのリッチコンテンツをタブに追加できることです
  3. WYSIWYGを使用する –使い慣れたものを使用したい場合 W帽子-You-Sええ-s-W帽子-You-Gエディターでタブコンテンツを作成します。このボタンをクリックしてポップアップウィンドウを開いてください。
  4. タブアイコン –このフィールドは、タブで使用するアイコンを選択するのに役立ちます。タブWordPressプラグインを使用すると、たくさんのFont Awesomeアイコンにアクセスして、プロのようにタブを華やかにすることができます
  5. 上のアイコンを表示 –アイコンと一緒にタブタイトルを表示したい場合は、この機能が便利です。さらに、タブのタイトルに触れずにアイコンを無効にすることができます
  6. 削除する –特定のタブを削除するには、このボタンをクリックします
  7. 新しいタブを追加 –このボタンをクリックして、さらにタブを追加します
  8. すべて削除 –すべてのタブにうんざりしていませんか?ちょうどヒット すべて削除 すべてをリセットするボタン

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

第二–ヒットすることを忘れないでください 下書きを保存 タブを作成するときにボタンを1回または2回クリックして、誤ってタブビルダーから移動した場合に変更が失われないようにします。.

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

タブショートコード

タブショートコード

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

タブウィジェット

タブウィジェットのサポート

あなたのウェブサイトのウィジェットエリアにあなたのタブを追加したいですか?それが正しければ、Tabs WordPressプラグインに付属するウィジェットのサポートが気に入るはずです。.

を打つ ここをクリック 上の画像のリンクをクリックすると、WordPressウィジェット画面に移動します。この画面では、テーマ内のウィジェット領域がある任意の場所にタブを自由に追加できます.

タブウィジェット

カスタムCSS

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

タブワードプレスプラグインカスタムcss

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

右サイドバー

タブワードプレスプラグインのスタイルオプション

上の画像で強調表示されている右側のサイドバーは、本当にあなたの1日を伝えます。タブを心ゆくまでスタイリングするために必要なすべてのオプションが満載です。主なオプションは次のとおりです。

  • タブの背景色
  • タブのフォントの色
  • フォントファミリーとスタイル
  • タブのタイトルとアイコンの表示オプション
  • タブアイコンの位置揃え、つまりタブタイトルの前または後
  • タブ枠
  • 複数のタブの説明のアニメーション
  • そして、はるかに

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

タブのコンテンツとスタイルのオプションを追加したら、上にスクロールして、 公開する 下に示すボタン.

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

投稿エディタを起動します(使用している場合でも) グーテンベルク)、ショートコードを投稿/ページに貼り付けます。その後、 公開する 下に示すボタン.

設定の約5分後; Twenty SeventeenテーマとたくさんのLorem Ipsumを使用しています。次の結果が思い付きました。.

色などはカスタマイズしていません。あなたの考えを教えてください。それほど簡単ではなかった?


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

WordPressのページと投稿にどのようにタブを追加しますか?好きなタブのWordPressプラグインはどれですか?コメントであなたの考えを共有してください。幸せな作成!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map