レンタルスペース

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

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

 

こんな方におすすめ

  • レンタルスペース運営して自社サイトを持っている
  • 予約ページの料金表を改善したい
  • 予約システムのAmeliaを使っている

 

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

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

 

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

 

WordPressでタブを作成する方法

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

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

 

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

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

 

 

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

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

 

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

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

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

Shortcodes Ultimateをインストールする

 

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

今すぐインストール

 

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

有効化する

 

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

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

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

ショートコードを挿入

 

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

タブボタンを押す

 

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

ショートコードを挿入

 

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

 

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

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

 

 

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

 

まとめ

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

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

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

 

 

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

【Ameliaの使い方】無料版プラグインで予約フォームを作成する方法
【Ameliaの使い方】無料版プラグインで予約フォームを作成する方法

続きを見る

 

 

それでは、また!

  • この記事を書いた人
すぎにい

すぎにい

5月からマレーシアでビジネスを開始予定 / 無計画で渡航 / 英語話せない / マレーシア行ったことない / 人脈ゼロ / でもとりあえずチャレンジ / 寝てる間に全財産盗まれる / 元工場勤務のサラリーマン→脱サラ→ワードプレスでWeb制作→Webライター→レンタルスペース運営

-レンタルスペース