WordPressアイキャッチの自動トリミングのやり方

こんにちは、矢田です。
Web制作歴は10年。
Wordpress歴は7年です。

Wordpressでアイキャッチってよく使うと思います。
ただ、画像サイズを上手にカスタマイズできない人のために
画像サイズを自由に設定する方法をまとめました。

▼読んでほしい人

• wpでアイキャッチを表示したい人
• さらにアイキャッチの任意のサイズに自動トリミングを行いたい人

WordPressアイキャッチの自動トリミングの仕方

アイキャッチを有効にする

まず、アイキャッチを有効にします。

functions.phpに以下のコードを追加。
下のほうに追加しておきましょう。

// アイキャッチ有効
add_theme_support('post-thumbnails');

アイキャッチの自動トリミングコード

このコードでファイルをアップロードしたときに
アイキャッチ画像を切り抜きます。

functions.phpに入力

例

/* サイズを複数設定 */
add_image_size( 'l-size', 300, 200, true );

説明

add_image_size( '①名前 任意の英数字', ②横幅, ③縦幅, ④トリミング位置);

①名前 任意の英数字：自分で好きな名前をつけてください。
②横幅：トリミングしたい横幅のサイズです。pxはいりません。
③縦幅：トリミングしたい縦幅のサイズです。pxはいりません。
④トリミング位置：中央の時はtrueと入力します。
中央以外の例（左上の場合）

add_image_size('l-size', 300, 200,array('left','top'));

アイキャッチを表示する方法

表示したい場所に以下コードを入力。
例えば、page.phpやarcives.php等

例

<?php echo get_the_post_thumbnail($post->ID, 'l-size'); ?>

説明

<?php echo get_the_post_thumbnail($post->ID, '①先ほど入力した名前 任意の英数字'); ?>

①先ほど入力した名前 任意の英数字：先ほど同じものを入力してください。この例であればl-size。

以上です。

なぜ、トリミングができるのが解説

ちなみになぜトリミング出来るかというと
Wordpressはもともとトリミングの機能が備わっています。
その機能に追加で数値入力をしているため、トリミングができます。

注意点

トリミングが行われるタイミングは
管理画面から画像をアップロードする瞬間です。

つまり、すでにアップされている過去のアイキャッチに関しては適応されません。
その場合は、もう一度記事事にアップすることで、変更が可能です。

まとめ

よく使うアイキャッチの説明でした。
画像トリミングを自動でやってくれるのは素晴らしいですね。
よく使う機能ですし、覚えておきましょう。