WordPressで運営するブログにレーダーチャートを導入!ぶっちゃけどう?

ブログやサイトを運営していると、おすすめランキングがよく表示されますよね。

僕もランキング記事を作っていますが、

TEKEO
TEKEO

ちょっと他と差別化したいな〜

と、いうことでこんなレーダーチャートを作ってみました。

上記Twitterの記事は『おすすめマンガアプリ』の記事になります。

何を使ってどうしたかを簡単に紹介して、反映させた結果も紹介しようと思います。

WordPressでChart.jsを使用する

どっかの賢い人が配布してくれている、chart.jsを利用します。

Chart.js | Open source HTML5 Charts for your website
Simple, clean and engaging HTML5 based JavaScript charts. Chart.js is an easy way to include animated, interactive graphs on your website for free.

レーダーチャート以外にも多くの種類のグラフを動的に生成できる。

javascriptの経験が無い人だと導入にはちょっと厳しいかもしれないですが、

  • 見た目が綺麗
  • 導入したブログが多数ある
  • 日本語ドキュメントがある(非公式だけで和訳したサイト)

など、メリットが多いですね。

今回はこのChart.jsを使ってWordPressのブログで、レーダーチャートをショートコードで利用できるようにしました。

 

↓こんな感じのショートコードを挿入

[rchart factor="画力,ストーリー,エロさ,笑い,シリアス" rate="4,5,4.2,3,3"]

 

↓結果

うん。良い感じ。

Chart.jsの使い方で参考にしたもの。

参考にしたサイト

Chart.jsで検索するといろいろヒットするけど、ドキュメントを日本語にしただけの人が多いなか、参考サイトの人は具体的なコードを書いていてわかりやすい。

 

コードはfunctions.phpに書けばOK。ショートコードでも利用できます。

ちなみに僕は、マンガのデータ管理をしているプラグイン(自作)でも使いたかったのでプラグイン化しました。

TEKEO
TEKEO

ぶっちゃけどうよ?

反応が良ければ、他に運営しているブログ、サイト、WEBサービス等で使いたいところ。

今のところ、PV的に関係無さげでございます

見栄えは良いように感じますが、基本的にGoogleから評価されることは無いと思います。

javascriptを実装する必要があるので、必然的に読み込みに負荷がかかるのでむしろマイナスかも。

ユーザーファーストで考えると、、、

4.0

これで十分かもしれません。

なので無理して作って実装する必要はないかなw

 

なぜ今回実装しかというと、ユーザーが使うデバイスも進化しているので、そろそろ負荷に耐えれるかな?って感じで実装してみました。(知らんけど)

実は何年も前に似たようなモノを作ったんだけど、閲覧しているとスマホが熱〜くなったり、読み込みが遅いと感じたりしたんですよね。

今ならデバイスが進化して、ストレスなくサクサク進むため、意外に評価されるのでは?という感じで再実装した形です。

今の所、PVには一切影響していませんw

TEKEO
TEKEO

ブロガーの方、TwitterでDMやコメントお待ちしております。

ショートコード化についての簡単な相談もお聞きします。

タイトルとURLをコピーしました