@_tenbiです。
ブログを再開してもなお、サムネイルの紐付けだけが上手くいかずトップページが悲しい状態になっていました。
そこで発想を転換して「記事内の最初の画像を表示させる方法」を調べた所、WordPressの投稿記事内の画像の最初の1枚をサムネイルとして表示する方法 | memocarilogという記事が見つかったので設定してみました。備忘録がてら。
functions.phpを使う
※以下から設定する内容にはfunctions.phpの編集が必要になります。記述を間違えるとブログが吹っ飛びますので必ずバックアップをお願いします。
Step.1
まず、現在使用しているテーマファイルのfuctions.phpに以下の関数を追記していきます。
追記が終わったファイルをFTPを経由してサーバーにアップロードします。
Step.2
サーバーへのアップロードが終わったら、画像を表示したい箇所に以下を挿入します。
先ほどの関数ではあくまでも記事中の最初の画像のURLを取得しているだけですので、imgタグで画像を表示させます。
画像幅はCSSで調整
この方法で取得した画像は当然ながらリサイズ等されていないので、CSSや画像タグにwidth,height等を記載して調整しましょう。
実例
説明してばかりではちょっとわかりづらいと思うので実例を。サムネイルの設定が吹っ飛んだ当ブログでは、以下のHTMLで画像を表示しています。CSSは画像を囲むクラスに対して設定済み。
これを実際に適用しているのがトップページのタイル状のエントリ一覧です。
最後に
この方法を使うとサムネイルをいちいち設定しなくても最初の画像を自動で引っ張ってきてくれるのでかなり楽な感じです。参考サイトにはfunctions.phpを使用する方法以外にも2つ例が載っていたのでそちらもどうぞ。
