[Ha-Basic] How to insert and display a simple list of related articles at any place in the theme

【ha-Basic】テーマで任意の場所へ関連記事の簡易一覧を挿入・表示する方法

公開日: カスタマイズ
Knowledge Base Wordpress ha-Basic テーマ

せっかくサイトへ訪問してくれたんだから関連する他のお役立ち情報や記事も見てほしい!!ははっきり言って建前、本音はページビュー数を伸ばしたい!!これはジャンルを問わずサイトを公開している人なら当然望むことだと思います。

WordPressの多くのテーマでは各ページの末尾へ関連記事の一覧(厳密に言えば同じカテゴリーなどから抽出した記事をランダムに〇件表示するもの)が表示されるパターンがほとんどで、もちろん【ha-Basic】でもこの機能を持っています。

が、特に長い記事などではそこまできちんと見て「この記事も読んでみよう!」とクリックする方はどの位いるんだろう??と考えるとどうなんでしょう??自分が他の方のサイト見た時はどうしてるんだろう?と想像してみるとあまりクリックはしてないような気がします。

ということは末尾の関連記事表示は無駄にも思えてきますよね?ただひょっとしたら・・・と確率を上げるためには設置しておいた方がいいと思いますので各自の判断でどうするかは決めていただければいいのですが、もっと効果的な方法ないの?で考えたのが今回紹介する、記事本文内の任意の場所へ関連記事の簡易表示(タイトルリンクのみ)を設置する方法です。

この手法は大手のポータルサイトなどでも使われていることがありますから、恐らく効果的な方法なんじゃないかなぁということでこのサイトへも適用させつつ、同じ【ha-Basic】テーマを使っていただいている方が設置する参考になればということで備忘録も兼ねて紹介しておきます。

簡易関連記事一覧の表示例

百聞は一見に如かず、この下にある「記事内に挿入する関連記事用のプログラムを作る」という見出しの上に表示されているのが今回のカスタマイズで実装できるものになります。

記事の中にさりげなく他記事へのリンクを張ることで内部リンク対策(SEO対策)にもなるし、訪問者には関連記事をさりげなくアピールできる一石二鳥の効果が期待できると思いますよ。

それでは早速作っていきましょう!!

【ha-Basic】全ユーザーのダッシュボードから「WordPress イベントとニュース」ウィジェットを削除する方法

【WordPress】記事本文下へ作者情報を表示するカスタマイズ(やってみたら結構簡単でした)

【ha-Basic】テーマのモバイル表示画面下部に追従型メニューコンテンツを設置する方法


記事内に挿入する関連記事用のプログラムを作る

パソコンのテキストエディタを立ち上げ、以下のコードをコピーします

	<div class="related-entry-in">
		<p>こちらの記事も役立つかもしれません。よかったらどうぞ!</p>
<?php
//カテゴリ情報から関連記事を2個ランダムに呼び出す
	$categories = get_the_category($post->ID);
	$category_ID = array();
		foreach($categories as $category):
		array_push( $category_ID, $category -> cat_ID);
		endforeach ;
	$args = array(
		'post__not_in' =>  array (get_the_ID()),
		'posts_per_page'=> 2,
		'category__in' => $category_ID,
		'orderby' => 'rand',
		);
	$query = new WP_Query($args); ?>
		<?php if( $query -> have_posts() ): ?>
		<?php while ($query -> have_posts()) : $query -> the_post(); ?>
	<div class="related-entry-content-in">
		<h4 class="related-entry-title-in"> <a href="<?php the_permalink(); ?>">
		<span>☆</span><?php the_title(); //記事のタイトル?>
		</a></h4>
	</div><!– /.related-entry-content –>
	<?php endwhile;?>
	</div><!– /.new-entry –>
	<?php else:?>
	<?php
	endif;
	wp_reset_postdata();
	?>
<br style="clear:both;">
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

コピーしたら「名前をつけて保存」を選択し、ファイル名を「related-entry-inline」、拡張子を「php」、文字コードをUTF-8(BOMなし)で保存してください。

文字コード?という方は

の記事が参考になるかと思いますので参照ください。

終わったらFTPクライアントソフトなどでサイトのテーマフォルダ内へ転送してください。

関連記事の出力条件を変えるには

