無知がWP ULikeをカスタマイズして記事一覧に「いいね」を設置
表題の通りです。通りなのですが。
まず、私はインターネットのことが何も分かりません。WordPressで自分のサイトを開けているのが奇跡のレベルです。テーマはLuxeritasを使用しています。これがなければ私は何もできませんでした（そもそもテーマというものがあるということすら知らんかったし。サイトを開設した際は本当に右往左往でした）。
それで、少し前に、別の方がWordPressで作成されたサイトに自分の小説を寄せたことがあったのですが、そのサイトに「いいねボタン」がついてたんですよね。
あ、こんなことができるんだ。確かに「いいね」がつくと嬉しいしやりたいな、と思い、早速WordPressで「いいねボタン」を設置するプラグインを探してみました。そこで出てきたのが冒頭にリンクを貼った「WP ULike」です。無料で大丈夫？ と思うほど多機能で、カスタマイズ性も高く、当初はそれで満足していたのですが（本当に、SNSにも「いいねボタン」をつけました、など報告せず「いいねボタンがついている……ウヒヒ」と勝手に一人でニヤけていました）、次第に「もっとこうしたい……」という欲求が出てきました。主には以下の二点が不満足でした。
①なんか不当にデカいのでもっとサイズを小さくしたい。ついでにデフォルトのやつより洗練された感じにしたい。
②トップページの、記事がダーッと並んでいるところにも「いいね」を表示したい。
①は、検索したらすぐに分かりました。Luxeritasメニューの「子テーマの編集」から、style.cssにコードをコピペすれば良さそうです。
このサイトのコードをそのままコピペさせていただきました。すっかり「note風のいいね」に……。♡の形には満足したのですが、自分でテストとして「いいね」を押してみたところ、「♡+1」というふうに表示されてしまうのですね。「+」、何？ いらんなーとなり（我々はどんどんわがままになりますね）、プラスを消すコードも追加してみました。それも上記のサイトからコピペしています。どうやら今度はfunction.phpというページにコピペするらしいです。……なんで？ 推測ですが、cssはあくまで見た目、phpは形や機能を司るのかなーと思っています。すみません、本当に初心者なんです。それで、functionとまでいうのだから、だいぶ偉くて、ここで命令したことは下流にもどんどこ伝わっていくのだろう、みたいなイメージを抱きました。
続いて②ですが、これは調べてみたら何人かの人々が記事を書いていました。ただし、肝心なところの意味が分からなかったです。
ショートコードって、何……。そこから調べました。なんか便利な呪文ということだけは分かりました。ただ、この表示されているコードをどこに入れたら良いのか分かりませんでした。function.phpか？ と思ったんですが違ったらしく。なんか、コピペの仕方がわからなくて何度かクラッシュしました。
なんだったんだろう。なんか、リカバリーモードでログインして、追加したコードを消せば直ったのでよかったです。
続いてこの記事に書いてあることを見てみました。
【WordPress】WP ULikeプラグインでショートコードを使ってハートマーク♥を表示させたい場所に表示させる方法
いや、どこに。どこに、何を。
この記事も確かめました。
わ、わたしの「表示させたい場所」ってどこ……。wordpressの管理画面を見てもどこにも書けそうな場所がなくて困惑しました。「記事一覧 php どこ」とか変な検索ワードで調べまくりました。そこで、初めて「FTP」という言葉を知りました。
なんか、WordPressのカスタマイズ記事を見ていると、知らない名前のphpファイルが突然出てきたり、「ファイルはここにあります」といって謎の画面を開いたスクショなどが貼られていて、一体管理画面のどこにそんなページがあるんだ、どこにもないぞ？ とかねてから思っていたのですが、皆さんは、ファイル転送プロトコルソフトを使って、そこからファイルにアクセスしてコードを追加したり書き換えたりしていたのだ、ということをやっと知りました。
【FTPソフト】FileZillaの使い方を初心者向けに解説する
↑上記の記事を参考に、早速FileZillaというソフトをダウンロードしました。Luxeritasの子テーマには、基本的に「よく弄るだろう」と想定されているファイルしか含まれていなかったので、私はいつまで経ってもコードを追加するべきファイルを見つけられなかったのだと理解しました。そして、弄りたいファイルがあれば、親テーマからそのファイルをコピペしてきて子テーマに含めてからそこで編集すればいい、ということを初めて知りました。
さて、問題となるのが、「なんかトップページの記事一覧がダーッと並んでいる部分」の名前が全く分からないことです。とりあえず「Luxeritas 記事一覧 php」などの検索ワードで片っ端からネットの海を捜しました。
WordPressのフォルダ構成を解説してくれている記事です。この「テンプレート」と書かれたファイルのどれかだろうと当たりをつけることができました。また、フロントページをカスタマイズしている人の記事を見つけたので、私が弄るべきファイルはおそらく「home.php」だろうと推測したのですが、結局外れでした。もうしばらく探していると、トップページをphpを弄ることによってカスタマイズした人をようやく見つけました。
Luxeritas ルクセリタス3系フロントページでカテゴリー別新着記事表示
このなかでは、loop-grid.phpというファイルが使われているのですが、私はトップページをグリット表示にしていないので「loop.php」ファイルを弄るのが正解だろうと思いました。それから中身を見てみたのですが……
何がなにやら……。諸サイトを参考にして、function.phpに
// Ulike button output;
if( !function_exists('get_the_ulike_btn') ){
function get_the_ulike_btn( $post_id ){
global $wp_ulike_class,$wp_user_IP;
$get_post_meta = get_post_meta($post_id, '_liked', true);
$get_like = $get_post_meta != '' ? $get_post_meta : 0;
$return_userID = $wp_ulike_class->get_reutrn_id();
$theme_class = wp_ulike_get_setting( 'wp_ulike_posts', 'theme');
$data = array(
"id" => $post_id , //Post ID
"user_id" => $return_userID, //User ID (if the user is guest, we save ip as user_id with "ip2long" function)
"user_ip" => $wp_user_IP, //User IP
"get_like" => $get_like, //Number Of Likes
"method" => 'likeThis', //JavaScript method
"setting" => 'wp_ulike_posts', //Setting Key
"type" => 'post', //Function type (post/process)
"table" => 'ulike', //posts table
"column" => 'post_id', //ulike table column name
"key" => '_liked', //meta key
"cookie" => 'liked-' //Cookie Name
);
//call wp_get_ulike function from class-ulike calss
$counter = $wp_ulike_class->wp_get_ulike($data);
$wp_ulike = '<div id="wp-ulike-'.$post_ID.'" class="wpulike '.$theme_class.'">';
$wp_ulike .= '<div class="counter">'.$counter.'</div>';
$wp_ulike .= '</div>';
$wp_ulike .= $wp_ulike_class->get_liked_users($post_ID,'ulike','post_id','wp_ulike_posts');
echo $wp_ulike;
}
}というコードを追加したので、とりあえず、loop.phpの文字列のどこかに
<?php if(function_exists('wp_ulike')) wp_ulike('get'); ?>というコードをぶちこめばいいことだけは分かるのですが。どこだ。
ただ、よく読んでいくと開発者の方が「どこに何のコードが書かれているか」をメモ書きしてくれていることに気が付きました。本当に優しい。とりあえず、<? php ~ ?>を差し込めそうなところに片っ端から差し込んでいきました。そうこうして、画面が真っ白になったり、何も変化が起きなかったりを繰り返していると、なんか惜しい感じに一度だけ♡が表示されました。
できたら♡は下部の方がいいな……と思っており、なんとなくコードはページの（視覚的に）上から下に流れるように書かれているっぽいなということもわかってきたので、何度か試行錯誤したうえで、ようやくベストスポットを見つけました。
上記の「記事一覧にいいねを表示」の部分がそうです。その上に記載されている「記事全文表示、抜粋表示……」などが、
多分この網掛け部分なんじゃないかなーと理解しています。本当に偶然に頼った結果ですが、なんとか正解にたどり着くことが出来ました。♡の表示される位置にも満足しています。
私は完全にインターネット初心者なので、もしこの記事を参考にしようなどという状況が万が一発生した場合はその点を留意したうえでお願いいたします。何もかも間違えている可能性があります。プログラミングとかそういうのを理解していない人間にはどのように世界が見えているかということは伝わったかと思います。たったこれだけのことをするのに2時間かかったぜ〜。
（2023.9.10追記）
現在メニューの「Recently」には最新記事を表示する固定ページを設定しているのですが、ページ下部に謎のいいねボタンが表示されてしまうバグが起きている（直せる力なし）
なんか連動して上の記事のいいねにカウントされます。なんなんだ（私がコード挿入した場所が悪いところまではわかっているが、直す気力がない）。
こういうこともあるので、マジでこの記事に書かれていることは自己責任でお願いします。本当に。
というわけで、記事にいいねボタンがついたので、皆さんドカドカ押していってもらえればと思います。
↓