Wordpress サイト制作

ワードプレスのテーマ「Divi」とプラグイン「WPRichSnippets」でランキングサイトを作る手順

更新日:

今回はワードプレスのテーマ「Divi」とプラグイン「WPRichSnippets」+アドオンを使って「ランキングサイト」を作る手順を説明します。

このブログへの検索流入キーワードも「ワードプレス ランキングサイト作成」などが多いので、きっとワードプレスを使ってランキングサイトを作りたいと思ってる人も多いはず?

ワードプレスでランキングサイトを作ってみたい!と思ってる人は一読してくれると嬉しいです。

いま実際にテーマ「Divi」とプラグイン「WPRichSnippets」+アドオンを使用し作成しているランキングサイトがコチラです。

https://credit–card.jp/ranking/allcard/

※ワードプレスの使い方やテーマ・プラグインのインストール方法は割愛させていただきます。

① 使用するワードプレスのテーマ「Divi」

youtu.be

最大の特徴はなんといっても「The Divi Builder」

The Divi Builderを使用すればドラッグ&ドロップで簡単にサイトを構築することが可能。煩わしいHTMLの知識は必要ありません。

しかも、初めから19種類のテンプレートが用意されているので、難しい知識なしで色々なレイアウトを作り上げることができます。

もちろんレスポンシブ対応。

Divi WordPress Theme

Diviテーマ

② 使用するワードプレスのプラグイン「WPRichSnippets」

WP Rich Snippets

様々なレビューサイトを構築可能。

・ユーザーレビューサイト

・製品レビューサイト

・レシピレビューサイト

・組織レビューサイト

・レストランレビューサイト

豊富なアドオン(追加機能)を使うことによってランキングページ、比較ページ、ロケーションページ、データ一覧などのページを作成することができます。

③ 使用するWPRichSnippetsのアドオン「WPRS Ranking Table」

こちらは上記「WPRichSnippets」に付属しているアドオンになります。

④ 使用するWPRichSnippetsのアドオン「Box Shortcode」

こちらも上記「WPRichSnippets」に付属しているアドオンになります。

ランキングサイトを作る場合は、WPRichSnippets+WPRS Ranking Table+Box Shortcodeが必要になりますので、こちらの3つのプラグインは予めインストールしておきましょう。

以上のテーマと、プラグイン3つを使用してランキングサイトを作ります。

まず始めにWPRichSnippetsのインストールが終わったら「ライセンス」の登録をします。

① WPRichSnippetsの管理画面からAccountへ進み、View Licensesをクリック。

f:id:YAMAKYO:20160809013146j:plain

 ② 鍵マークをクリックするとライセンスキーが表示されるのでコピー。

f:id:YAMAKYO:20160809013159j:plain

③ ワードプレスの管理画面より≫RichSnippets≫Licenseへ進みます。

f:id:YAMAKYO:20160809012130j:plain

 ④ ライセンスキーを入力し、Deactivate Licenseをクリック⇒Your license is valid!と表示されたら成功です。

f:id:YAMAKYO:20160809014213j:plain

⑤ 続いて固定ページを新規作成しましょう。

固定ページ≫新規作成≫Diviビルダーを使うをクリック

f:id:YAMAKYO:20160809022654j:plain

⑥ 列を挿入≫カラムを選択≫モジュールを挿入≫「テキスト」を選択

f:id:YAMAKYO:20160809023206j:plain

⑦ テキスト欄に[wprs-table type=”rating” cpt=”post”]と入力し、保存します。

[wprs-table type=”rating” cpt=”post”]はランキングを表示するショートコードになります。

各パラメータは以下

レビューのタイプによって type=”rating” は変更して下さい。

ランキングをカテゴリーごとに表示させたいなら cat=”●●” でカテゴリー番号を指定します。

パラメータを変更することによって色んなパターンのランキング表示することができます。

  • num =”10″, number of posts, default = 10
  • order = “meta_value_num”, order, default = meta_value_num (rating, rank)
  • cpt = “post”, custom post type
  • type = “rating”, review type, example: (rating, percentage, votes, aggregate)
  • cat = “”, categories
  • tag = “”, tags
  • parent = false, id or parent page, to display child pages
  • taxonomy = false, taxonomy name
  • tax_term = false, taxonomy terms “term1, term2”
  • rank = “”, enable/disable rank
  • images = “”, enable/disable images
  • header_rank = “Rank”, edit table header, default = Rank
  • header_image = “Photo”, edit table header, default = Photo
  • header_sumary = “Summary, edit table header, default = Summary
  • header_price = “Price”, edit table header, default = Price
  • header_rating = “Rating”, edit table header, default = Rating
  • header_action = “Action”, edit table header, default = Action
  • summary = “”, enable/disable summary
  • read_review = “Read Review”, edit read review anchor, default: Read Review
  • price = “”, enable/disable price
  • rating = “”, enable/disable rating
  • action = “”, enable/disable call to action
  • action_text = “Visit Site”, edit button anchor text
  • min = “”, set minimum user reviews (for user aggregate reviews)

