以前「関連性の高い記事同士をリンクするWordPressプラグイン「Custom Related Posts」で、ブログ内での相互リンクも簡単に作れた。」という記事を書きました。

関連記事を手動で作って、より関連性の高い記事同士を繋げるプラグインについて書いた記事です。

これのカスタマイズをとりあえずやったので、ここに残しておこうと思います。

「Custom Related Posts」のカスタマイズ

カスタマイズや見た目自体はとてもシンプルです。
（画像では、見やすいように外周に沿って枠をつけています。）

「Custom Related Posts」はウィジェットで配置しています。
ウィジェットのタイトルには「こんな記事も書いています。」と表示。

CSSで、ウィジェットのタイトルと、関連記事のタイトル、記事のアイキャッチをカスタマイズしました。

ウィジェットタイトルのCSS

.widget-single-content-bottom-title.main-widget-label {
　border-bottom: 3px solid #000;
　font-size: 22px;
　font-weight: bold;
　padding-bottom: 5px;
　margin-bottom: 18px;
}

（コードの載せ方が合ってるか分かりません！）

開発者ツールの中からウィジェットタイトルを表示しているコードを探して、それにボーダーをつけたり、空白を指定しています。
これが最初はなかなか適用出来なくて、初心者の僕にはとても難しかったですが、友人が丁寧に教えてくれてやっと出来ました。

今は見出しh3と同じような表示になるようにしてみています。

また、「.widget-single-content-bottom-title.main-widget-label」は他の本文下ウィジェットのタイトルのコードです。「ブログを書いた人。」としてウィジェットでプロフィールを表示しているんですが、コード自体は同じなのでそちらにもこのCSSが適用されています。

他のウィジェットと表示の仕方を変えるならば、別の配置の仕方をしないといけません。

記事タイトルとアイキャッチのCSS

.crp-list-item-title {
　font-weight: bold;
}

.crp-list-item-image {
　flex-shrink: 0;
}

こちらのコードは、プラグイン自体の設定メニューの中に書いています。

「.crp-list-item-title」は、記事のタイトル。とりあえず太字にしています。

「.crp-list-item-image」は、記事のアイキャッチです。
このプラグイン、バージョン1.7ではなぜかアイキャッチのサイズがくずれたり、バラバラになってしまうんですよね。
そこで、CSSでアイキャッチが均等な大きさで表示されるように指定。こちらの記事の方をそのまま真似して実装しています。

Custom Related Posts、より関連性の高い記事を手動で設定可能な関連記事プラグイン。導入後、直帰率の抑制に貢献

まとめ

今のカスタマイズはこんな感じです！
同じプラグインを使ってる方のカスタマイズを参考にしたくて検索したりしていたんですが、なかなか使ってる方が少ないのか、見つけられなかったんですよね。
なので少しでも足しになればと思い、書いてみました。

前回、「関連記事のリンクを、記事の中に手動で追加してみた。」という記事を書きました。
ブログの関連記事は同じカテゴリーのものがランダムで表示されるようになっています。自動で8つくらい表示されるんですが、必ずしもその記事に近い記事が表示されるわけじゃないんですよね…

なのでちゃんと関係がある記事にも行けるように「記事の最後に手動でリンクを貼ってみた」ということを書いた記事でした。やり方としては、タイトルとURLをコピーしてきて、記事の最後にひとつひとつ貼るというものです。

何かを読んだ方がもし続けて読んでくれるとしたら、可能性が大きいのは興味がある記事だと思います。なのでこれをやるのはとても良いと思います。ただ、ものすごく手間がかかるんですよ。記事と記事をお互いに結ぶ「相互リンク」は、それぞれの記事でリンクを貼るという作業をしないといけないし、どこか修正するなら一個一個探していかないといけないんです。

これ大変だなぁ…と思ってたら、この関連が強い記事を自分が選んで繋ぐための、ものすごく心強いプラグインを見つけました！

Custom Related Posts

見つけたのは、WordPressのプラグイン「Custom Related Posts」です！

