「いいねボタン・改」をワードプレスに設置する

「いいねボタン・改」とは

創作・同人サイト制作支援サイトdoにてガタガタさまが配布して下さっているツールです。
簡単に設置でき、

連打できる
データベースなしで使える
管理画面付き

などの特徴があります。

「いいねボタン・改」配布ページ

設置方法は配布ページで非常に細かく説明して下さっています。
しかしWPに設置する際はひと手間必要だったのでやり方をメモしておきます。誰かのお役に立てたらうれしいです。

前提

この記事では以下の前提のもと説明を進めます。分からない場合は適宜調べてください。

WordPressサイトが既にある
FTPでファイル操作できる
子テーマを知っている
使用テーマは「EASEL」

ではテーマ「EASEL」を使って、投稿タイプ「作品」のみにいいねボタンを表示させる方法についてご説明します。

「いいねボタン・改」本体をサーバーに設置

配布ページからダウンロードしたzipを解凍し、まるごとサーバーにアップします。
テーマフォルダの中か、ルートで良いと思います。

子テーマを用意する

お使いのテーマの子テーマを用意します。

私が使用したテーマは「EASEL」で、「いいねボタン・改」と同じくガタガタさまが作成してくださったものです。
なんと「CANVAS on EASEL」という子テーマまで配布なさっています！親切にもほどがある…！

テンプレートを編集する

子テーマを用意したら以下の3つのファイルを親から子へコピーしてきます。
「EASEL」を例にしていますがお使いのテーマによって異なります。

header.php（<head>タグが記載されているパーツ）
footer.php（</body>がタグが記載されているパーツ）
single-works.php（いいねボタンを設置したい任意のパーツ）

コピー出来たらお好みのエディタで編集しましょう。

header.php　</head>の前に以下のコードを追加

<!-- newiine -->
<?php if (is_singular('works')): ?>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round" rel="stylesheet">
    <link rel="stylesheet" href="<?= home_url() ?>/newiine_app/newiine.css">
<?php endif; ?>
<!-- /newiine -->

footer.php　</body>の前に以下のコードを追加

<!-- newiine -->
<?php if (is_singular('works')): ?>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" defer></script>
    <script src="<?= home_url() ?>/newiine_app/newiine.js" defer></script>
<?php endif; ?>
<!-- /newiine -->

single-works.php　任意の場所に以下のコードを追加。私は作品のすぐ下になる<footer class=”article-footer”>の前に追加しました。

<!-- いいねボタン改ここから -->
<div class="area-newiine">
    <button type="submit" class="newiine_btn" data-iinename="works_iine_<?= the_ID() ?>">
        <span class="material-icons-round">favorite</span>
        <span class="newiine_count"></span>いいね

        <!-- お礼メッセージここから -->
        <div class="newiine_thanks newiine_thanks_up" style="display:none;">
            <div class="newiine_box">
            <p>ありがとうございます！</p>
            </div>
        </div>
        <!-- お礼メッセージここまで -->
    </button>
</div>
<!-- いいねボタン改ここまで -->

コードの詳細を説明します。

if (is_singular(‘works’)):　この分岐は投稿タイプが「作品」の時だけ読み込むためのものです。
「作品」以外のページでは不要なものを読み込まないことで、ページの高速化や閲覧時の通信要領削減をねらっています。

<?= home_url() ?>これはサイトトップのURLを出力します。
今回は「newiine_app」本体をルートに置いたので、トップのURLを出力すればOKです。
もし「newiine_app」を子テーマの中に置くのであればここは<?= get_stylesheet_directory_uri() ?>としてください。

<?= the_ID() ?>これは投稿IDを出力します。ここがポイントです。
「いいねボタン・改」はdata-iinenameによってボタンを識別します。これが同じだと別のページに設置されていても合計されます。
今回は作品ごとに別々に集計したかったので、ここに投稿IDを出力することで違うボタンとして識別できるようにしました。
（投稿IDとはWPの投稿に割り振られる重複しない数字です）

すこし本題からそれますが、single-works.phpの60行目付近も以下のように変更してください。

include( '/library/parts/pagination.php' );
↓
include( get_template_directory() . '/library/parts/pagination.php' );

子テーマにファイルを持ってきたことでパスが通らなくなり、エラーが出ます。

変更したテンプレートをサーバーにアップ

テンプレートを編集して保存したら、子テーマをまとめてサーバーにアップしましょう。
WP管理画面の外観→テーマから子テーマを有効化するのを忘れずに！

説明は以上です。

なぜプラグインの「WP ULike」を使わないのか？？あれは連打できないからです！

最後になりますが、素敵なテーマ及びいいねボタンを作成・配布して下さっているガタガタさま、本当にありがとうございます！！

「いいねボタン・改」とは

前提

「いいねボタン・改」本体をサーバーに設置

子テーマを用意する

テンプレートを編集する

変更したテンプレートをサーバーにアップ

最近の投稿