WordPress(AFFINGER5)で「いいねボタン」を設置してみました。

スポンサーリンク

 

今回、Wordpressプラグインの”WP ULike”を使って「いいねボタン」を設置してみました。 ”WP ULike”の設定方法とAFFINGER5テーマ機能を使って「いいねボタン」のカスタマイズと配置する方法をご案内します。

 

 

スポンサーリンク

 

「いいねボタン」♥を設置する意味

投稿記事の内容評価には、多く講読されているかが分かるPV数の指標で判断することもできますが、これはキーワードなどのSEOの要素で左右されるということもあり消極的指標と思います。 

れに対して、ブログに「いいねボタン」を設置することで、購読者がいいと思ったらクリック・アクションが伴う積極的指標ということになると思います。 投稿記事が読者からどのように見れれているかを知るフィードバック指標の一つと考えられます。

 

”WP ULike”の機能

 

WordPressプラグインの”WP ULike”はFreeバージョンと有料(パーソナルで29ドル/年額)のProバージョンがあります。 Proバージョンは「いいねボタン」のテンプレートの種類も豊富でDislikeボタンもあります。 一方のFreeバージョンは機能が限られ4種類の「いいねボタン」しかありませんが、統計機能を有していますので取り敢えずFreeバージョンをインストールしました。 

機能ポイント

「いいねボタン」の機能はボタンをクリックした数をカウントするという単純な機能では無く、ボタンをクリックした端末のIPアドレスを調べてクリックカウントを管理しています。 また、同一ページに「いいねボタン」が複数設置されていても連動(同期)したカウント動作になります。

「いいねボタン」の動作は、同一IPアドレスの端末で「いいねボタン」をクリックすると1カウント増えますが、更にもう一回クリックすると1カウント減じます。 つまり「いいねボタン」を間違えた場合の修正が行えます。

 

”WP ULike”のインストールと設定

 

step
1
インストール

WordPressの管理画面のプラグイン>新規追加 に移動して、キーワード検索窓に「WP ULike」と入力すると候補プラグインが表示されますので、その中から”WP ULike”を選んでインストールします。 インストールが完了したら有効化をクリックします。 すると管理画面の左側面に”WP ULike”アイコンが現れ、マウスを上に乗せると「設定」や「統計」などが選べる様になります。

 

step
2
”WP ULike”の設定

ここでは、当サイトで設定したポイントのみ説明します。

Confirmation>一般設定はデフォルトのまま
Confirmation>Content Types設定は以下の通り
  • テンプレートは以下にしました。

  • Automatic Disp Restriction:全てを選択しています。
  • Post Type Firterは空にしています。(「いいねボタン」の設置はサイドバーにする予定です。 空にしないと、「いいねボタン」がコンテンツ下部に表示されてしまいます)

  • コメントの自動表示はOFFにします。
Translationsデフォルトのまま
Developer Tools>カスタムスタイル「いいねボタン」の背景色を指定

CSSは以下のコードを設定しています。

 

 

AFFINGER5機能を使った「いいねボタン」のカスタマイズと配置

 

step
1
「いいねボタン」の装飾

”WP ULike”の「いいねボタン」がBeforeで示される様にシンプル過ぎるので、Afterで示されるデザインにしました。

BeforAfter
13+
いいねボタン
13+

この記事が気に入ったら
「いいねボタン」を!

 

AfterデザインのHTMLコードは以下の通りです。 

  • AFFINGER5機能の「左右freeサイズ」を利用しています。
  • ハイライト行の【wp_ulike】が「いいねボタン」のショートコードです。

 

step
2
「いいねボタン」の配置

「いいねボタン」の配置先は、PCとモバイルで位置を変えています。

  • PCの場合:スクロール広告用のサイドバーに配置し、TOPページは表示しない様にしています。(【pc】ショートコードを使って条件分岐して表示しています)
  • モバイルの場合:投稿ページ及び固定ページの記事下に配置しています。(【nopc】ショートコードを使って条件分岐して表示しています)

以下は、PCの場合の配置例です。

PCの場合の配置例
サイドバーの「よく読まれている記事」の上に配置しました。

 

配置手順は次の通り
WordPressの管理画面から進めます。