ブログの中で、簡単に記事同士の相互リンクを作れるプラグインです。
記事のWordPress編集画面の中で、関係がありそうな記事を検索してボタンを押すと、記事から記事へのリンクが自動的に作られます。しかも片方の記事を編集するだけで、「リンクを貼った記事からのリンクも自動的に作られる」ので、ボタンひとつで相互リンクを作れるところが凄いんです！！

そして相互リンクだけじゃなくて、どちらか一方へのリンクも編集画面で簡単に作れます。
例えば記事Aから記事Bだけにリンクしたい場合。記事Aから記事Bへの一方向リンクを作れるだけじゃなくて、記事Bの編集画面で、記事Aからのリンクを作ることが出来るようになっています。

つかいかた

このプラグインは、Novellaさんの「関連記事を手動で作成する『Custom Related Posts』　自動相互リンク機能付き」という記事で見つけました。

詳しい設定の方法はこちらの記事をぜひ見ていただきたいと思います。

僕の方でも簡単に説明をすると…

基本設定

まずは初期設定。このプラグインは英語表記です。分かりづらい方もいると思うので、簡単に解説をします。

WordPressの管理画面にある「設定」から「Custom Related Posts」へ行きます。
そしたら設定画面が開きます。ここに表示されている項目の解説です。

【Documentation】

プラグインの簡単な概要が書いてあります。
“Custom Related Postsを使えば、関連記事を完全にコントロールすることができます。編集時に関連記事を手動で設定し、ショートコード、ブロック、ウィジェットを使って関連記事を表示することができます。”的なことが書いてあります。

【General】

「Post Types」
関連記事で表示できる投稿タイプを選べます。
僕の場合は公開している普通の記事を貼りたいので「post」を選んでいます。
他にも「page」を入れておけば固定ページのリンクを貼れるようになったりします。
僕はカテゴリーごとの記事一覧ページも表示させたいんですが、今のところやり方が分かりません…

「Cache Relations」
リストのキャッシュみたいです。表示などにも関わってきそうなので、ここはオンにしておくと良いみたいです。

【Search】

リンクを作る時に、記事の編集画面で表示する検索機能についての設定です。
「Number of Posts」
検索で表示する記事の数です。
記事を検索する時には何かワードを入れるんですが、ちょっとしたキーワードでもものすごく幅広くヒットするようになっているので、ここが少なすぎると目当ての記事を見つけづらいです。なので今のところは「100」にしています。
ちなみにどれくらいまで行けるか試したんですが、1000000とか入力できます。

「Post Status」
検索でヒットする記事のタイプをえらべます。「Publishd Only」だと公開した記事のみで、「Any」だと下書きなども（おそらく）表示できます。

【Relations】

「Open in New Tab」
関連記事に表示したリンクをクリックした時、新規タブで開くかどうかを設定できます。
オンにすると新規タブで開くようになります。僕はオフにしています。

【Template】

「Container」
コンテナのスタイルを設定できる項目らしいです。よく分からないので「Normal」にしています。

「Image」
リストのサムネイル（アイキャッチ）画像の位置を設定出来ます。
僕はタイトルの左に画像を表示する「Floated Left」にしています。
他にも「Avobe Text」だとタイトルの上、「Below Text」だとタイトルの下。「Floated Right」だとタイトルの右になります。

画像を非表示にしたければ「Don’t show」を選びます。

「Image Size」
表示するサムネイル（アイキャッチ）画像のサイズを指定します。
デフォルトでは「50×50」になっていて、他にも「thumb」「medium」「large」などのサイズで指定したり出来ます。

サイズ指定を数字で記述する場合に気をつけることは、「x（エックス）」を「×（かける）」と書かないことです。

一度消してから「100×（かける）100」と入力したんですが、ものすごくデカいサイズになってしまいました。この間違いに気付くまでしばらくかかったんですが、×（かける）をx（エックス）で書いたら上手くいきました。もしサイズの指定で上手くいかない方は、試してみてください。

「Disable pinning of images」
画像にnopin属性を付与するかどうかの設定です。
画像を非表示にしていると設定が現れません。

「Advanced」
「Custom Related Posts」専用のCSSを書けるところです。

【Import Relations】

XMLファイルを使って、記事のリンクを作ることが出来る設定のようです。
「Learn More」から使い方を読めます。
僕は今のところ使っていません。

リンクの作り方

パソコン版でのリンクの作り方を書きます。