これで、ランキングを表示させる基盤のページは完成です。

f:id:YAMAKYO:20160809023859j:plain

⑧ 続いて投稿の設定。

管理画面≫投稿≫新規追加を選択。

schema(スキーマ)が表示されるのでレビューの形式を選択します。

今回はProduct(製品レビュー)を選択。

各レビュー形式のデモ画面はコチラ

f:id:YAMAKYO:20160809030619j:plain

⑨ Pros(メリット)、Cons(デメリット)を入力(HTML使用可)

f:id:YAMAKYO:20160809031747j:plain

⑩ 値段を入力

f:id:YAMAKYO:20160809031958j:plain

⑪ 住所を入力

f:id:YAMAKYO:20160809032349j:plain

⑫ 営業時間を入力

f:id:YAMAKYO:20160809032648j:plain

⑬ 動画や画像を選択

f:id:YAMAKYO:20160809032925j:plain

⑭ リンク(遷移先)の設定(Font Awesomeアイコン使用可)

f:id:YAMAKYO:20160809033050j:plain

⑮ Criteria(基準値)の設定

 ここにレビュー項目を記載します。

f:id:YAMAKYO:20160809033353j:plain

レビュー項目を設定すると、商品(投稿)ページで以下のように表示されます。

f:id:YAMAKYO:20160809033700j:plain

⑯ 最後に著者名を入力

f:id:YAMAKYO:20160809033846j:plain

⑰ 上記で設定したスキーマを表示させるために、テキスト欄にショートコードを記入します。

[wprs-box]

このショートコードを記入することで、上記スキーマを表示させることができます。

f:id:YAMAKYO:20160809034839j:plain

以上で設定は完了です。

あとは、商品(投稿)ごとに上記⑧~⑯を記入しどんどん追加していくだけです。

試しに自分で商品のレビューを書いてみましょう。

なかなか商品のレビューが反映されない場合は

Rich Snippets  設定 ≫ Rating ≫ ユーザーのレビューをアップデートをクリックしてください。

f:id:YAMAKYO:20160809035637j:plain

レビューが反映されます。

以上の過程でランキングが表示されるはずです。

上記で使用したテーマ「Divi」

f:id:YAMAKYO:20160809042617j:plain

1番人気のディベロッパーで89ドル

89ドルでテーマ以外の以下プラグインもオマケで使用できます。

・The Divi Builder

Bloom Email Opt-Ins

Monarch Social Media Sharing

HandHeld Mobile Plugin

Maintenance Mode Plugin

Elegant Shortcodes

他のサイトにも使用できるのでおトクなこと間違いなし!

なお、もうすぐバージョン3.0がリリースとの情報もあり、3.0では今以上に素晴らしい機能が盛り込まれるとのこと。

ランディングページ、ショッピングサイトなど多彩なページ作成が可能な「Divi」。

日本語にも対応しているのでおすすめです!

続いて上記で使用したプラグイン「WPRichSnippets

f:id:YAMAKYO:20160809043717j:plain

1番オススメのプランは「プロ」

以下14個のアドオンが使いたい放題でライセンスは無制限!

・WooCommerce

・Shortcodes

・DataTables

・Software Specs

・Box Shortcode

・Anonymous User Reviews

・Customizer

・Front-End Entry Submit

・User Reviews Image

・Call-To-Action

・Ranking Table

・Display Rating

・Compare

・Locations

めちゃくちゃ安いです。

WP Rich Snippets

このようにワードプレスのテーマとプラグインを使えば多彩なサイトを作ることができます。

年々テーマやプラグインの質も上がってますし、HTMLなどの知識もそんなに必要じゃなくなってますね。

業者に依頼すれば何十万、何百万するレベルの物が数万で手に入る時代です。

上手く利用して自分だけのオリジナルサイトを作りましょう。

以上、「Divi」と「WPRichSnippets」でランキングサイトを作る手順でした。

Wordpressテーマランキング

Divi

Affinger4

OPENCAGE

-Wordpress, サイト制作

Copyright© ちょっとだけワードプレス , 2017 AllRights Reserved.