みなさんこんにちは!おさかなです!
今回は「【WordPress】この記事は役に立ちましたか?を実装するプラグイン!「Helpful」の使い方!」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・サイトを訪問した人からのフィードバックが欲しい方
・WordPressを使用している方
・「この記事は役に立ちましたか?」ボタンを実装したい方
はじめに
みなさんはWebサイトを訪問したときにこんなものを見かけることはありませんか?

そうです!ブログ記事を読んだ読者の方が「GOOD」か「BAD」で評価できる機能です!(わ~!)
運営者から見ても、読者の方からフィードバックをもらえると助かるし、読者から見ても、気軽に意思表示ができる優れものです!(すごい!)
今回はWordPressの「Helpful」というプラグインを使って、「この記事は役に立ちましたか?」を実装していきたいと思います!

↓WordPressのプラグインの追加方法はコチラ
「Helpful」を実際につかってみよう!
それでは早速つかってみましょう!
無事に有効化できたら、メニューに「Helpful」が追加されているのが確認できます。

まずは、上の「Settings」という項目をクリックします!

すると、このような画面が出てきます!

フィードバックが得られるとグラフが表示されます!

↓それぞれの項目はこんな感じ✨
Texts … 基本設定
Details … 機能のカスタマイズ
Design … デザイン
Feedback … フィードバックの処理
System … データのリセット
Log … データの記録
様々な項目があるのですが今回は最低限の設定だけを行っていきます。
設定しよう!
まずは「Texts」>「Before vothing」という項目へ向かいます。
ここではボタンをクリックする前に表示する「タイトル」や「テキスト」を自由に入力できます。

↓この部分

次に「Texts」>「Already voted」>「After voting (pro)」と「After voting (contra)」の中にテキストを入れてみましょう!
ここでは、ボタンをクリックした後に表示されるメッセージを入力することができます。

↓この部分

次に「Texts」>「Already voted」>「Answer button」で、回答ボタンを設定してみましょう!
Good/Badの他にも、Yes/Noなど用途に合わせてテキストを変更してみてください!

↓この部分

最後に一番下の「変更を保存」という緑色のボタンをクリックします!

ボタンのデザインを変えてみよう!
恐らくデザインの設定をしていないと味気ない感じになってしまうので、見た目も整えていきましょう!
まず「Design」項目をクリックします!
すると、このようなページが立ち上がると思います。

左側にCSSを設定できる画面が登場するので、自分でコードを書いてデザインできます。

もしくは、いくつか用意されている「テーマ」の中から選択することもできるので、CSS書けないよ…って方もご安心ください…!

テーマ一覧
Base

Dark

MInimal

Flat

Simple

Clean

Blank


変更できたら、左上の方にある「公開ボタン」を押すのを忘れずにね…!
ここまでで無事に設定は完了です!(ふう…💦)
動作をチェックしていこう!
それでは、ボタンがきちんと動いているか動作をチェックしていきましょう!
投稿済みの記事の一番下を見てみると、きちんとボタンが反映されているのがわかると思います!(どの記事見てもいい感じ!)

↓動作も良好です。

ダッシュボードには円グラフも表示してくれるので、読者の反応をざっくりと把握することが出来ます!(便利~!)

これで、ボタンの実装は完了です…!おつかれさまでした☕
いかがだったでしょうか?
おさかなびではプログラミング学習中の人、ブログ初心者に向けて、「デジタル時代を楽しむためのミニ知識」をご紹介しています!
ぜひ他のページも覗いてみてください…!
それでは今回はこの辺で!
ここまで読んでくださり、ありがとうございました!
おさかなでした!
当サイトを気に入っていただけましたら、匿名OK!15円から!のサポート支援に是非!ご協力をお願いいたします!
ご支援いただいたものは、「プログラム関連の書籍」や「新しいWebサービス」などから知見を得るために活用させていただきます。✨
※「受け取り人メールアドレス」には「osakana1699@gmail.com」を入力してください。