WEBのこと

ワードプレスで簡単にお洒落な料金表やプランを実装できるプラグインの紹介

ワードプレスを使ってサイト制作している人は必見の簡単に料金表が作れるプラグインを紹介していく。

HTMLとCSSを使ってtableでお洒落な料金表を作ろうと思うとちょっと面倒ですよね。なので、プラグインで時短しよう!

料金表やプラン表、比較表はわかりやすさが重要ですが、今回紹介するプラグインを使えばわかりやすい且つお洒落なテーブルが組めるよ!

そこで、本記事では《ワードプレスで簡単にお洒落な料金表やプランを実装できるプラグインの紹介》について書いていきます。

\ 超わかりやすいです /

> WordPress初心者にオススメの本

Easy Pricing Tables by Fatcat Apps

ワードプレス料金表 | プラグイン

Easy Pricing Tables を使えば本当に簡単に料金表が作れる。直感的に作成できるのでHTMLやCSSが分からない方でもデフォルトの状態ならすぐ作成可能!

早速料金表プラグインをダウンロードしよう!

>> DL出来るサイトはこちら

料金プランプラグイン検索 | ワードプレス

Easy Pricing Tablesで料金表を作っていく

ワードプレスの管理画面「プラグイン」から【Easy Pricing Tables】を検索してインストールしてね。

料金表プラグイン 新規追加

インストールをして有効化をしたら管理画面に「Pricing Tables」という項目が出ているのでクリック。

Add New」から新しく料金表テーブルを作っていきます。

Easy Pricing Tables | Contentタブ編

上記画面の料金表に内容を入力していくぞ!

初期状態でContentのタブが開いているのでこちらから入力を始めよう。空欄にカーソルを合わせると入力できるようになるよ。

★FeatureとDelete プラン表のFeatureを選択すると選択したプランを目立たせることが出来る。
オススメのプランがあったらチェックを入れよう。
Name プランの名前を入力
Pricing 料金を入力。期限を設ける場合は期限も記入しよう。
Features プランの内容を1行ごとに区切って書いていこう。自動的にテーブルとして入っていくぞ。
Button Text ボタンに表示するテキストを入力しよう。詳しい内容に飛ばしたい場合は「詳しくはこちら」など
Button URL ボタンのリンク先を設定しよう。

画像の右のほうにある【New Columns】で新しい料金表を追加出来る。サービス内容が多くても安心だ。

この時点で一回「Save & Preview」ボタンを押して仕上がりを確認しよう。

料金表デフォルト完成

画像のように入力すると上記のような料金プラン表が出来るぞ!簡単すぎ!
一目で比較内容も確認できるから分かりやすい。

料金表ショートコード

Depeloy(Get shortcord)」ボタンをクリックすると上記画面のようにショートコードが表示されるので、料金プランを表示したいページにコピペして貼り付けよう!

これで設置も完了!楽ちん!

目立たせたいプランに表示するテキストは初期状態では「Most Popular」となっているので、日本語表記にしたい方は次へ

デフォルトの状態だと味気ない、もっとカスタマイズしたいという人も次へ。

満足したという人はここまででOK!

Easy Pricing Tables | Designタブ編

料金表 Designタブ

デフォルトでは物足りなかったようですね・・・?

大丈夫、そんなあなたのためにDesign機能も付いている!

General Settings」を選んで料金表をカスタマイズしていく!

Featured Label Text ★Futureで選択した目立たせたいプランの表示テキストを変更できます。
Border Radius プランの枠の囲みに丸みをもたせたい場合はpx数をあげましょう。
Automatically match Row Height 自動で高さをマッチさせますか? チェックを入れておきましょう。

その他の項目、「Font Sizes」はフォンサイズの設定。「Button Colors」はボタンの色の設定。「Custom CSS」はカスタマイズしたいときに使おう。

広告

WordPressで簡単に料金表を作る方法まとめ

本記事では、《ワードプレスで簡単にお洒落な料金表やプランを実装できるプラグインの紹介》について書いてきました。

Easy Pricing Tablesプラグインを使えば超簡単に料金表が作れますね。さらに、CSSをカスタマイズすればオリジナルの料金表も作成可能と、幅が広がります。

ワードプレスで簡単に料金表・プラン表を作りたい人にはオススメですよ。

プログラミングでわからないことは無料のteratailで質問!使い方、登録方法を解説
プログラミングでわからないことは無料のteratailで質問!使い方、登録方法を解説エンジニアのための無料質問サイト【teratail(テラテイル)】をご存知ですか? プログラミングでの悩み事や困ったことはテラテイ...

\ 超わかりやすいです /

> WordPress初心者にオススメの本