簡単な流れ

  • デザイン > ウィジェットで「カスタムHTML」を選択
  • スクロール広告用のサイドバーの「よく読まれている記事」の上にウィジェットを配置
  • その「カスタムHTML」ウィジェットに先程のAfterデザインHTMLコードをコピペ
  • AFFINGER5機能の「条件表示 」ショートコードでHTMLコードを囲む(【no-frontonly】HTMLコード【/no-frontonly】)

「簡単な流れ」の(4)で、【no-frontonly】ショートコードによって、Topページには「いいねボタン」を表示しないように条件分岐させています。 【no-frontonly】ショートコードはAFFINGER5機能の「条件表示 」タグに「フロントページのみ非表示 」を選びます。

最後に
「いいねボタン」のアンケート集計は、Wordpress 管理画面から”WP ULike”アイコンにマウスを上に乗せて「統計」をクリックして、「Posts 統計」の「全てのログを表示」をクリックするとDailyの「いいねボタン」クリック閲覧ページと閲覧者のIPアドレスが表示されれます。

 

以上、Wordpressプラグインの”WP ULike”を使った「いいねボタン」の設置でした。

関連記事(一部広告含む)

〜〜〜〜〜〜〜〜

オススメ記事

レコードのハイレゾ化
オススメ記事

LPレコードのハイレゾ化のススメ(ハイレゾ録音のヒント集)

  レコードのハイレゾ録音へのヒント(Tips)   ハイレゾ録音のヒントになればと、 今までのレコードのハイレゾ録音を通して、思いつくまま必要と思われることを書き留めましたのでご ...

MCカートリッジとMMカートリッジの音質比較

eonkyoからDL購入したハイレゾファイルを基準音源にして、基準音源と同一録音のレコードをMCカートリッジとMMカートリッジでハイレコした音源の音質比較を試みました。 MCカートリッジは、オルトフォ ...

DENON MCカートリッジ DL103Rのクロストーク「 原理編」

今更ながら、「我が家のB級プレーヤ」に取り付けた「DL103Rカートリッジのクロストーク(セパレーション)をテストレコード(AD-1 2面のバンド4:基準レベル、1kHz、3.54cm/sec(尖頭値 ...

テストレコード(AD-1)で出来ること

年代モノのレコードプレーヤTRIO(KP-51F)を使ってレコードのハイレゾ録音を行っていますが、このプレーヤの実力を知るためにテストレコード(AD-1)使って定性的な特性を調べ、断片的な記事を投稿し ...

レコードをハイレゾ化するならDSDかPCMか?

ことの 発 端 ことの発端は、あるハイレゾDLサイトから、チャイコのバイオリンコンチェルトをPCM(Flacファイル 192Khz、24Bit)で購入しました。WAVファイルも平行販売されています。 ...

CD音質関連 その他
オススメ記事

アナログ・レコードのここがダメ「CD音質と比較して」

これまでの当ブログ記事(テストレコードなどのブログ)の知見を通して、アナログ・レコードが音質的に不利な点が多々見つかりました。 アナログレコードの音質を好ましく思っている一人で、本当はあまり言いたくは ...

CDフォーマットのここがダメ「ハイレゾと比較して」

CDフォーマットのサンプリング周波数は44.1khzでビット深度は16bitです。 特にビット深度は録音レベルが低下するに伴い音質に問題が生じます。 CDの開発時点では先端技術で市場を席巻しましたが昨 ...

Sony HAP-Z1ESのDSEE機能/確認

「HAP-Z1ESのDSEEとDSDリマスタリングエンジンの効果検証」(以前のブログ記事)は、 実際のLPレコードからハイレゾ化したリアルサウンドでDSEEを評価したものでした。 今回は、正弦波の組 ...

Apple Digital MastersのAAC音質(その1)

2019年7月付けの「Apple Digital Masters テクノロジー概要」によれば、iTunesやApple Musicで配信される楽曲は、「Apple Digital Masters テク ...

Post Snippets Pluginで出来ること(小技・事例集)

 WordPressで記事を書いているビジュアルエディタ派の方でPost Snippets Plugin(以下PSPに略します)を使わずにいませんか? または、PSPをインストールしているのにも関わら ...

© 2020 ハイレコのブログ Powered by AFFINGER5