この機能はWordpress公式の関数である「wp_query」を使っています。関連記事を抽出する条件としては

		'post__not_in' =>  array (get_the_ID()),
		'posts_per_page'=> 2,
		'category__in' => $category_ID,
		'orderby' => 'rand',
という部分で指定していて、上から順に

  • 現在表示中の記事は対象外にする
  • 該当するものから2件表示する
  • 同じカテゴリーの記事から抽出する
  • 抽出されたものをランダム(適当)に表示する

という意味になります。これ以外にも条件をいろいろ設定できますので、詳しくは

をご覧になり、上の4行の中や末尾へ追加・削除していくだけです。
※条件はすべてを満たすというものですから順番は関係ありません

ひとまずは上のコードでファイルを作成して、動作の確認をした後でカスタマイズするといいかと思います。

本文内の任意の場所へ表示させる

【ha-Basic】テーマではテーマ内のphpファイルをショートコードで簡単に挿入できる機能を備えていますので、単純に

[myphp file='related-entry-inline']
を表示したい場所へ挿入するだけです。

・・・あまりスタイリッシュ(笑)ではないですねぇ・・。当然です。こうしたカスタマイズではコードの設置などとは別にデザイン要素を設定する必要があります。

このサイトのデザインと同じでよければ、テーマエディタからa-insert-css.cssを開き、以下のコードを末尾へ追加してください。

デザインの調整(CSSの追加)
/****************** 記事内関連記事 *******************/
.related-entry-in {
    padding: 10px;
    background-color: #56d4f642;
    border-radius: 10px;
}
h4.related-entry-title-in a {
    text-decoration: none;
    font-size: 0.8em;
    color: #333;
}
h4.related-entry-title-in a:hover{
 opacity:0.7;
}
.related-entry-in p {
    font-size: 0.8em;
    margin-bottom: 2px;
}
画面を再表示してみてデザインが変わらない場合にはキャッシュのクリアをすれば適用されます。
キャッシュのクリア?どうやるの?

キーボードからブラウザのスーパーリロード(キャッシュクリア)をする方法(Windows用)

CSSの編集後すぐに変更が適用されないときに以下の方法で一時保存されている情報をクリアします

  • Google Chrome/Microsoft Internet Exproler/Mozilla Firefox
  • ctrlを押しながらf5
  • Microsoft EDGE
  • F5を押す、またはctrlを押しながらR
  • Apple Safari
  • ctrlを押しながらR

どうですか?うまくいきましたか?簡単な作業で任意の場所にその記事と同じカテゴリーに属する記事リンクの表示ができるようになりましたね。

もう一工夫 全部の記事へ自動で挿入する方法

いくら任意の場所へ表示できるといっても今まで書いた過去記事にいちいち挿入するのは面倒!!ですよね(笑)。【ha-Basic】テーマを使っている方、実は今ある機能を使って自動挿入が可能なんです(我ながらいいテーマだなぁと思います..自画自賛)

【ha-Basic】テーマには予め1~3番目のh2タグ手前に広告などのコードを自動挿入して表示させる機能が備わっています。これはショートコードの実行も可能なので先ほどのショートコードをそこへ挿入すれば・・・はい!全部の記事へ設置完了!!となります。カンタンカンタン!!

具体的にはテーマエディタを開いてa-before-h2ad.phpを選択し、ショートコードをコピペして保存するという簡単な作業です。

あとがき

今回紹介した関連記事表示の機能、実は既に搭載されていて、投稿の下へ表示されるようになっている関連記事一覧の応用(というか流用)なんです。関連記事表示は「related-entries.php」にソースがあります。

そこから記事内に入れるのでアイキャッチや抜粋など不要なものを排除して、CSSセレクタを変え、関連記事全体に背景色などを加るのとループ内で今見ている記事を除外するためにコードをちょっと変えただけです。

興味のある方は双方のファイルを開いてどこがどう違うのかを見てみてくださいね!!

それから、記事が表示される度に前述した条件で記事を抽出・表示するという段取りが必要になりますから当然ながら若干表示速度への影響がありますからその点は自身のサイトへ設置して影響の確認をお願いします。

またほかのテーマをお使いの方も記事を抽出させるためのコードとそれを表示させる方法が分かれば同様に設置可能ですからチャレンジしてみてくださいね。

それではまた有用なカスタマイズ情報などありましたら紹介させていただきます。

ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報