WordPressに “いいねボタン・改” を設置する

WordPressに “いいねボタン・改” を設置する方法のメモ。

サーバーにアップロード

いいねボタン・改をダウンロードして、ファイルをWordPressのテンプレートフォルダ（wp-content/themes/[テーマ名]/newiine_app/）へアップロードする。

footer.phpに追記

</body>の直前に以下のコードを追記する。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="<?= get_stylesheet_directory_uri() ?>/newiine_app/newiine.js" defer></script>

ちなみに今回はデフォルトのデザインを使用しないので、公式の手順にあるヘッダーへの追記は行わない。ハートアイコンは別途Webフォントとして読み込むことにした。icomoonを使用して、ハートアイコンを追加する。

ボタン設置箇所に追記

<div class="area-newiine">
  <button type="submit" class="newiine_btn" data-iinename="<?= is_front_page() ? 'toppage' : str_replace('/', '', $_SERVER['REQUEST_URI']); ?>">
    <div><span class="icon-heart"></span><span class="newiine_count"></span> いいね</div>
  </button>
</div>

自分の場合は全ページのフッターにいいねボタンを表示させたかったため、footer.phpに追記した。

WordPressにいいねボタン・改を設置する方法を検索すると、the_ID()を利用した方法がヒットする。しかし、今回はSingleページのみではなく、トップページやアーカイブページにもボタンを表示させたいため、この方法は使えない（これらのページはIDを返さない）。そこで今回はURLを利用して判別することにした。data-iinenameに “/” が入っているとエラーになるためstr_replaceでこれを除く。また、トップページの名前が空白になってしまうので、やや冗長だが条件分岐でここだけ個別に指定する。

<span class="icon-heart"></span>はicomoonで追加したハートアイコンを読み込む部分。

デザインを整える

CSSを当てていく。まず、基本となるボタンのスタイルを.newiine_btnに書く。いいねボタン・改では、これに対して状況に応じてクラスが追加される。.newiine_clickedはクリック後のスタイル。.newiine_clickedtodayはその日クリック済みの場合のデフォルト表示のスタイル。それぞれの場合でいい感じに色を変える。

管理画面で動作確認

“/wp-content/themes/[テーマ名]/newiine_app/admin/admin.php” にアクセスして、パスワード設定。試しに何クリックかしてみて動作を確認する。

動作確認後、データをリセットする。 “/wp-content/themes/[テーマ名]/newiine_app/datas/” 内のcsvファイルを削除すればよい。