WordPress に欠かすことのできないサムネイルを実装するアイキャッチ機能を使えるようにする手順や応用方法をメモします。
アイキャッチの実装手順
function.php へ記述する実装コード
通常のアイキャッチ実装コード
|
1 2 |
// アイキャッチ画像を有効にする。 add_theme_support('post-thumbnails'); |
こちらのコードは、WordPress 設定で登録してあるサムネイルのサイズに準拠してアイキャッチ画像を生成します（デフォルトからいじっていなければ 150 x 150 サイズ）。
細かくアイキャッチ画像のサイズを指定する実装コード
|
1 2 3 4 5 6 7 8 9 |
//+++アイキャッチ画像設定++++// add_theme_support( 'post-thumbnails' ); //基本サイズ set_post_thumbnail_size( 500, 500); //Mサイズ add_image_size('msize', 400, 400); //sサイズ add_image_size('ssize', 160, 160, true); //正方形の画像にする場合は最後の数値の後に、400, true); のようにする。 |
各サイズの数値部分を任意で設定可能。また「’ ‘」の部分のサイズ名称（msize）などの部分は任意で設定可能。この名称を指定することでで各サイズを呼び出す。
ページファイルへ記述するアイキャッチ呼び出しコード
特にサイズ指定のない通常の呼び出しコード
|
1 |
<?php the_post_thumbnail(); ?> |
サイズ指定は無いので、通常は 150 x 150 の正方形になる。
細かくサイズ指定する場合の呼び出しコード
|
1 |
<?php the_post_thumbnail('画像のサイズ'); ?> |
画像のサイズの部分を fanction で自分が設定した任意サイズの名称にする。
サムネイルの URL だけを呼び出すコード
|
1 |
<?php the_post_thumbnail_url('画像のサイズ'); ?> |
上ふたつの呼び出しコードは、img タグも自動で生成して完全な画像としてアイキャッチを表示します。この呼出コードは画像の URL だけを呼び出すので、他のタグと組み合わせたりできて汎用性が高いです。
個人的には以下の CSS レイアウトとの組み合わせが相性抜群だと思っています。
以上アイキャッチの導入手順メモでした。
