【WordPress】記事内の画像を抜き出してアスペクト比を崩さずにリサイズして表示する方法

つい最近（というか昨日）サイトのTOPページのレイアウトを変更した時に色々やったことを備忘録的意味も込めて記事にしておこうと思います、ってまぁ大した内容じゃないんですけどねｗ

記事内の画像を任意のサイズで切り出したい

WordPressで記事内の画像を取り出して表示するといえば「the_post_thumbnail」が真っ先に頭に浮かびますが、これだとリサイズが少々面倒で、且つ小さいサイズにリサイズされていることが多く画質も荒くなるので今回は別のやり方で実装しました。

function.phpに関数を追加

function.php内にこちらの記事を参考にして

の「catch_that_image」という関数を追加します。

※プラグイン「PM Thumbnail Picture Menu」を利用している場合はコチラの記事の「※2013/08/10追記」部分を参照して下さい。

表示させたい場所に下記のコードを追記

<img src="<?php echo catch_that_image() ?>" width="330">

 width=”330″の数字の部分は表示させたい画像の横幅（px）ですので自由に調節してください。

縦サイズ（height）はあえて指定しないところがミソです。

CSSでリサイズ（したように）加工する

先ほど追加したコードにクラス名を付けます

<div class="resize-img">
 <img src="<?php echo catch_that_image() ?>" width="330">
</div>

 そしてこのクラス名を親ボックスとしてCSSで調節します

.resize-img{
 height:200px;
 overflow:hidden;
}

heightで画像の高さを自由に設定して、はみ出した部分は「overflow:hidden;」で見えなくするというちょっと強引な感じのやり方ですが、画像のアスペクト比を崩して引き伸ばされたりしないので意外と便利なんじゃないかと思います。