1. プラグイン
  2. 料金表を作成・挿入できるプラグイン

料金表を作成・挿入できるプラグイン

企業や店舗などのウェブサイトでよく見かける料金表を、WordPressで手軽に作成挿入できるプラグインがあります。簡単な入力と設定で、各種プラン・コース別の料金表が完成します。

WordPressで料金表を作成・挿入するプラグイン

WordPressでテーブル(表)を作成・挿入できるプラグインを以前に紹介しました。今回は、料金表の作成・挿入に特化したプラグインを紹介します。おすすめは、「Easy Pricing Tables」です。

WordPressで料金表を作成・挿入するプラグイン Easy Pricing Tables

Easy Pricing Tables プラグインのインストール・有効化

Easy Pricing Tablesは、WordPress 公式サイト(プラグインディレクトリ)に登録されています。管理画面[プラグイン]>[新規追加]を開き、Easy Pricing Tables で検索し、インストール・有効化してください。

Easy Pricing Tables プラグインのインストール・有効化

Easy Pricing Tables プラグインの使い方

Easy Pricing Tables プラグインは、設定画面がシンプルで、直感的な操作が可能です。ここでは、下のような料金表をEasy Pricing Tablesで作成する実例を紹介します。

Easy Pricing Tables プラグインで作成するテーブルの例

※表内のデータは架空のものです。

Easy Pricing Tables プラグインをインストール・ 有効化すると、管理画面の左メニューに[Pricing Tables]が追加されます。料金表を新たに作成するには、[Add New]をクリックします。

Easy Pricing Tables Add New メニュー

Easy Pricing Tables プラグインには、料金表内に表示する文字などを入力する「Content」メニューと、色や文字サイズなどを変更できる「Design」メニューがあります。

Easy Pricing Tables 2つのメニュー

「Content」で表示項目を入力する

「Content」で入力できる項目は、次の通りです。

Easy Pricing Tables Contentメニューで入力できる表示項目
Name プラン名
Pricing プランの価格
Features プランの特徴
Button Text ボタン内のテキスト(文字)
Button URL ボタンのリンク先URL

☆ Featureをクリックすると、おすすめプランとして設定できます。また、新しいプランを追加するには New Columnをクリックします。

今回は、下のように入力しました。

Easy Pricing Tables Contentメニュー入力例目

「Design」でデザインを変更する

「Design」で設定できる項目は、次の通りです。

Easy Pricing Tables Designメニュー設定項目
  • 一般設定(General Settings)
  • 文字の大きさ(Font Sizes)
  • ボタンの色(Button Colors)
  • カスタムCSS(Custom CSS)
一般設定(General Settings)

一般設定では、次の項目を変更できます。

Easy Pricing Tables プラグイン デザイン 一般設定
Featured Label Text おすすめプランの見出しを変更できます。
Border Radius 表の角に丸みを付けることができます。
Automatically match Row Height 各プランの表の高さを自動的に揃える機能です。ここのチェックを外すと、下のようになります。
Automatically match Row Heightのチェックを外した例

Automatically match Row Heightのチェックを外した例
文字の大きさ(Font Sizes)

次の項目の文字サイズを変更できます。

Easy Pricing Tables プラグイン デザイン 文字の大きさ
Featured Label Font Size おすすめプランの見出しの文字サイズ
Plan Name Font Size プラン名の文字サイズ
Price Font Size 料金の文字サイズ
Bullet Item Font Size プランの特徴の文字サイズ
Button Font Size ボタン内の文字サイズ

今回の例では、設定を変更しませんでした。

ボタンの色(Button Colors)

通常のボタン(Unfeatured Columns)とおすすめプランのボタン(Featured Column)の色を、個別に変更することができます。

Easy Pricing Tables プラグイン デザイン ボタンの色
Button Color
Featured-Button Color
ボタンの背景の色
Button Border Color
Featured-Button Border Color
ボタンの枠線の色
Button Hover Color
Featured-Button Hover Color
マウスオーバー(マウスカーソルを重ねること)したときのボタンの背景の色
Button Font Color
Featured-Button Font Color
ボタン内の文字の色

今回の例では、設定を変更しませんでした。

カスタムCSS(Custom CSS)

カスタムCSSは、CSS(カスケーディング・スタイル・シート)を使用します。CSSについては、下記が参考になります。

今回の例では、おすすめプランの見出しの背景色を、ボタンの色と同じものに変更してみます。

おすすめプランの見出しの背景色を変更

カスタムCSSには、下記のコードを入力しました。


すべての設定が完了後にSave & Previewをクリックすると、設定の保存プレビューの確認をすることができます。

Easy Pricing Tables プラグイン Save & Preview

プレビューを確認すると、目的の料金表を作成できていました。

Easy Pricing Tables プラグイン 料金表完成

作成した料金表をページ内に挿入する

ここまでで作成した料金表を、ページ内に挿入する作業です。今回は、固定ページで「プラン別料金表のご案内」というページを作成し、その中に料金表を挿入しました。

固定ページ編集画面で表を挿入する位置にマウスカーソルをあわせInsert Pricing Tableをクリックします。

Easy Pricing Tables プラグイン 作成した料金表をページ内に挿入する

作成した料金表を選択して、Insertをクリックします。

Easy Pricing Tables プラグイン 作成した料金表を選択する

編集画面に、料金表を表示させるためのショートコードが挿入されました。プレビューを確認してみましょう。

Easy Pricing Tables プラグイン 挿入した料金表をプレビュー

下のように料金表が挿入できました。(下の画像は、WordPress公式テーマ Twenty Sixteenを利用時のプレビュー画面です。)

Easy Pricing Tables プラグイン ページ内に料金表を挿入できた

おすすめの書籍

小さなお店&会社の WordPress超入門

WordPressでビジネスサイトを作るために必要な、基本的な知識が理解できる“超”入門書。Web制作に必要なHTML・CSS・PHPなどの専門知識がなくても読み進められる1冊です。SEO(検索エンジン最適化)やセキュリティの対策についても解説されています。

おすすめのテーマ

WordPressテーマ「NEXTAGE (tcd021)」

WordPressテーマ「LAW」

コーポレートサイト(企業サイト)向けのテーマ。第一印象で信頼性や専門性を的確にアピールし、Webサイトのゴールである「お問い合わせ」まで自然に繋がっていく“導線”にこだわったテンプレートです。

カテゴリー

ビジネスサイトを作りたいあなたに

おすすめのテーマ、あります。