まずはリンクを作りたい記事の編集画面に行きます。
画面の右上に「リンクボタン」があるので押します。

すると、現在のリンクの設定と、新しくリンクを追加するボタンが現れます。
リンクを追加する時には「Add Relations」を押します。

画面の真ん中に記事を検索する窓が現れます。
左の箱には「All Post Types」と書いてありますが、ここを押して「投稿」「固定ページ」などに変更すれば、ページのタイプを絞って検索出来ます。検索する時にはその左の箱の中にキーワードを入れます。

記事がヒットすればずらっと並びますが、ヒットしなければ「No posts found.」と表示されます。

使っていて感じるのは、このキーワードの入力の仕方がちょっとシビアだということですね。明らかにタイトルに含まれているキーワードを入れてもヒットしないことがよくあります。その場合は別のキーワードに変えるか、スペースを空けた検索をせずに、確実にタイトルの一部を打って検索すると上手くいったりいかなかったりします。天邪鬼…

ヒットした場合はこのような表示になります。左から、投稿タイプ、日付、タイトル、リンクボタンの順です。
リンクを作りたい記事の右にあるボタンを押すと、リンクが作成されるようになります。

「Both」は相互リンク。編集中の記事と、選んだ記事の両方にリンクが作成されるボタンです。
「To」は、編集中の記事から選んだ記事に向けてのみリンクが作られるボタンです。
「From」はその逆で、選んだ記事から編集中の記事に向けてのみリンクが作られます。

リンクを設定していると、記事の編集画面の中で確認できます。

「THIS POST LINKS TO」は、編集中の記事から作られているリンクです。
「THIS POST GET LINKS FROM」は、表示されている記事から編集中の記事へのリンクです。

両方に同じタイトルが表示されていれば、相互リンクになっているということです。
例えば一番下に表示されている「【2023年1月】signatureアクセス解析。」という記事は、「TO」にも「FROM」にも表示されています。
これは、「【2023年1月】signatureアクセス解析。」へのリンクが作成されていて（TO）、かつ「【2023年1月】signatureアクセス解析。」からもこの記事へリンクが作成されている（FROM）ということです。

作った関連記事を記事に表示させる

このプラグイン「Custom Related Posts」は「ショートコード」「ブロック」「ウィジェット」で記事の中に配置します。
僕の場合はウィジェットを使っているので、そのやり方を紹介します。

WordPress管理画面の中の「外観」から「ウィジェット」へ入ります。
左側のウィジェット一覧の中に「Custom Related Posts」があるので、「投稿本文下」などを選んで配置します。

設定できる内容は4箇所。

【タイトル】は、ウィジェットを配置すると一緒に書かれるテキスト。

【Order By】は、記事の並びです。
「Title」はタイトル順、「Date」は日付順、「Custom」は好みの順番、「Random」は設定している記事の順番が毎回ランダムになります。
「Date」にすると新しい記事が一番上に来るんですが、その記事に一番関連が強そうな記事を上に持ってきたりできるので「Custom」も良いかもしれないです。

【Order】は、昇順・降順の設定です。例えば日付順にしたときに「ascending」だと日付が古い記事が上に来て、「descending」だと日付が新しい記事が上に来ます。

【No related posts text】では、該当する記事が存在しなかった時に表示するテキストを設定できます。

こうして記事の中に配置すると、あとは設定したものが自動で表示されます。

相互リンクと、一方向リンクの違い

相互リンクに設定した記事を見てみます。

「関連記事のリンクを、記事の中に手動で追加してみた。」という記事を見てみると、中には「【2023年1月】signatureアクセス解析。」へのリンクがあります。

「【2023年1月】signatureアクセス解析。」の方に行ってみると、「関連記事のリンクを、記事の中に手動で追加してみた。」へのリンクもあります。

これが相互リンクの状態です。

リンクを作った後からでも、一方向リンクに変えることも出来ます。
編集画面のリンクの一覧にはゴミ箱ボタンがあるので、これで片方のリンクを削除すれば完成です。

