Iskydblog 0026 02 17 18 42 10

しゅんぼー(@shun_kashiwa)です。今回はWordPressのテーマ作成のお話です。

ループ内で、サムネイルを取得するというと、基本は「the_post_thumbnail()」だと思います。
しかし、これだとimgタグごと出力されてしまい、自分で色々やりたい場合には不便です。

今回は、自分のメモも兼ねて、サムネイルのURLを取得して、いろいろ弄くる方法をご紹介します。

 コード

コードはこんな感じです。

まず、1行目でサムネイルの画像IDを取得し、$image_idに代入します。

その後、そのsrcを「wp_get_attachment_image_src()」を使って取得。それが配列で返ってくるのですが、その1つ目の値がURLになります。

使い方

これを使えば、任意のクラスを付けて画像を出力するだけではなく、背景画像としても出力できます。

こんな感じのPHPをループの部分に書いてあげて

こんな感じのCSSを書いてあげると、複雑な構造にせず、画像を中央に寄せられます(cover)。

これをJavaScriptとか使うと面倒くさいんですね。僕はそのためにこのコードを使っています。

さいごに

もじ、WordPressのテーマを作っていて、サムネイルをフィットさせたい場合は、是非使って下さい。

以上、しゅんぼー(@shun_kashiwa)でした。