タブ切り替えとは?

ボタンなどからページを移管せず、同じページ内でタブの切り替えを行うことができます。

ページ移管やスクロールせず見ることができて、情報もまとめることができるのでユーザーにとって便利です。

今回は「Tabs Responsive」というプラグインを使って実装していきます。

テーマやブロックで使用できるタブ機能もあります。

Tabs Responsive」プラグイン

プラグイン HTML

手順

まずは「Tabs Responsive」プラグインを追加し有効化します。

ダッシュボードに追加されていることを確認し、「Add New Tabs」をクリックします。

「タイトルを追加」し その下の「Add Tabs」にも入力していきます。

「タイトル」は実際のページに表示することもできますし、非表示設定にすることも可能です。

非表示にする場合も、ご自身でタブの内容を把握しやすいようタイトルをつけてください。

画像のように「タイトル」には「メニュー一覧」と入力してみました。

「Tab Description」にはHTMLを記述します。

「Use WYSIWYG Editer」 をクリックすると、入力画面が大きく表示されます。

「Tab Icon」も選択可能、表示/非表示を選択できます。

選択した「Tab Icon」は、「Tab Title」の横、ここでは「ランチ」と表示されます。

他のタブも作成します。

タブの順番はドラッグ&ドロップで変更できます。

作成したタブをページに表示させる

固定ページなどに先ほど作成したタブのショートコードを入力するときちんと表示されています。

ダッシュボードTabs Responsiveトップより確認できます

タブのデザイン

Tabs Responsive」設定画面右の「Tabs Setting」で、

  • タイトルの表示/非表示
  • タブタイトルの色
  • 背景色

など細かく設定できます。

写真も追加してこんな感じにしてみました。

裏技

固定ページなどでブロックでデザインを作り、「HTMLとして編集」からコピーして「Tabs Responsive」に貼り付けるとコードを書かずに作成できます。

HTMLの記述が必要ですが、上記の方法を使用すれば、簡単に作成でき、時間も節約できます。

テーマやブロックで使えるタブ機能

使用するテーマによってはデフォルトでタブ切り替え機能もついているので、こだわりがない限り基本的にはタブ切り替えのプラグインを追加する必要はありません。

タブ切り替えブロック標準テーマ

https://swell-theme.com/
https://support.animagate.com/product/wp-nishiki-pro/
https://saruwakakun.design/

SWELL・Nishiki Pro・SANGOなど・・・

また、テーマに付随するプラグインとして、タブブロックが用意されているものもあります。

タブ機能があるブロックプラグイン

Arkhe Blocks|タブブロック

Snow Monkey Blocks|タブブロック

Arkhe
Snow Monkey

どちらも画像を見ただけで、普段からWordPressを使用している方なら感覚的に操作できるのがおわかりいただけるかと思います。

Arkhe Blocks
Snow Monkey Blocks
VK BLOCKS

ただ、他のテーマを使用している場合、他のブロック機能が被ってしまい重くなるので、今回のようなタブ切り替えのみのプラグインを使用することをお勧めいたします。

SWELL・Nishiki Pro・SANGO・Arkhe・Snow Monkeyなどのテーマを使用している場合は、デフォルトのブロック、またはテーマのためのプラグインでタブ切り替え機能が利用できます。

投稿者プロフィール

Asuka
Asuka
元銀行員。退行後手に職をつけたい気持ちからと元々興味があったWeb制作の道へ。
訓練校でHTMLやCSS、デザインについて半年間学び、その後デザイン会社で2年程度の実務経験を積む。
日々の業務を通して、お客様自身で日々更新・運用できる生きたサイトを作成できるWordPressの需要を感じ、2024年7月より株式会社ウェブロードに入社。
技術やデザイン、知識を磨きながらお客様視点での制作・運用を行っている。

お問合せフォームはこちら

弊社サービスをご検討いただきありがとうございます。
相見積もりや社内検討用など、概算お見積りのPDFが必要な場合はこちらでご入力・出力できます。

お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。

    お問い合わせの前に下記、ご確認をお願いいたします。

    任意貴社サイトURL

    必須お問い合わせ項目

    必須制作費のご予算はどれくらいですか?

    企画・設計、デザイン、画像・文章の作成、サイト内検索システムの導入等、
    ヒアリングを元にご予算やご希望に応じたお見積りをご提案させて頂きます。
    弊社制作費の費用感につきましてはこちらの記事をご参照ください。

    必須制作目的はどうお考えですか?(複数選択可)

    どこに力を抜きどこに力を入れるのか、
    ご予算とご要望の中から最適なご提案をさせていただきます。

    必須どのような機能が必要ですか?(複数選択可)

    SSL(https://~)対応、ブログ機能、スマホ対応(レスポンシブ)、
    ログイン等セキュリティ対策、ページタグSEOの最適化は標準搭載。

    必須どのような作り方がご希望でしょうか?(複数選択可)

    WordPressでの構築になりますので、お客様のご要望に比較的柔軟にお応えすることが可能です。
    企画ご提案する前に参考にさせていただく項目です。

    必須お問い合わせ内容を教えてください

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

    任意電話番号(ハイフン無し・半角数字)