【WordPress】レンタルスペースの料金プランをタブ表示するプラグイン

悩んでいる人

レンタルスペースの予約ページを作ったけど、料金プランが分かりづらい。タブ表示にしたいけど、どうやったらいいんだろう？

本記事を読めば、レンタルスペースの予約ページをユーザーに分かりやすく表示することができます。

予約管理のプラグイン『Amelia』を使っている方は、ぜひ参考にしてください。

すぎにい

ぼくはWordPressでWeb制作しているエンジニアです。また、レンタルスペースの運営をしており、自社サイトにも導入しています。

WordPressでタブを作成する方法

WordPressでタブを作成したい場合、大まかに2通り方法があります。

1つ目はCSSを修正する方法、2つ目はプラグインをインストールする方法です。

通常、サイトはHTMLとCSSと呼ばれるプログラミングから構成されています。

そして、CSSはサイト内のデザインを整える役割です。

しかし、プログラミングの分からない方にとってハードルが高いですよね？

すぎにい

今回は初心者でもカンタンにできるプラグインをインストールする方法について紹介しますね！

タブ作成するプラグイン『Shortcodes Ultimate』をインストール

まずタブ作成するためには、『Shortcodes Ultimate』というプラグインをインストールする必要があります。

WordPressの管理画面から、『プラグイン』から『新規追加』ボタンをクリックしましょう。

右上の検索バーに『Shortcodes Ultimate』と入力し、『今すぐインストール』ボタンを押します。

インストールが完了したら、プラグインを作動させるために『有効化』ボタンを押してください。

プラグイン『Shortcodes Ultimate』でタブをデザインする

それではタブ作成するために『固定ページ』から『新規追加』を選択。

すると。『ショートコードを挿入』というボタンが追加されているので、クリックしましょう！

『タブ』ボタンを押して、デザインを選択します。

とりあえず、デフォルトでオッケーなので『ショートコードを挿入』しましょう。

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

初期状態では、タブの表示箇所が『su_tab title="タブ名"』となっているので、 タブ名の部分を好みの表示にしてください。

タブコンテンツと記載された箇所は、Ameliaブッキングで設定したカテゴリーを入力します。

こちらは設定した内容によって違うため、自分で確認してください。

まとめ

WordPressでタブ表示させるためには、プラグインの『Shortcodes Ultimate』をインストールしましょう。

あとは、Ameliaのカテゴリコードとタブ名を記載しましょう。

タブの設定自体はカンタンなので初心者でもできますよ。

Ameliaの予約フォームを作成する方法については、こちらの記事をご覧ください。

それでは、また！