ここでは、WordPressで画像を扱う上で知っておくべき知識をまとめました。「画像アップロード」「画像の挿入」「画像編集」「アイキャッチ」について紹介します。
画像アップロード
投稿の編集時に、記事の中で利用したい画像をアップロードする方法を紹介します。
まず、「メディアを追加」をクリックします。
表示された画面で「ファイルをアップロード」を選択します。
すると、画面のように、ローカル上にある画像ファイルをドラッグ&ドロップすることができます。
これで、サーバ上に画像をアップロードすることができました。
画像の挿入
アップロードした画像を記事に挿入してみます。
記事へ挿入したい画像を選択します。
サイズや配置を選択して、「投稿に挿入」をクリックします。
すると、画面のように選択した記事を表示するためのHTMLが自動で記述されます。
画像サイズについて
挿入する画像のサイズは、「サムネイル」「中」「大」「フルサイズ」から選択できるようになっています。
「フルサイズ」は、アップロードした画像のことをさしています。「サムネイル」「中」「大」は、画像をアップロードしたとき自動で生成された異なるサイズの画像です。
この異なる画像のサイズは管理画面の「設定」⇒「メディア」から変更できます。
「中サイズ」と「大サイズ」は、元の画像の縦横比のまま上限サイズの範囲内で最大の大きさになるように縮小されます。
画像編集
WordPress上で簡単な画像編集もできます。まずは、編集したい画像を選択して「画像を編集」をクリックします。
すると、画像の編集画面が表示されます。この画面で、「画像の回転、反転」「画像縮尺の変更」「トリミング」をすることができます。
アイキャッチ設定
アイキャッチ画像を設定する方法を紹介します。まずは、アイキャッチ画像の機能を有効化させる必要があります。functions.phpに次の記述をします。
add_theme_support('post-thumbnails');
add_theme_support関数は、引数で指定されたWordPressの機能を有効化させます。この記述をすることで、画像のようにアイキャッチ画像を設定するエリアが表示されるようになります。
「アイキャッチ画像を設定」をクリックすると、アイキャッチとして表示する画像を選択することができます。
アイキャッチを設定すると、設定エリアに指定した画像が表示されるようになります。
アイキャッチ画像の表示
アイキャッチ画像を表示するには、 the_post_thumbnail関数 を利用します。the_post_thumbnail関数 は2通りの利用方法があります。
方法1
// functions.phpに記述
set_post_thumbnail_size(200, 150, true);
// テンプレートファイルに記述
the_post_thumbnail();
the_post_thumbnail関数を引数なしで実行した場合、set_post_thumbnail_sizeで指定したサイズで表示されます。上記の例ですと、「横200px 縦150px トリミングあり」で画像が表示されます。
方法2
// functions.phpに記述
add_image_size('small_thumbnail', 150, 110, true);
// テンプレートファイルに記述
the_post_thumbnail('small_thumbnail');
もう1つの方法は、add_image_size関数の第一引数で設定した文字列をthe_post_thumbnail関数の引数に渡して実行する方法です。上記の例ですと、「横150px 縦110px トリミングあり」で画像が表示されます。
