ブログ記事にいいねボタンを設置しました - WordPress

お父ちゃんからの依頼で

ブログ記事に「いいね」と「うんこ」ボタンを設置しました💩

記事本文の左上に表示しております。

プラグイン：Posts Like Dislike

プラグインはこちらを使用させて頂きました。

Posts Like Dislike

無料で利用が可能です。

設定などはこちらのブログ記事が参考になります。

ブログ記事にいいねボタンの設置ができる「Posts Like Dislike」の使い方 | takuweb

CSSでクリックエフェクト

ボタンをクリックした時のCSSはこちらを参考にさせて頂きました。

See the Pen Button click pulsing effect – Pure CSS by Ashley Saleem-West (@ash_s_west) on CodePen.

💜 と 💩 で少し動作を変えています。

💩 ボタンの設置とエフェクトはお父ちゃんの希望です。

.pld-like-dislike-wrap{
  display: flex;
}
.pld-common-wrap{
  display: flex;
  margin-right: 15px;
}
.pld-like-dislike-trigger {
  position: relative;
  flex: none;
  width: 30px;
}
.pld-like-dislike-trigger:after {
  content: "";
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: all 0.8s;
}
.pld-like-trigger img {
  opacity: 0;
}
.pld-like-trigger:after{
  background-image: url(/wp/wp-content/uploads/2022/09/icon-heart.svg);
  width: 30px;
  height: 30px;
  top: 0;
  left: 0;
}
.pld-dislike-trigger:after{
  background-image: url(/wp/wp-content/uploads/2022/09/icon-unko.svg);
  filter: drop-shadow(0 0 10px #e6a80e);
  width: 50px;
  height: 50px;
  left: -10px;
  top: -10px;
  margin: auto;
  opacity: 0;
}
.pld-like-dislike-trigger:active:after {
  transition: 0s;
}
.pld-like-trigger:active:after {
  transform: scale(130%);
}
.pld-like-dislike-trigger:active:after {
  width: 30px;
  height: 30px;
  left: 0;
  top: 0;
  opacity: 1;
}
.pld-count-wrap{
  padding: 2px 10px;
  background: #f5f5f5;
  border-radius: 10px;
  position: relative;
  margin-left: 10px;
}
.pld-count-wrap:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;
  margin-top: -5px;
  border: 5px solid transparent;
  border-right: 5px solid #f5f5f5;
}

.pld-like-dislike-wrap{

display: flex;

}

.pld-common-wrap{

display: flex;

margin-right: 15px;

}

.pld-like-dislike-trigger {

position: relative;

flex: none;

width: 30px;

}

.pld-like-dislike-trigger:after {

content: "";

display: block;

position: absolute;

background-repeat: no-repeat;

background-size: contain;

background-position: center;

transition: all 0.8s;

}

.pld-like-trigger img {

opacity: 0;

}

.pld-like-trigger:after{

background-image: url(/wp/wp-content/uploads/2022/09/icon-heart.svg);

width: 30px;

height: 30px;

top: 0;

left: 0;

}

.pld-dislike-trigger:after{

background-image: url(/wp/wp-content/uploads/2022/09/icon-unko.svg);

filter: drop-shadow(0 0 10px #e6a80e);

width: 50px;

height: 50px;

left: -10px;

top: -10px;

margin: auto;

opacity: 0;

}

.pld-like-dislike-trigger:active:after {

transition: 0s;

}

.pld-like-trigger:active:after {

transform: scale(130%);

}

.pld-like-dislike-trigger:active:after {

width: 30px;

height: 30px;

left: 0;

top: 0;

opacity: 1;

}

.pld-count-wrap{

padding: 2px 10px;

background: #f5f5f5;

border-radius: 10px;

position: relative;

margin-left: 10px;

}

.pld-count-wrap:before {

content: "";

position: absolute;

top: 50%;

left: -10px;

margin-top: -5px;

border: 5px solid transparent;

border-right: 5px solid #f5f5f5;

}

ボタンの動作としてはカウントされた時だけアクションする方が適切かとは思うのですが、まぁまぁお遊びということでとにかく押したら動く形です(^o^)

SVGアイコン

アイコンはこちらでお借りしました。

アイコン素材ダウンロードサイト「icooon-mono」
https://icooon-mono.com/

是非押してみてください〜(^o^)

コメントはこちらからコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

プラグイン：Posts Like Dislike

CSSでクリックエフェクト

SVGアイコン

関連記事

コメントはこちらから コメントをキャンセル

コメントはこちらからコメントをキャンセル