オシャレな料金表を簡単に作れるWPプラグイン「Pricing Table by Supsystic」の使い方

あなたがもしいくつかのプランがあるサービスを提供しているのであれば、ひと目で比較できる料金表を作れるととても便利ですよね。

例えば、下図のfreeeのような料金表で比較できれば、サービスの比較と料金が一目瞭然でとてもわかりやすいですね。

今日は、そんな便利な料金表を簡単に作れるWordPressプラグインを紹介したいと思います。

料金表のイメージ図

ptbs1

プラグインの特徴

  • 簡単で直感的に料金表を作れる
  • いくつかテンプレートがあるので好きなテンプレートから選ぶことができる

プラグインのダウンロード

プラグインのダウンロードは下記のリンク先からもできるしWordPress内で「Pricing Table by Supsystic」と検索してもダウンロードが可能です。現在のバージョンは「1.3.1」。

Pricing Table by Supsystic
Pricing Table by Supsystic
Developer: supsystic.com
Price: Free

プラグインの使い方

プラグインをダウンロードすると、メインサイドメニューに「Pricing Table by Supsystic」という項目が出てくる。「Add New Table」をクリックして「Table Name」からテーブルのテンプレートとテーブルの名前を選択します。

ptbs2

下図の中からテンプレートを選択できるようになります。

「Select」という表示のものは、無料で選択できますが、「Get in PRO」というのは、有料版で、1サイト29$払うと利用可能になります。

ptbs3

テーブルネームとテンプレートを選ぶと「Show All Tables」から料金表のカスタマイズができるページに移動します。

ptbs4

まずは、英語の部分をザッと日本語で解説していきます。

ptbs5

①カラム数を決めることができる。「Add Column」をクリックするとカラムが追加できる。(ちないみにカラムの削除は、料金表から直接行えるのでここでは追加だけしかできない)

②行数を加える事ができる。「Add Row」をクリックすると行数が増えていく。(行数の削除もカラムと同様に料金表から直接行うのでここでは追加だけしかできない)

③テーブル幅をpixelか%のどちらかで選択できる。

④料金表のフォントの種類を選ぶことができる。

⑤テーブルの位置を選択できる。左寄せ、右寄せ、真ん中寄せ、noneから選択できる。

⑥ディスクリプションの文字色を変更できる。

⑦ヘッダーの文字色を変更できる。

⑧バックグラウンドカラーの色を変更できる。

⑨ここにチェックを入れて、入れると、一つのカラムの幅を自由に設定できる。

⑩ディスクリプションカラムの表示非表示の切り替えができる。

⑪フッターの行の表示非表示の切り替えができる。

⑫ホバーアニメーションの表示非表示を設定できる。(ホバーアニメーションとは下図のような動きをつけるかつけないかという設定だ)

ptbs6

⑬行の文字色を変更できる。

⑭ヘッダーの行の表示非表示を変更できる。

⑮ディスクリプションの行の表示非表示を変更できる。

⑯文字の位置を変更できる。中央、左寄せ、右寄せから選択できる。

⑰料金表をレスポンシブデザインに対応させるかどうか選択できる。(チェックを入れると、スマホなどで表示された場合縦に並ぶように自動で調整される)

料金表の文章や値段を変更する

価格表の値段や文章を変更するのは、価格表に直接文書を打ち込んで変更します。

ptbs7

マウスオーバーすると、赤枠のようなメニューが出てきて、直接文字を打ち込んだりフォントサイズを変更したりといった、細かい設定ができるようになります。

行にマウスを合わせた状態で、ゴミ箱アイコンをクリックすると行を削除できます。

カラムの削除も同様の手順で可能です。

カラムの一番上(pro)の部分にマウスを合わせて、ゴミ箱アイコンをクリックするとカラムが一つ消えます。

このように直感的に、操作できるのでとても簡単です。

フッター部分の「sign up!」にマウスを合わせると、リンクを貼れるアイコンが出てくるので、決済ページヘのリンクはそちらから設定してください。

ptbs8

ショートコードを貼り付ける

「Show All Tables」の左上のほうにショートコードが表示されているので、そちらをコピーして、料金表を設定したい場所にコピーアンドペーストして貼り付けます。

ptbs9

貼り付けると、下図のように、料金表が貼付けされます。

