WordPressでアイキャッチ画像の設定とリサイズする画像サイズ設定
WordPressをダウウンロードすると、アイキャッチ画像はデフォルトで設定されておらず表示されてないです。
また、リサイズ設定もされていない為、アップロードしたサイズで表示されることがよくあります。そういった時に自動でリサイズも設定してくれるようにしておくと、ホームページの表示スピードも落とすことなく制作することができます。
今回は、WordPressでアイキャッチ画像の設定（表示）と専用リサイズをご紹介します。
アイキャッチ画像とは？
アイキャッチ画像は主に記事の顔となる画像によく使われます。ブログなどでは、この画像がユーザーの目にどう映るかでクリック率を上げたりします。
またホームページ制作でもこのアイキャッチ画像をカスタマイズすることで、メニューの画像を表示して一覧表示で見せることもでいます。
WordPressでホームページ制作やブログを運営される方には、なくてはならない設定の１つです。
管理画面上にアイキャッチ画像を表示しよう
まず、アイキャッチ画像はWordPressをダウウンロードしアップロードしても、最初から設定されていません。
ですから、WordPressでサイトを自作するにはアイキャッチ画像を表示するようにfunctions.phpにコード追加する必要があります。
まずは、下記のコードを追加をfunctions.phpに追加してみましょう。
|
1 2 |
//アイキャッチ画像を利用できるようにします add_theme_support('post-thumbnails'); |
これだけで、管理画面上に表示されます。設定自体は簡単にすることができるので初めてWordPressを触る方でもほとんど間違えることはないでしょう。
アイキャッチ画像にリサイズ設定をする
アイキャッチ画像を使う際に注意することは、画像をアップロードするごとにサイズを指定する必要があります。
ですが、画像を使う場所が決まっていたり、特定の場所に毎回使うということであれば、事前にアップロードした時にリサイズをしてくれるようにすることもできます。
|
1 2 3 4 5 |
//blog用画像サイズ設定 add_image_size('blog_image', 640, 480, true); //news用画像サイズ設定 add_image_size('news_image', 710, 9999, false); |
このように特定のサイズを設定することで、ブログ専用・ニュース専用といった画像サイズにすることができます。
ここでの注意点は、リサイズ設定を複数作り過ぎないようにしてください。サーバー自体にリサイズ画像が多く残る為、リサイズ設定を多くすればするほどサーバー内の画像も増えていきます。
「blog_image」「news_image」でリサイズした画像の種類を分類します。
次に右隣の「640」「710」は画像の横幅（px）の指定です。
更に右隣の「480」「9999」は画像の高さ（px）の指定ですが、「9999」は、高さを制限なしにしていると考えてもらうと分かりやすいかもしれません。
アイキャッチ画像を取得し表示させる
最後にホームページへアイキャッチ画像を表示させるコードを書き込めば完了です。
|
1 2 3 |
<?php the_post_thumbnail('thumbnail'); ?> <?php the_post_thumbnail('blog_image'); ?> |
1行目は通常の表示方法です。
3行目はリサイズ指定したアイキャッチ画像の表示になります。functions.phpに設定している「blog_image」「news_image」を書き換えるだけで、その画像が表示されるようになります。