【WordPress】ブログ記事の下に「♡」ボタンを置く

ななたに

こんにちは。ななたにです。WordPressのブログに「いいね♡」ボタンがあったらいいなと思うこと、ありませんか？

WordPressの記事の下に「♡」を置きたい！

Facebookで言うと「いいね👍」ボタン、InstagramやTwitterで言うと「♡」ボタン、他のSNSサイトの足あと機能など、その人の投稿を「読んだよ、いいと思ったよ！」という証を残す機能が、様々なSNSにはありますよね。

WordPressのブログには星で評価する機能もあるようですが、そこまでの細かい評価ではなく、単純に「読んだよ〜よかったよ〜」ということを読み手が気楽にお知らせしてくれる機能があったらなぁと思って調べたら、♡ボタンを置くことができるプラグインがあることがわかりました。

WP-PostRatingsプラグイン

そんな素敵なプラグインは、「WP-PostRatings」。Wordpressの管理画面でプラグインを検索すると出てきます。

参考にしたブログ記事

WP-PostRatingsのインストール・設定については、こちらのブログを参考にしました。

WordPressに独自のいいねボタンを設置できるWP-PostRatings

【WordPress】WP-PostRatingsで「いいね」ボタンを設置

迷うのは、どこにコードを挿入するべきか…

上の2つのブログの内容で♡ボタンの設置の仕方はほぼOKだったのですが、最後に迷ったのが次のコードをどこに挿入するかってところでした。

if(function_exists('the_ratings')) { the_ratings(); }

きっと、これは使っているテンプレートや、どこに♡ボタンを置きたいかによって違ってくるところなんだと思います。

今回♡ボタンを挿入したかったのは、こちらのブログだったので、わたしはTOPページに表示される記事の下にも♡ボタンをつけたかったんです。

使っているのは「SiteOrigin Unwind」というテーマでした。そして、どこにコードを挿入するのか色々調べた結果、最終的には以下の2つのphpファイルにコードを追加して、思った通りの表示にすることができました。

1. wp-content/themes/siteorigin-unwind/single.php
   ↑ 個別で記事を表示したときに「♡」を表示
2. wp-content/themes/siteorigin-unwind/template-parts/content.php
   ↑ TOPページで記事を表示したときに「♡」を表示

上のファイルの編集前には、わたしは念のためサーバにログインして次のコマンドで元ファイルはバックアップを取っています。

$ cp -p single.php single.php20200901
$ ls -l single.php*
-rwxr--rwx 1 cosmoseek hpusers 1718 Sep 1 23:08 single.php
-rwxr--rwx 1 cosmoseek hpusers 1718 Sep 1 23:08 single.php20200901

バックアップを取れたら、Wordpressの管理画面の「外観」＞「テーマエディタ」から次のようにコードを挿入します。

wp-content/themes/siteorigin-unwind/single.php

                <?php
                while ( have_posts() ) : the_post();
                        if ( has_post_format( array( 'gallery', 'video', 'image' ) ) ) {
                                get_template_part( 'template-parts/content', get_post_format() );
                        } else {
                                get_template_part( 'template-parts/content', 'single' );←ここが記事本文を読み込んでるところと思われる
                        }
                        if(function_exists('the_ratings')) { the_ratings(); }★ここに挿入
                       ：

wp-content/themes/siteorigin-unwind/template-parts/content.php

        <div class="entry-content">←このクラス内にコードを挿入したい
                <?php
                        if ( siteorigin_setting( 'blog_archive_content' ) == 'excerpt' ) siteorigin_unwind_excerpt();
                        else the_content();
                        wp_link_pages( array(
                                'before' => '<div class="page-links"><span class="page-links-title">' . esc_html__( 'Pages:', 'siteorigin-unwind' ) . '</span>',
                                'after'  => '</div>',
                                'link_before' => '<span>',
                                'link_after'  => '</span>',
                        ) );
                        if(function_exists('the_ratings')) { the_ratings(); }★ここに挿入
                ?>
        </div><!-- .entry-content -->

これで無事、TOPページの記事にも、個別表示の記事にも、♡ボタンを設置することができました♡

余談

このあと、SiteOriginのテーマにアップデートがあったので更新しましたら、上記で挿入したコードがファイル上書きにより消えていました…。これは、テーマを更新する度に、毎回コードを挿入しなければならなそうです。