wordpressでアイキャッチ画像を有効化〜表示させるまでの実装手順

wordpressでアイキャッチ画像の設定〜表示させるまでの実装手順の覚え書きです。
目次

1,functions.phpへの記述

WordPressでアイキャッチ機能を有効化するには、テーマファイルの functions.php に以下のコードを追加します。

add_theme_support( 'post-thumbnails' );
//サイズを指定する場合は以下も記述
set_post_thumbnail_size(180, 150, true);

180は横幅180px、150は縦幅150pxの意味です。任意の数字に設定します。
このサイズ指定は省略しても構いません。
ここでサイズ指定しない場合は、ダッシュボードツールバーの「設定 / メディア」からも設定できますし、挿入するヶ所ごとに指定もできます。
「設定 / メディア」で設定した場合は、設定後にアップロードした画像からトリミングが有効になります。

また、アイキャッチを切り抜きする場合はtrue、しない場合はfalse、省略した場合はfalseになります。

上記コードを記述すると投稿記事の編集画面に「アイキャッチ画像」の設定項目がでてきます。

2,アイキャッチ画像を挿入（テンプレートファイル内への記述）

下記のコードを、テンプレートファイル内の表示させたい場所に記述します。

//メディアのサムネイルサイズで表示
<?php the_post_thumbnail('thumbnail'); ?>

//メディアの中サイズで表示
<?php the_post_thumbnail('medium'); ?>

//メディアの大サイズで表示
<?php the_post_thumbnail('large'); ?>

//フルサイズで表示
<?php the_post_thumbnail('full'); ?>

//the_post_thumbnail関数を使用して表示
<?php the_post_thumbnail('array(100,100) ); ?>

//W300px×H180pxに縮小して切り抜く
<?php
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 300, 180, true );
?>

//W300px×H300pxにリサイズする
<?php
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 300, 300 );
?>

3,カラム幅より画像サイズが大きくてはみ出してしまう場合

style.css（他のcssでも◯）に

.wp-post-image {
max-width: 100%;
}

を記述すれば解決です！

参考にした記事：aqua-forest.com