ほ〜らく奉行所

何かに挑戦したり考えたりしている人がつどっています

ようやく関連記事を表示させた

サジマ

2016年2月10日

関連記事の表示を実装する

こんばんは、サジマです。どうにか時間を捻出できたので、目標の一つであった「関連記事の表示」を実装しました。割と楽しみながらphpに触れておりました結果、どうにかある程度の雰囲気にまとまったのでその記録を残しておきたいと思います。

[ad_contents]

スポンサーリンク

その１．実装方式を検討する

①プラグインは使わない方向で。
②アイキャッチ画像はカテゴリ毎に違う構成にしている（記事ごとではない）ので、その辺を工夫する。
③人気記事（view数）ではなく完全ランダムにしてみる。

以上のことを目標に実装しております。詳細は後述ということでご容赦を。
なお、完成したhtmlの構造としては下記のような形です。

<ul class="relation">
  <li><a>関連記事1</a></li>
  <li><a>関連記事2</a></li>
  <li><a>関連記事3</a></li>
</ul>

その２．関連記事を出力させる

正直なことを言うと、先人の方々のおかげで「関連記事をphpで出力させる」という方法自体は非常に簡単なことでした。

僕は下記サイトを拝見しました（カテゴリ別を採用しています）。他にも多数のサイトがありましたので、お好みのものを探すことも可能かと思います。

関連記事をプラグインを使わずに表示する！WordPress高速化Tips！（ウェブソク）

しかし、当ほ~らく奉行所はカテゴリが同一の記事であればサムネイルが基本的に変わらないので、関連記事のリンクごとにサムネイルを出してもいまいちです。どんなデザインが良いだろうか？としばし悩んで、現時点で利用している「twenty fifteen」のテーマで提供されている、ナビゲーション（次の記事・前の記事）部分のようにしたいと考えました。

その３．サムネイルが（ほぼ）同じ関連記事たちをいい感じに出力する方法を模索する

最初はテーマが提供しているfunction.phpをじっくりと眺めて「一体どうやって実装しているんだ」と悩むところから始めました。何となくうっすらとは理解できるのですが、詳細についてはさっぱりなレベルですのでまあ時間のかかること、かかること。

ちなみに辿り着いたのは「Add featured image as background image to post navigation elements.」という部分です。

ここを見て「表示させている記事に用いたアイキャッチ画像と同じものを、ulの背景画像として表示させる」「そのためには動的にcssに書き込みをしなければならない」という考えに至り、下記のようなものを作っております。

function.phpの記述

function related_posts($rel) {
		wp_enqueue_style('style',get_stylesheet_uri());
		$thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $rel ), 'post-thumbnail' );
		$css .= ".relation { background-image: url($thumb[0]); background-position: center;background-size: cover; position: relative;padding:0.5em 0;} ";
    wp_add_inline_style( 'style', $css );
	}

まず「cssを読み込ませるのはどうやるのか？」でしばらく悩み、実装のためには関数の「wp_add_inline_style」がいることはそれとなく分かりました。しかし、それとセットで「wp_enqueue_script」が必要らしいということに、下記サイトなどを拝見してどうにか気が付きました。※2行目・5行目

管理パネルのプチカスタマイズ　カテゴリスクロールバーをはずす　（WordPress Snippet）
スタイルシートを読み込む　（MORILOG）

1行目で$relという引数を受け取っていますが、これは記事のIDです。3行目に関わります。
3行目$thumbはその記事のアイキャッチ（サムネイル）のurlなどを取得しています。
　※地味に悩んでにらめっこしましたが→関数リファレンス/wp enqueue script
4行目$cssでcssに適用させたい情報を入れています。最低限必要になるのは3行目で取得したアイキャッチのURLだけなのですが、マージンなどもご一緒に。

function.phpでの定義が完了したら、content.php（記事ページ）の良きところに下記のような形で呼び出しました。

content.php（記事ページ）の記述

	<?php
	  $rpid = $post->ID;
	  related_posts($rpid);
	?>

3行目で「開いている記事のIDを$rpidに格納」、4行目で「function.phpにて定義したrelated_postsに引き渡す」という形になっています。

この後に、プラグインなしで関連記事を表示させるphpを記述します。うちの場合はアイキャッチ（サムネイル）出力に関する部分は不要なため、カットです。

その４．cssでデザインを整える

後はお好みでデザインを整えることになります。

.relation{margin:0;padding:0.5em 0;}
.relation li{list-style-type:none;}
.relation li a{
  display: block; font-family: "Noto Serif",serif;font-size:90%;color:#fff;margin:0.5em;padding:0.75em 1em;background-color:rgba(0,0,0,0.7);
}
.relation li a:hover{background-color:rgba(0,0,0,0.9)}

これなら画像がなくても、黒でやや目立つリンク背景色になるので、まあ見苦しいことにはならないかなと考えております。hoverすると背景色は同じで透明度を変えるというのは、最近の流行です（僕にとっての）。

どうにか実装できたと思うので、今後も色々と修正をしていきたいかと思います。やっぱり「何かを作ろう」と思って頭を悩ませるというのは楽しいものですね。己のレベルの低さにもしょんぼりすることしばしばでしたが…（function.phpが何度おかしくなったことか！）

そして、最後に目標としていた納期を超過していることをお詫び申し上げます…

関連記事