[WordPress]SNSに連携しないオリジナルのいいねボタンを作成する
2018.12.27
ども、六崎です。
ちょいと前にPokemon GOにトレーナーバトル機能が付くという案内がありましたね(これがアップされる頃には実装されてるだろうな…
アプリリリース当初からプレイしていたものの、ここ1年くらいは全くプレイしなくなりました。
なぜなら歩かなくなったから!(どやっ
家から駐車場の50m程度、駐車場から会社100m程度…の往復しかしてませんw
そりゃ、ポケモンでないし、ポケストップ&ジム無いからボール無いし…ちょっと歩いただけで筋肉痛になりますよね。
気付いたら2世代分くらい取り残されています(汗)
あ、でも第1&2世代のポケモンはほぼゲットしました!
地域限定とかミュウツー&ミュウ以外の…
去年の夏は横浜まで行って、アンノーンとピンクのポケモン達をいっぱいゲットしてました。
このどハマりしている時期にトレーナーバトルができてれば、多分まだプレイしていたと思うのですが…運動を兼ねて復活しようかしら。
ちなみに私が好きなポケモンはチコリータです。
昔々、チコリータが好きすぎて銀版をチコリータとイシツブテのみで全クリしたことがありますw
↑チコリータの弱点補強でイシツブテを29番道路でゲットして進めてた
…では、本題にいきましょ(笑)
世間でいう「いいね!」ボタンといえば、Facebookの物がパッと思いつくかと思います。
コードをペッと貼り付ければ簡単に設置できるし、便利ですよね!
ただ、Facebookとの連携はいらないんだよなー…って方への記事です。
※その他SNSの連携もありません!
今回ご紹介するのは、SNSに連携しないwordpressオリジナルのいいねボタン「WP ULike」です。
WP ULike
このプラグインでできるのは…
・オリジナルのいいねボタンが作れる
・CSSでオリジナルデザイン可能
・カウントしてくれる
・固定ページ、投稿、カスタム投稿に設置可能
・いつ押されたか、誰が押したかなどステータスチェック可能
ヤバない?ヤバない?(笑)
弊社サイトでも、採用情報ページ下部で設置してます。
ついでにポチッとしてくれると嬉しいです(ほら、どんな感じになるかDemo見たいでしょw
スワローインキュベート 採用情報(いいねボタン)
あ、押しても特に何もなりませんw
カウントが+1されるだけです。
上記ページのは連打できないようにしてますが、ページを更新等すると再度押せるようになってます。
では、やり方です。
1.WP ULikeプラグインをインストールしてください
・プラグイン > 新規追加の場合
・サイトから直接ダウンロードの場合
WP ULike
wp-content/plugins に解凍したフォルダをいれてください。
2.プラグインを有効化
3.WordPress管理画面の左メニューに「WP ULike」から設定する
WP ULike > WP ULike Setting を選択し、設定画面を表示
【General】
・Button Type:ボタンの表示タイプ(画像 or テキスト)
・Button Icon (Like):いいね!の時の画像
・Button Icon (Unlike):うーん…の時の画像
・Button Text (Like):いいね!の時の文言
・Button Text (Unlike):うーん…の時の文言
ここから先は特に設定なし。
【Posts】
・Themes:テーマ選択
・Auto Display:自動表示するか否か
・Auto Display Position:ボタンの表示位置(上記設定時のみ、自動表示
ちなみに、ちょっと下にあるLogging Methodでボタンの押し方(二重投票可能か否か)を設定できます。
弊社サイトでは、多重投票をしてもらいたいので「Do Not Log」を選択しています。
・Logging Method:ログの保存方法
- Do Not Log:多重投稿可能
- Logging By Cookie:Cookie判別によって、二重投票を防止
- Loggin By IP:IPアドレスを判別して、二重投票を防止
- Logging By Cookie & IP:CookieとIPアドレスから判別して、二重投票を防止
- Logging Username:ユーザー名で判別して、二重投票を防止します。
設定は以上です。
その他設定詳細は、ブログ下に参考ブログをリンクしますのでそちらからご覧ください。
…設定項目が少ないのは、重要な動的箇所だけプラグインに頼り、デザイン部分はがっつりCSSで書いてるからなんです。
手作りでやったら、DBと連携させなくちゃいけないんで…ちょっと勘弁な!(笑)
ちなみに、cssが書けない方は【Customize】を開いてみてください。
Custom StyleをOnにするとボタンの背景色や文字色などが直感的に指定できます。
4.自動配置ではない場合、以下のタグを表示希望場所に設置する
1 | [wp_ulike] |
※全角[]を半角[]に修正してください。
5.CSSでスタイルを編集する
※上記では、クリック後に「.wp_ulike_click_is_disabled」が付与されませんが、Demoでお見せしている方ではクリック後、背景がグレーになります。
また、この集計結果は「WP ULike Statistics」から見ることができます。
・トータル投票数
・昨日&今日の投票数
・誰がクリックしたか(恐らく「Guest User」がダントツになると思います)
・ページ別投票数
PV数とは別に本当に良記事だったかなどの計測も可能になりますね!
逆に「うーん…」の数が多かったらショックだけど(笑)
ではまたっ!
↓↓↓ぜひチェックしてください
~提供中のヒューマンセンシング技術~
◆人物検出技術
歩行者・来店者数計測やロボット搭載も
https://humandetect.pas-ta.io
◆視線検出技術
アイトラッキングや次世代UIに
https://eyetrack.pas-ta.io
◆生体判定技術
eKYC・顔認証のなりすまし対策を!
https://bio-check.pas-ta.io
◆目検出技術
あらゆる目周りデータを高精度に取得
https://pupil.pas-ta.io
◆音声感情認識技術
会話から怒りや喜びの感情を判定
https://feeling.pas-ta.io
◆虹彩認証技術
目の虹彩を利用した生体認証技術
https://iris.pas-ta.io