WordPressで料金表を作成できるPricing Table by Supsystic

WordPress個別サポート

WordPressで作る企業サイトに欠かせない料金表。ゼロからの手作りは意外と面倒ですよね。そんなときはプラグインに頼ってみましょう。たとえば、Pricing Table by Supsysticプラグインを使うと、次のようにデザインされた料金表を画面上で組み立てることができます。tableタグやCSSと格闘する必要はありません。

作成できる料金表
作成できる料金表

以下、Pricing Table by Supsysticプラグインを例に、WordPressで料金表を設置するまでの手順を紹介します。

WordPressで料金表を作成する方法

「プラグイン」‐「新規追加」メニューからPricing Table by Supsysticプラグインをインストール、有効化します。

Pricing Table by Supsysticプラグインのインストール
Pricing Table by Supsysticプラグインのインストール

料金表を作成するため「Pricing Table by Supsystic」‐「Add New Table」メニューを開き、料金表の名前(1)を入力してデザインを選択(2)し、「Save」(3)をクリックします。

料金表の作成
料金表の作成

すでにサンプルの料金が入力されているので各セルの料金やテキストなどを編集します。

料金表の編集
料金表の編集
別のメニューから料金表を開く場合は「Show All Tables」から目的の表を開いてください。

セルのクリック時に表示されるツールバーから背景色や太字などを設定できます。

ツールバーによるセルの設定
ツールバーによるセルのスタイル設定

行や列を増やすには、「Add Col」(列の追加)や「Add Row」(行の追加)をクリックします。

行や列の追加
行や列の追加

不要な列や行はゴミ箱アイコンで作業できます。

不要な列の削除
不要な列や行の削除

間違って削除した場合は「Undo」で削除前に戻ることができます。

作業間違いを戻す
作業間違いを戻す

列をドラッグアンドドロップして順番を入れ替えることもできます。

列の順番を入れ替える
列の順番を入れ替える

ボタン項目では「Link」をクリックしてリンク先を設定できます。

「詳しくはこちら」のリンク先を設定
「詳しくはこちら」のリンク先を設定

各セルを編集して完成させましょう。

料金表の編集を完了
料金表の編集を完了

あとはショートコードをコピーして任意のページにペーストするだけです。

料金表のショートコードをコピー
料金表のショートコードをコピー

ここでは、固定ページのショートコードブロックにペーストしました。

料金表のショートコードをペースト
料金表のショートコードをペースト

そのページに料金表が表示されます。ちなみに、レスポンシブ対応なのでスマホでは1列表示になります。

完成した料金表
完成した料金表

以上、Pricing Table by Supsysticプラグインを使って料金表を作成する方法を説明しました。自力でtableタグとCSSを駆使する必要もなく、画面上でテキストを入力したり色を変更するだけで完了するので簡単です。興味がある方は、ぜひお試しください。

WordPressプラグイン