ptbs10

まとめ

一つ気をつけてほしいのは、あなたの利用しているテーマの幅があまり広くない場合、カラム幅が4行だと表示がおかしくなってしまう。

そのような場合は3行などに狭くして利用するといいでしょう。

レスポンシブデザインを利用している人は、スマホでの表示状態もチェックして正しく表示されているか見ておいたほうがいいと思います。

最新の更新を
プッシュ通知で購読しよう

9 件のコメント

  • プラグインを入れてみたのですが、テーブルの文字などを変更後、Saveができません。ずっと更新状態のままになってしまいます。
    環境のせいなのかもしれませんが、Saveに時間がかかるなどありますでしょうか。なにかわかることがあるかと思いコメントさせてもらいました。

    • 僕のほうで、テーブル文字を変えてセーブしてみましたが、ちゃんとセーブできました。特に問題なく動作しています。
      他のプラグインと干渉している場合があるかもしれませんので、他のプラグインを一旦停止してサイド試してみてはいかがでしょうか?

  • 返信ありがとうございます。
    他のプラグインをすべて停止して試してみましたが変わりませんでした。
    Settingなどは変更後、Saveできるのですが、テーブルの変更だけはダメでした。
    サーバーの環境のせいかもしれませんので、調べてみます。ありがとうございました。

    • Senさんと同じ症状です。
      いろいろやってま見ましたがやはりSAVEできません。イメージ通りのテーブルができたので是非埋め込みたいのですがとーっても残念です。。

  • ワードプレス初心者です
    教えていただきたいことがあるんですが、このぺーじなどの下部にあるRECOMMENDのアイキャッチ画像の右上にカテゴリーが表示されるのはそういったテンプレートなのでしょうか?
    もしお聞きできるのであればこのサイトのテンプレートを教えていただけませんでしょうか。よろしくお願いします。

  • 支払いを外部のペイパルに飛ばしたいのですが、<form target="paypal からだとエラーになりますね。これはどのようにすればよいでしょうか?ご存知でしたら教えていただけると助かります。宜しくお願いします。

    • PayPalに決済を飛ばしたいのであれば、PayPalで決済リンクを生成して、それを埋め込む必要があります。

      • お返事ありがとうございます。決済リンクを作成して支払いボタンのところのリンクにペイパルの決済リンクのURLを入れました。実際にクリックすると決済リンクではなくペイパルのサイトに飛んでしまうのです。やり方が間違っているのだと思うのですが、どのようにすればよいでしょうか?宜しくお願いします。

  • コメントを残す

    メールアドレスが公開されることはありません。

    ABOUTこの記事をかいた人

    こんにちは。山田どうそんです。37歳未婚。現在、東京都江東区に住んでいます。出身は佐々木希と同じ、秋田県秋田市。趣味は筋トレで週3回トレーナーをつけてジム通いしています。ビジネスは、コンテンツ制作のコンサルティングを行っています。
    もともと、月収15万円の借金だらけ。未来に何一つ希望を持てなかった僕ですが、インターネットのビジネスをしたことで今では値段を気にせず買い物ができるようになりました。そうなれた要因の一つに「コンテンツ制作のスキル」を身につけたことがあります。
    なぜ、「コンテンツ制作のスキル」を身に着けたことで稼げるようになったのか?それは、「コンテンツの質」=「集客力」だからです。多くの方がビジネスをはじめて、うまくいかないのは集客ができないからです。集客をするために、Facebookを始めたり、インスタグラムをはじめたり、YouTubeをはじめたり・・・。いろいろ試してみても、思ったようにうまくいかない人が多いのが現状です。
    そんな、集客で悩んでいる人のために、どうやってコンテンツ力を上げて集客力を身につけられるのかをコンサルしています。
    僕は、ネットビジネスで人生を大きく変えることができました。一生貧乏で一生自分に自信を持てない人生を歩み続けると思っていました。それが、今では上場企業の部長クラスの人よりも稼げるようになり、自分に大きな自信を持てるようになりました。それは、正しい知識を正しく学んでいったからです。ビジネスで集客力を身に着けて自分のビジネスを成功させたいという方のために力になりたいと思っています。
    そして、僕は、もっともっと成長して人生を楽しみたいと思っています。