コンテンツへスキップ

毎月読んだ本のデータベースをローカル環境のWPで作っているのですが、Amazon の星評価レビューのように視覚的な評価があると、後で見たときに参考になるなと思っていました。数が少ないうちは手打ちで「★★★☆☆」のような感じでやってたのですけれど、良いプラグインが見つかったので、その使い方とテーマでの設定をメモ。

プラグインの作者さんは日本のかたらしく、公式サイトでの説明もわかりやすいです。

「Shortcode Star Rating」

  • ショートコードに数字を入れるだけ
  • 星の色も変更可能
  • 0.5区切りで星半分も表示
  • カスタムフィールドと合わせて使えば色んな所に表示可能

このプラグインだと、カスタムフィールドにショートコードを書き込めば、投稿記事以外にも(サイドバーの最近の記事一覧の下とか、トップページ記事一覧のタイトルしたとか)簡単に表示できます。
感謝。

今回参考にしたサイト

ショートコードで星が付け放題なWordPressプラグインを公開しました
http://www.modshrink.com/2014/03/26/215204

WPループの基本
http://www.webcyou.com/?p=3297

レビュー記事を分かり易く!星評価をWordPressに実装するなら「Shortcode Star Rating」プラグインがおすすめ
http://room9.jp/2014/04/03/070000/

WordPressのカスタムフィールドでショートコードを使う
http://kachibito.net/wordpress/using-shortcode-with-cf.html


インストール

ダッシュボード > プラグイン > 新規追加で "Shortcode Star Rating" を検索

shortcode_star_rating最終更新:2年前となっていますが バージョン4.5.2 で動作します。
(WP3.8 以下だと動作しません)

設定

ダッシュボード > 設定 > Shortcode Star Rating

setting-ssr設定の中はいたってシンプルで、星の色とサイズが指定できます。

setting-ssr2

 


使い方1 投稿記事の中に表示する

投稿記事の作成時に、ビジュアルではなくテキストで作成すると

setting-ssr3[Star Rating] というボタンが追加されています。
ボタンを押すと

[star rating=""]

上記のようなショートコードが入力されます。

ここに星の数を記入して、例えば [star rating="4.5"] と記入すれば・・・

setting-ssr-star

こんな感じで表示されます。
星の数は5段階で0.5刻みに指定できます。

テーマもいじらず、本文の中にショートコードを書き込めば表示できるので、これが一番お手軽です。


使い方2 テーマ内の好きな場所に表示する

Shortcode Star Rating 投稿記事の本文内でも使用できますが、テーマの中(ループ内)の好きな場所に設置して表示することができます。

