投稿記事からイメージを取得して表示する

Image
トップページをカスタマイズしたいなぁ~と思っています。タイル状に画像を並べてタイトルを付ける。ってことでまるっきり「40代からのロードバイク」と同じ感じですかね。勉強がてら、自分でやってみたいのでこちらのサイトのファイルは参考にせずに自作してみたいと思います。

まずは投稿記事から画像を取得したいと思うので、その方法をググって調べてみました

まずは投稿記事から画像を取得したいと思うので、その方法をググって調べてみました。いくつか見つかったうち、これかな?と参考になるページを発見しました!

WordPressで記事内の画像を取得

こちらのソースでほぼ動きそうです。試してみて動いたので、自分なりにコードを整理してみました。

今まで、子テーマにfunctions.phpは作っていなかったのでファイルを作ってこのように書きました。オプション的に、何番目の、という指定をして画像を取ってこれるようにしました。重複しているロジック部分を1つにしました。

参考にされる場合はこのfunctions.zipをどうぞ

home.phpを作って試してみる

勉強会で会ったときにしくみラボの田村さんに教えてもらったのですが、トップに画像並べたいときは home.php というのを作ればいいと聞きました。home.phpというファイルがあればindex.phpより先に読み込まれるそうです。ということで、子テーマのindex.phpをコピーしてhome.phpに名前を変更、そして表示するところをちょっと変更しました。

index.phpから変更したのは if ( have_posts() ) : から endif; までの部分です。全てではないのですがちょこちょこ変わってるのでまとめてコピペしました。よろしければこちらから home.zip をダウンロードしていただければ試してみることもできます。

このように書くと、このようにタイル状に表示されるようになりました!

Image

2つめの画像を指定してみる

最初の画像でなくていくつ目の、という指定は

このように()の中に数字を入れる事で実現できます。最初の画像は0番目ということになるので1を指定すると2番目の画像になります。

同じトップページですが、2つめの画像が無いものもあるのでだいぶ表示が変わりました。

Image

post_idを指定して表示してみる

トップページだと

の中で表示しますが、それ以外の場所でpost_idを指定して画像を持って来たいときがあると思います。その場合は、

のようにget_the_content_image_by_postIDを使い、post_idを指定することで画像のurlがgetできます。

以下の例はpost_idが591の画像を取得します

Image

こちらも2番目の、という指定も可能です。

のようにするとpost_idが591 の2番目の画像を表示できます。

Image

まとめ:アイキャッチ以外からアイコンを作るときとか使えそうです

functions.phpに記述しておけばどこでも使えるのでアイキャッチ画像を指定してないけどアイコン的なものを表示したい!という時に使えそうです。

おまけ:こんなところでつまづきました

今回「初めて」functions.phpを作ったものでとんでもない間違いをしてしまいました。functionは正しく出来ているはずなのに、呼び出してみると「そんなfunctionはない!」とエラーが出てしまいます。そもそも、子テーマにfunctionを書くのはこの方法でいいのかな?間違ってるのかな?とググったら一つ目に見つかったここに

[解決済み] TwentyTen 子テーマのfunction.phpの設定の仕方 (10 件の投稿)

まず、function.phpではなくfunctions.phpですね、分かってらっしゃると思いますが;)

このように書いてあり、この方は書き間違いだったようですが私はしっかりファイル名を function.php としていて…orz と、なりました。みなさまもくれぐれもお間違いのないよう…

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る