プロフィール

スキル・人脈・お金ゼロの元サラリーマン / WordPressでWEB制作 / ライバルが少ない田舎で生活 / 複数のスキルを組み合わせる / ゼロからスタートして月30万円稼ぐ / サラリーマンや駆け出しのフリーランスを応援 / ブログ100日連続更新 / 継続のコツについては無料noteで→https://bit.ly/3gzPqvE

レンタルスペース

【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の使い方】無料版プラグインで予約フォームを作成する方法

続きを見る

 

 

それでは、また!

  • この記事を書いた人

すぎにい

Webエンジニア / 2017年にド素人でWeb業界へ / 元工場勤務の作業員 / 貯金ゼロで嫁から借金 / WordPressでWeb制作 / 30社以上のサイトを制作した実績 / 最高月収100万円 / 2021年6月からレンタルスペースの経営開始 / 初心者でもわかるレンタルスペースサイトの作り方を発信しています

-レンタルスペース