例えば編集中の記事「関連記事のリンクを、記事の中に手動で追加してみた。」から、「【2023年1月】signatureアクセス解析。」へはリンクを作りたいけれど、「【2023年1月】signatureアクセス解析。」からはリンクを作りたくないという設定にしたい場合。
その場合は、「FROM」の方のリンクを消すと良いです。

歩きやすいブログを作ろう

という感じで、より関係性が強い関連記事リンクを作れるWordPressプラグイン「Custom Related Posts」の紹介でした。

やっぱり何か記事を読んだ時でも、興味がある記事にすぐ行けるか、探す手間がかかってしまうかでは、読みやすさに差が出来てしまいます。
そのブログのファンになると、むしろ記事を探す楽しみも出てくると思うんですが、全く知らないブログやサイトだと、まずはどうしても興味がある記事に行きたいものですよね。

このプラグインを使って、記事から記事へ歩きやすいブログを作っていけたら良いなぁと思います。

ちなみに、このカスタマイズなどはまだ試行錯誤中です。
僕の場合はほとんど配置しただけという感じになっています。
なんとか綺麗にカスタマイズしたいと思っているんですが、出来上がったらまた記事に書いてみたいと思います。その時はまた関連記事リンクを作りますね。

「Custom Related Posts」をWordPressでインストールする

こんにちは！高山大知（@daichihandflute）です。

今日はWordPressのプラグインを紹介！

こうして記事を日々書いていると、だんだんと記事がごちゃごちゃしてきます。
なのでその記事がどんな記事なのかというのを、必ずカテゴリーで分けています。
モノ、ガジェット、カメラ、etc…
そしてその中でもiPhoneのアクセサリーとか、日用品だとかに細かく分けているんです。

けどこのカテゴリーの順番は、作った順が違ったり、WordPressが勝手に順番を変えたりしてバラバラになってしまうんですよ…
「Mac」の下に「iPhoneのアクセサリー」があったりとか。
しかも管理画面では並び替えが出来ず、バラバラのままになってしまうんですよね。

せっかくならカテゴリーもちゃんと整理整頓したい…！

そんな時に威力を発揮するのが「Category Order and Taxonomy Terms Order」です！

名前長い。

カテゴリーの順番を思い通りに

「Category Order and Taxonomy Terms Order」は、カテゴリーの並べ替えが出来るWordPressのプラグイン。

まずはプラグイン追加からインストールして有効化しましょう。

有効化したら、WordPress管理画面で設定⇨Taxonomy Terms Orderと進みます。
ここではこのプラグインの設定が出来ます。
基本的に、プラグインの権限は「管理者」、自動ソートは「有効」、管理画面での並び替え「有効」にしておきます。

次にいよいよ並び替えをします。
投稿の中に「タクソノミーの並び順」という項目が増えているので選びます。

この画面では現在のカテゴリーの並び順を見る事ができて、ドラッグ&ドロップで自由に移動が出来ます！
ここで移動した並びが、管理画面や実際のブログでも反映されるという仕組みですね！

親カテゴリーを動かせば一緒に子カテゴリーもついてきます。
子カテゴリーも自由に並べ替えが出来るようにもなっています。

まずは親カテゴリーを好きなように並べて、そのあとに子カテゴリーを整理するのがおすすめです！

そうすると管理画面にもしっかり反映されています。

僕はカテゴリー記事一覧に子カテゴリーを表示出来るようにしているんですが、ここにもしっかり反映されています。

散らかっていたiPhoneやMac系の並びも、整理整頓できて良い感じに。

こうして並べ替えておくと、記事を書く時のカテゴリー設定も探しやすくてとても良いです！！

まずは整理整頓から

カテゴリーの並び替えが出来るプラグイン「Category Order and Taxonomy Terms Order」

こうして並べ替えておくと、読者も探しやすくなりますし、何より自分が分かりやすくておすすめ。
WordPressでブログを書いている方ならぜひ試してみてください！

ブログの「SNSシェアボタン」などに、”シェア・いいねされた回数”を表示するプラグインを紹介します！

シェア数が表示されるようになると書く側からしても「こんなに見てもらっていて嬉しい」と分かりますし、見る側からしても「この記事はいい事が書いてあるかも」と分かるひとつの指標になると思います！

「SNS Count Cache」を使って
記事のシェア数を見える化！

