【備忘録】いいねボタン改設置

 前回の記事で近い内というかその日のうちにやりました。
 導入方法は分かりやすいブログさんがあったのでウチではEASELで強引に出力する方法を書き残しておきます。

 ちなみにこういう人向け記事です

  • ワードプレスの同人サイトでweb拍手やいいねボタンを付けたい
  • 挙動が軽く気軽に押せるボタンが欲しい
  • カウント非表示にできる
  • テーマEASELを使っている人

目次

導入方法

【いいねボタン・改】WordPressにいいねボタンをつけてみた

ブログ本文下やギャラリーページ下に出力したい

 といってもこのEASELというテーマにはブログ本文下、に載せるウィジェットは存在しません。というわけでここでやったウィジェットを増やします。

プラグインで出力されたものより上にボタンを置く

 当サイトは関連記事のプラグインを本文下に出力しています。今回のボタンの方が優先順位が下らしく押しやられてしまいました。ちょっと違和感ありすぎなので以下のサイトを参考にしてfunction.phpに追記します。

参考サイト

 あとブログ一覧にもいいねボタン表示されたので一時的に消す。特定ページのウィジェットをプラグイン無しで非表示させることが出来ないっぽいので(Cocoonのサイトはプラグイン入れたのか元々の機能だったのか覚えてない)、Widget Options等のプラグインをダウンロードしてやっておこうね。

CSSを弄る

 あとは右寄せにするだけ。
 まさかdiv要素が関連記事まで及んでいるとは思わなかったのでしっかり指定します。

あとがき

 1回導入に苦しんだし今回は楽だろう! と思ってましたがこっちも苦労しました。まああっちは2日かかってこっちは数時間だったけど。ぽちぽち押してくれれば喜びます。
 今年もよろしくお願いします(今更)

追記:カテゴリー一覧のボタンを消す

 ゴリラして消します。それ以外はウィジェットプラグインで消せたんですけど何故かカテゴリーの条件分岐では個別ページのボタンも消えたのでコードと睨めっこして探し出しました。

 長くしたら何故かサイドバーが下に回るから適度に開業してます。
 あと人によって微妙に違うかもしれないから検証見ながらカスタマイズしてね!

 なんかまた変なものが消えてそうで怖い! 実際弄りすぎて404になったし!こわい!

いいねボタンは表示されるのにボタンが押せない時

 Autoptimize等jsを圧縮するプラグインの設定を切りましょう。
 念のためにnewiine.cssを最適化から除外する設定を入れておいた方がいいかも。
 サイトスピードを取りたいならWP ULikeプラグイン使う方がいいっすね。下手したらロールバックする羽目になりますぜ。
 と思ったらフッターに読み込ませるスクリプトにdeferを付けるだけで解決した!

ハートマークをFontawesomeに

 PageSpeed Insightsから【PageSpeed レンダリングを妨げるリソースの除外】と言われるのが気になる人はFontawesomeにしてもいいかも。
 <span class=“material-icons-round”>favorite</span>を消して
<i class=”fa-solid fa-heart”></i>に変えたら違和感なく変えられると思う。
 導入時ヘッダーに打ち込んだ1行目を消すのも忘れずに。

コメントを残す

CAPTCHA

コメントは日本語で入力してください。(スパム対策)