WordPressに関連記事をプラグインなしで導入

先日ローカルにこのブログのコピーを作りましたが、関連記事のコードを入れてみました。プラグインを入れすぎると重たくなるしメインテナンスも大変になるので、コードの勉強がてらやってみました。

コードそのものは難しいものでなく、タグが同じ記事を指定した数だけ表示するというものです。

基本的には以下のコードをsingle.phpのメイン記事が表示された後に挿入しました。

ただサムネイル画像で苦労しました。

サムネイル画像は、以下の2つの方法でやってみました。

1.単純に呼び出して表示する。

2.背景として表示する。

1.単純に呼び出して表示する。

has_post_thumbnailをIfで聞いてもしあれば、get_the_post_thumbnailでサムネイルを呼び出しています。サムネイルがなかったら、No-Imageの画像を呼び出してます。

このやり方は簡単でしたが、画像の高さが揃いませんでした。Googleで調べましたが、このやり方をすると高さを揃えるのが難しいとのことです。

というのもアイキャッチ画像をアップロードする際色々なサイズで保存されているのでそれが一定のサイズでない為です。以下はサイズが揃ってない画像です。

2.背景として表示する。

このやり方もそう大変ではないです。wp_get_attachment_image_srcでサムネイル画像が保存されているディレクトリ画像を見つけ、
background-image:url()のカッコ内に入れてあげるだけです。以下が変更した部分のコードですが、Whileループとinner div classの部分だけ変えただけです。

ただ、これも画像が表示されないという現象があって苦労しました。
以下がcssですが、サムネイル画像が背景となってるa タグの設定が問題でした。

display:blockを入れてあげただけで、画像がちゃんと表示されました。ここまで来るのに1.5日ほど費やしました。Display:blockがキーポイントです。高さは問題なくあるのにどうしても画像が出てこずあれやこれややってやっと分かりました。

最終的に以下のようになりました。

まとめると、プラグインを使うと多分もっと簡単だと思いますが、コードでやってみると時間はかかりますが、いい勉強になります。

それにしてもphpはhtmlの中に入り込んでいるのでコードを見ると分かりづらいです。

また今後も何かあればプラグインでなくコード変更でやっていきたいです。