「SNS Count Cache」は、ブログ記事の中に置いているSNSボタンに、シェアされた回数を表示してくれるプラグインです。

プラグイン追加のやり方は割愛します。
「SNS Count Cache」で検索して有効化してください！

しかし…このプラグインは有効化しただけでは威力を発揮してくれないので、次は導入方法を書きます！

シェアされた数を表示させる手順

プラグインの設定画面からは、シェア数を表示したいSNSにチェックをつけられます。
僕がチェックをつけているのは以下のもの

上から、Facebook、はてなブックマーク、Pinterest、Pocket、Twitterです。

シェア数が表示されると、こんな感じになります。

左から、Twitter、Facebook、はてなブックマーク、Pocket、Pinterest、あとはタイトルとURLのコピーボタンです。
はてなブックマーク、Pinterest、Pocketに関しては、チェックを入れるだけで表示してくれます。
Pinterestは…なぜか上手く機能していないんですが…笑

Twitterはシェア数なんですが、Facebookはいいね数が表示されるようになっています。

そして大事なのはここから。
このプラグインでTwitterとFacebookのシェア・いいね数を表示させるには、一手間加えないといけません。

簡単に説明すると、シェアされたという情報を受け取るための許可が必要なんです。

Twitterのシェア数を表示させる方法

「SNS Count Cache」の設定の中に「シェア基本キャッシュ機能 – Twitter」という項目がありまして、「代替TwitterAPI」の設定をしてあげる必要があります。

僕は「widgetoon.js & count.jsoon」を使っているので、こちらの設定方法を書いてみます！

ここでは選ぶだけになるんですが、その前に「widgetoon.js & count.jsoon」のサイトにブログURLの登録をします。登録は無料！

リンクはこちら！

⇨widgetoon.js & count.jsoon

widgetoon.js & count.jsoonに、ブログのアドレスを登録

サイトにたどり着くとこんな感じ
「サイト登録申請」のボタンから、申請を送信します。

「ご利用規約」「チェックボックス」「使用するサイトURL」「メールアドレス」と並んでいます。
規約を読んでチェックをつけて同意し、使用するサイトURLの欄に「自分のブログのURL」を打ち込みます。
メールアドレスは連絡が出来るものを入力してください！

仕組みとしては、ここに入力したアドレス（＝自分のブログのURL）をTwitterの無数のツイートの中から探し出してカウントしてくれるという感じです。（たぶん）

登録申請を出すと、何日かで承認されてカウントが開始されます。
即時の場合もあるかもしれませんが、僕は3日間くらいかかりました…
最初の登録ではちゃんとURLが入力できてなかったのか上手くいかず、２回目の申請して登録出来ました…！
なので気長に待ち、２、3日経っても登録出来なかったらまたしっかり入力できてるか確認して再申請してみましょう！

無事登録出来たら登録したアドレスに連絡が来るので、再びサイトに行ってログインします。

Twitter連携をするとシェア数取得が速くなります

ログインした画面はこんな感じ。
上からサービス状態、ツイート、クロールというふうに並んでいます。

「サービス状態」では登録したサイトURL、キーワード、Twitterの連携状況が表示されています。
最初はTwitter連携をしていない状態です。
ボタンから自分のアカウントと紐つけておくと、シェア数取得が速くなるらしいです。

シェア数の取得は、いきなり全てしてくれるのではなくて、時間をかけて徐々に見つけてくれます。

プラグインの設定から、widgetoon.js & count.jsoonを選択

ここまで出来たら再びブログに入れたプラグイン「SNS Count Cache」の設定に行き、「シェア基本キャッシュ機能 – Twitter」の欄を設定します。

「代替TwitterAPI」の右のボックスを開いて、「widgetoon.js & count.jsoon」を選びます。

これでTwitterでのシェア数取得の設定は完了です！！

Facebookのいいね数を表示させる方法

次はFacebookのいいね数を表示させる方法を書きます。
僕はこちらの方が苦戦しました…

「SNS Count Cache」の設定には「シェア基本キャッシュ – Facebook」の欄があります。
ここには「App ID」「App Secret」「Access Token」という項目があり、それぞれ別のコードを設定しないといけません。

