SHU BLOG

BLOG NEWS ブログ

TITLE

【WordPress】WP ULikeの使い方!独自のいいね!ボタンを設置する

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!

サーバーとドメインの同時取得で.jpが無料

シュウ
シュウ
こんばんはー今回は初めてのPluginの紹介です!
いいね!機能が付いた2020年最新バージョンの「WP ULike」についてご説明いたします。
ナカ君
ナカ君


WP ULikeとは

「Twitter、Facebook、Instagram」で見かける「いいね!」ボタンを
ご自身のホームページにも設置できるプラグインになります。

WP ULike

いいね!ボタンはどんな見た目なの

wordpress

WP ULikeは4つの「いいね!」ボタンから「いいね!」ボタンを設置できます

WP ULike管理画面

WP ULike プラグインの導入方法

STEP 01
プラグインをインストールします、以前の記事を参考にしてみてください。

関連記事

【WordPress】プラグインのインストール方法 初心者向け
【WordPress】プラグインのインストール方法 初心者向け

今回は2パターンご紹介しております。
1.管理画面からプラグインをインストールする方法
2.公式サイトからプラグインをダウンロードしインストールする方法

WP ULike プラグインの設定方法

WP ULike管理画面

一般設定

WP ULike一般設定

STEP 02
一般設定をおこないます
Enable Convertor
いいね の数値を文字列 (キロバイト) 形式で変換します。 (WHEN? likes>=1000)
Enable Notifications
1通知ONにより「いいね!」が押された際にコメントが表示します
Enable Anonymize IP
GDPR遵守のためにIPアドレスを匿名化する
Hide Admin Notices
このオプションを有効にすると、すべての管理通知が完全に無効になります。

投稿設定、コメント設定

投稿設定

STEP 02
投稿設定、コメント設定
Select a Template
24つの「いいね!」ボタンから選択してください
自動表示
3記事を投稿した際に自動で「いいね!」のボタンを表示させます
Button Position
4「コンテンツの上部、コンテンツの下部、最上・最下部」から選択したください
コンテンツの下部が1番おすすめです
Automatic Display Restriction
このオプションを使用すると、これらのページの自動表示を無効にできます。
ログの形式
ログの形式を選択します
ログの形式
ログの形式を選択します
Only logged in users
ログインしているユーザーのみ「いいね!」を押せるか、押せないか
ONにした場合「Alert」か「Button」になります、基本はOFFにしておきましょう
いいねした人欄を表示
このオプションを有効にすると、ボタンの下部に気に入ったユーザーのアバターが表示されます。
コメント設定

コメント設定
ホームページにコメント欄があり、設定したい方は設定をおこなってください
ボタンのタイプ
「Image」、「テキスト」を選択してください
ボタンのタイプ「Button Image」
「いいね」、「よくないね」の設定ができます
ボタンのタイプ「ボタンのテキスト」
「いいね」、「よくないね」の設定ができます

Integrations

Integrations

Enable Old Meta Values
古いメタ値を有効にする 基本「OFF」で大丈夫です
Enable Deprecated Options
廃止されたオプションを有効にする 基本「OFF」で大丈夫です
Enable Old Meta Values

このオプションを有効にすると、バージョン+4にアップグレードして古いログを削除したユーザーは、古い数字を新しい数字に追加できます。
*注意:最初からWP ULike + v4を使用していた場合、またはまだログを削除していない場合は、このオプションを有効にしないでください。

Enable Deprecated Option

このオプションを有効にすると、バージョン+4.1にアップグレードして古いオプションを失ったユーザーは、以前の設定を復元して有効にできます。
*注意:WP ULike + v4.1を最初から使用している場合は、このオプションを有効にしないでください。

Translations

Translations

Already Voted Message
すでに投票済みのメッセージ
Login Required Message
ログインが必要なメッセージ
いいね通知メッセージ
5通知ONにより「いいね!」が押された際にコメントが表示します
よくないね 通知メッセージ
6通知ONにすることにより表示するメッセージになります
WP ULike一般設定

Customization

Customization

Custom CSS
ボタンデザインをカスタマイズしたい方は入力してください

WP ULike カスタマイズ

WP ULike ボタンカスタマイズ 01

WP ULike カスタマイズボタン
.wpulike {
	width: 150px;
	display:block;
	text-align: left;
	padding: 0 !important;
	margin: 0 0 30px !important;
	vertical-align: middle;
	overflow: hidden;
	line-height: 0px;
	border: solid 2px #999;
	border-radius: 5px;
	background: #fff;
}

.wpulike-robeen svg {
	padding: 0 20px;
	margin: 0 20px 0 0;
    width: 50px !important;
    background-color: #e5ad71;
}

path  {
    fill:#fff; /*--ハートの色--*/
}

WP ULike ボタンカスタマイズ 02

WP ULike カスタマイズボタン
.wpulike {
	width: 50px;
	display:block;
	text-align: left;
	padding: 30px 0 !important;
	margin: 0 0 30px !important;
	vertical-align: middle;
	overflow: hidden;
	line-height: 0px;
	border: solid 2px #999;
	border-radius: 50px;
	background: #fff;
	display: inline-block !important;
	color: #fff;
}

.wpulike-robeen {
  background-color: #e5ad71;
  text-align: center;
}

.wpulike-robeen svg {
	display: inline-block !important;
	padding: 0;
	margin: 0;
    width: 50px !important;
}

path  {
    fill:#fff; /*--ハートの色--*/
}

WP ULike ボタンカスタマイズ 03

WP ULike カスタマイズボタン
.wpulike {
	width: 100px;
	margin: 0 0 30px !important;
	vertical-align: middle;
	overflow: hidden;
	padding: 10px !important;
	border: solid 3px #fff;
	border-radius: 5px;
	background-color: #e5ad71;
}


.wpulike-default .wp_ulike_btn, 
.wpulike-default .wp_ulike_btn:hover {
	background-color: #fff !important;
}

.wpulike-default .count-box {
    font-size: 12px !important;
    background-color: #6fb067 !important;
    margin-left: 10px !important;
    box-shadow: 0 0 0 1px #6fb067 inset !important;
    color: #fff !important;
}


.wpulike-default .count-box:before {
    background: #6fb067 !important;
    border-bottom-color: #6fb067 !important;
    left: -5px;
    top: 50%;
    border-left-color: #6fb067 !important;
}

詳細以外に表示させる方法

wordpress画面

記事の詳細以外のも表示させることは可能です。
その際にはショートコード[ wp_ulike ]を利用します。

表示させたい場所に下記のコードを入力してください。
do_shortcodeとはショートコードを呼び出すコードになります。

<?php echo do_shortcode('[wp_ulike]'); ?>
オススメのプラグイン

【WordPress】Imsanityで簡単に画像を
リサイズしてくれるプラグイン

記事を簡単に複製できるプラグイン
作業スピードの大幅改善に繋げましょう!

まとめ

今回はこれで以上です。

※前回の記事でバージョンが古い状態での記事になっておりました、
今回は最新バージョンでの使用方法になっております。

設定項目は多いですが、必要な項目のみまとめてみました。
最後まで読んでいただけたら「いいね!」の方よろしくお願いします。

スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top