制作会社から制作会社じゃない会社に転職が決まりました。制作会社で学んだことを残らず記事にしたいと思います。

パンDKOTORI Blogの公式キャラクター「パンD」です。
コーディングWordPressメディアのサイズを追加する[WordPress]

メディアのサイズを追加する[WordPress]

2013年11月20日WordPress 便利コード 
メディアのサイズを追加する[WordPress]記事のアイキャッチ画像

WordPressのメディアのサイズは3種類ですが、このサイズを追加する方法をご紹介します。function.phpに一行追加するだけという超お手軽な方法です。

まえがき

WordPressで画像をアップロードすると、デフォルトの設定だと
「サムネイル(150×150)」
「中サイズ(300×300)」
「大サイズ(1024×1024)」
のサイズで画像が自動的に切り出されます。このサイズをただ変更したい場合は「設定」→「メディア」から編集することができるのですが、サイズが3つだけでは足りない場合、自分の好きなサイズを簡単に追加することが出来ます。
その方法をご紹介します。

function.phpに、追加したいメディアサイズのコードを追記

お使いのテーマのfunction.phpにちょっとコードを追加するだけでカスタムサイズを作成することができます。

add_image_size( $name, $width, $height, $crop );

$name : サイズの名称。半角英数で付ける。
$width : 画像の横幅(省略時は0)
$height : 画像の高さ(省略時は0)
$crop : 縮小時にトリミングする場合はtrue、しない場合はfalse(省略時はfalse)

add_image_size()を使用したメディアサイズの追加例

・画像を横幅300px、高さ200px以下に縮小する場合

add_image_size('img300x200', 300, 200);

・画像を横幅230pxに縮小する場合

add_image_size('img230', 230, 9999);

・画像を横幅150px、高さ150pxにトリミングする場合

add_image_size('img150t', 150, 150, true);

もちろん複数設定することもできますよ。

add_image_size('img300x200', 300, 200);
add_image_size('img230', 230, 9999);
add_image_size('img150t', 150, 150, true);

追加したサイズで書き出された画像の表示

追加したサイズのアイキャッチ画像を表示する場合はこんな感じです。

<?php
if(have_posts()): while(have_posts()): the_post();
$thumbnail_id = get_post_thumbnail_id($post->ID); //アタッチメントIDの取得
$image = wp_get_attachment_image_src( $thumbnail_id, 'img300x200' ); //「img300x200」サイズのアイキャッチの情報を取得
?>
<img src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" />
<?php
endwhile;endif;
?>

アイキャッチ画像の「URL,横幅,高さ」を取得する
で紹介したコードのサイズの部分を変更するだけですね!

既にアップロード済みの画像への対応

function.phpにタグを追加する前に既にアップロードされている画像に関してはリサイズされません。
しかーし!!!「Regenerate Thumbnails」というプラグインを使用すれば、アップロード済みの画像を一括で書き出しなおしてくれます!!!!
すげー便利です。
「Regenerate Thumbnails」の記事書いたので参考にしてください!

『Regenerate Thumbnails』の使い方

「add_image_size()」で追加したサイズで書き出した画像を記事本文内に挿入したい

追加したカスタムサイズを投稿の編集の「メディアを挿入」から選択できるようにしたい場合もあると思います。
そんな時は「WP Image Size Selection」というプラグインを使いましょう。
インストールして有効化するだけでカスタムサイズをプルダウンから選択できるようになります。
「WP Image Size Selection」の記事も書いたので参考にしてください!

『WP Image Size Selection』の使い方

まとめ

実際、メディアのサイズを追加するにはプラグインを使用する方法もあります。
案件によってはクライアントが自由にサイズを変更できたほうが良い場合もあるかもなので
プラグインを使用した方法のすごい参考になるページはっときます。
WEBUTUBUTU様

ただ、KoToRiは全体的にfunction.phpにちょっと書き足すスタイルが好きなので、いつも「add_image_size()」で追加していますが
function.phpに追加したサイズを管理画面に表示する方法はあるのかな?と思って色々探してみたら「WP Image Size Selection」というプラグインが見つかったのです!
プラグイン充実しすぎですね笑
そしてプラグイン市場はほぼ英語なので英語が読めれば更に広がりますね。
英語勉強しようかな><

シェアするみんなシェアしてね

フォローするフォローする

いつもKOTORI Blogをご覧いただきありがとうございます。Facebook、Twitterを通じて、皆様と交流していき色んな情報を共有していければな~と思ってます。お気軽に登録してください!

基本フォロー返します。

RSSを登録する

RSSはこちらから。

follow us in feedly

Feedly使ってる人はこちらから。

Buy me a Beer

動く!パンDのLINEスタンプ
好きな人にアプローチスタンプ
パンDのLINEスタンプ

関連する記事関連する記事も読んでみてね

コメント