やり方は、Facebookの開発者向けページに行って開発者アカウントを取得し、こちらの項目に入力するコードを取得してくるというものです。
開発者アカウントを取得すると、ブログのURLをシェアした投稿についたいいねをカウント出来るようになるんですが、プラグインが情報を受け取る許可が必要なんですね。

手順が難しいので頑張って書きます。
分かりづらかったらすみません…

まずは最初に、Facebookの開発者向けページにいきましょう！

「Meta for Developers」にFacebookアカウントでログイン

現在のFacebook開発者ページは、社名が「Meta（メタ）」に変わった事でリニューアルされています。

僕もFacebookはちゃんと使えていないので、難しいことは飛ばして説明します（笑）

サイトにたどり着いたら、上の方にある「ログイン」のボタンを押して、お手持ちのFacebookアカウントでログインします。
Facebookアカウントがない場合は、ここで新規作成しても大丈夫です。

ログインできると、右上のボタンがログインから「マイアプリ」という表示に変わるので、マイアプリを押して進みます。

プラグイン用のコードを取得するために、アプリを作成します

画面を進むとこんな感じ。
最初は何もないと思うので、右上の「アプリを作成」を押してください。

進むと、アプリのタイプを選ぶ画面になります。
選ぶタイプによって使える機能が変わるみたいなんですが、よく分からないので「ビジネス」にしています（適当ですみません）

進むと、次にアプリ名・メールアドレスを入力する画面になります。
「表示名」には分かりやすいように、ブログタイトルをつけるといいと思います。

入力できたら「アプリを作成」を押します。

App ID、App Secret、Access Tokenコードを取得する

アプリを作成するとまずはこんな画面になると思います。
いろいろ並んでいますが気にせずに、左側の「設定」を開きます。

「設定」を開くと、「ベーシック」「詳細設定」を選べます。
ベーシックでは「App ID、App Secret」を取得でき、詳細設定では「Access Token（クライアントトークン）」を取得できます。
まずはApp Secretを有効化するために、「詳細設定」に行ってみましょう。

Access Tokenの取得

移動して下の方にスクロールすると、「セキュリティ」という項目があります。
ここには「クライアントトークン」のコードが表示されています。
プラグイン設定の「Access Token」に書き込むものです。
「リセット」を押すと表示されていたコードは無効化されるので注意します。

また、その下にある「App Secretをオンにする」をチェックして、青い表示になるように切り替えます。

App IDとApp Secretの取得

次は、同じく左側の「設定」を開いて「ベーシック」のページにいきます。

こちらのページでは、App IDとApp Secretのコードを取得できます。

「アプリID」のコードはプラグイン設定の「App ID」に。
「app secret」のコードはプラグイン設定の「App Secret」に入力します！
app secretのコードは見えないようになっているので、右の「表示」のボタンを押してコードを表示し、控えます。

プラグイン設定にコードを貼り付け

ここまで取得した「App ID」「App Secret」「Access Token」の３つのコードを、「SNS Count Cache」の設定画面にある「シェア基本キャッシュ -　Facebook」のそれぞれの項目に貼り付けます。

これでFacebookのいいね数を表示させる設定が完了です！！
長かったですね〜…

シェア・いいねの数が見える化！

これでTwitter、Facebookのシェア・いいね数を取得して表示させる設定も完了です！！
Facebookのいいね数を表示させる方法は、サイトのリニューアルによってちょっとやり方が変わっていたので、やり方が分かるまで大変でした。
僕自身何か説明で抜けているところもあるかもしれないので、その時にはTwitterのDMなどで連絡をいただけるとありがたいです…汗

無事設定が完了すると、記事の中の「SNSシェアボタン」に、それぞれのシェア数が表示されるようになります！

僕もシェアしてもらうと嬉しいですし、他のブログの記事を読みに行った時にシェア数が出ていると参考にしやすいので、数字というのは良い指標だと思います！

現在の取得数もプラグインの詳細画面から見る事が出来ます。

「シェア数」の欄にそれぞれの取得数が表示されているんですが、Facebookのいいね数を見た時は驚きました。
どこでこんなにいいねされているかは分からないからです。
ちょっと過剰なんじゃないか…？笑

ブログを書いている方はぜひ、シェア数の表示をやってみてください！！