このコードをテンプレート内に記述することで、カスタムフィールドで呼び出すことができます。
(後でわからなくなるので //Shortcode Star Right とコメントを入れてます)

まずはテーマ内に設置します。

無料テーマ Simplicity2.0 の中での使用例

表示する場所:シングルページのタイトル下

ssr-use-cases1-1編集するファイル:entry-body.php

</h1>で検索して18行目辺りに出てくる。


表示する場所::本文の一番最後

ssr-use-cases2編集するファイル:entry-body.php

<div id="the-content" で検索してくると70行目辺に出てくる。


表示する場所:トップページのエントリーカード

ダッシュボード > カスタマイズ > レイアウト(全体・リスト)> 一覧リストのスタイル
で設定できるトップページの記事リストの中に星を表示します。

ssr-use-cases3編集するファイル:entry-card.php

ファイルの一番最後の部分にある </article> の上に追加。
一覧のスタイルを変更してもちゃんと表示される。


表示する場所:関連記事の一覧

関連記事は「タイトル」「抜粋」「続き」の順で並んでいるけれど、今回は「続き」の上に星を入れてみる。

  1. タイトル
  2. 抜粋
  3. 星 (ココ)
  4. 続き

ssr-use-cases4編集するファイル;related-entries.php

26行目辺り </header> と <footer> にはさまれている所に追加。


表示する場所:サイドバーの新着記事のタイトル下

ssr-use-cases5編集するファイル:new-entries.php

リスト終了 </li> の真上29行目辺りに追加。


使い方:カスタムフィールドを使って呼び出す

ssr-use-cases6テーマに細工をしても呼び出さないことには使えません。カスタムフィールドでショートコードを登録してテーマに反映させます。

投稿画面にあるカスタムフィールドに「名前」を入れる
名前:star(任意の名前)

その横にショートコードを挿入
[star rating=" "]

ここで好きな数字1~5を書き込む

もし、投稿画面でカスタムフィールドが表示されていない場合は、投稿画面上にある
[表示オプション] > カスタムフィールド
にチェックを入れること
これで全て完了。

 

Tiny Forge-Theme Preview本業である整体屋の店舗サイトに使っていたWordPress の基本テーマ Twenty Eleven。 シンプルで好きなテーマなのですがレスポンシブに「かろうじて対応してます」といった感じで今の時代(ウチの場合スマホでのアクセスは約7割)には対応できなくなってきた。
一応、子テーマを作成してカスタマイズしているのですが、モバイル対応は Twenty Eleven 基本そのままなんですね。特にメニューがハンバーガーに対応してないので、トップ画面はメニューが大半を占めてしまう事態に。ハンバーガーは賛否両論ありますけれど(ハンバーガーメニューはゴミだ!!|L'OREM)固定ページが多く、そのほとんどがメニューに入れてあるような店舗サイトはひどいことになります。

そんなわけで Twenty Eleven に近いテーマを色々調べてみたら Tiny Forge というテーマを見つけた。
その前に、有名な無料テーマ

  • STINGER 7
  • micata
  • Simplicity

などは試してみたのだけれど、うちのサイトには多機能すぎて、もっとシンプルなテーマが欲しかったのです。

望むこととしては大まかに分けて3つ。

1:子テーマを作成せずに使いたい

たまにしか触らないくせにテーマいじってしまうと、後でさっぱりわからなくなるんです。このサイトとお店のサイトは3年ぐらいいじってないし。

2:JetPack の機能「CSS 編集」だけで CSS カスタマイズしたい。

カスタマイザーがあるテーマだと「CSS 編集」よりも優先されちゃうんですよね。
これが出来れば STINGER 7 か micata にしてました。

3:ヘッダー画像が一つの画像サイズでPCとモバイルに対応してくれる。

Twenty Eleven のようにモバイル表示のときに小さくなってもいいので、PCと同じ画像を縮小して表示して欲しいのです。
これが今どきあまりありません。まぁ古いデザインなのだろうけれど。
ヘッダー問題が解決すれば多分 Simplicity にしてたんですけど、 Simplicity のヘッダーは納得いくような表示にするには大変でした。

そんな訳でテーマを探すこと数秒で見つけたのが Tiny Forge です。
ダッシュボード > テーマ > 新規追加
で表示されたページにたまたまありました。

ほんとに至ってシンプルで Twenty Eleven のバージョンアップ版みたいです。

とりあえず良かった。

※現在 Tiny Forge は開発終了していて、新しいテーマは Tiny Framework です。

このテーマに必要最低限のプラグインを入れて完成。

  • Akismet
  • Business Calendar
  • Contact Form 7
  • Crazy Bone (狂骨)
  • Google XML Sitemaps
  • IP Geo Block
  • Jetpack by WordPress.com
  • NewStatPress
  • Smart Google Analytics Code
  • WP Dashboard Notes
  • WP Multibyte Patch
  • Standard Widget Extensions

特に SEO を重視していないのでプラグインも少なめです。
(コメントも開放してないから Akismet とか外してもいいかもしれない)

テーマを少しいじらないといけないけれど、投稿別のカスタムヘッダーにも対応してくれている。

このサイト(web-memo)はほとんど自分の備忘録で、スマホで見ることもないんだけれど、 Tiny Forge にしたらプラグインがかなり減らせるから今度移行しよう。

 

2016/06/10 追記

最新版は Tiny Framework になったみたい

このサイトのテーマを変更しようとして調べてみたら、Tiny Forge は開発終了して現在は Tiny Framework に変更になったらしい。
この間に STINGER の最新版 STINGERPLUS も発表されたので一応使ってみたのですが、やはり多機能すぎて Tiny Framework にしました。 Tiny Forge  との違いははデザインに少し変更などがあるみたで、好みで言えば Tiny Forge のほうが好きなのですが、これからバージョンアップもしないテーマを使ってもしかたがないので、今のところはこれで我慢です。

あとはトップページが、リスト表示されれば言うこと無いのですが。

%d人のブロガーが「いいね」をつけました。