こんにちは こんばんは おはようございます。

デザイナーの野田沢です。

「初心者のためのWORDPRESS」も今回で5回目！

5回目にして漸く実務的な実装に取り掛かりたいと思います←

投稿記事のサムネイル画像（アイキャッチ画像）の表示を変えよう

実務初回はサムネイル画像（アイキャッチ画像）の表示についてです。

TOPページなどでサムネイル付き記事をリスト表示することが企業サイトでは多くあると思います。

サムネイル画像はアイキャッチに設定した画像が表示されるのですが、通常はCSSなどで指定した横幅に合わせて縮小された画像がサムネイル画像として表示されますが、記事によって画像の比率がバラバラだった場合、一覧にしてみると統一感が失われ少し残念な感じになると思いませんか？私は思います。

そこでどんなサイズで投稿してもサイズが統一されるようになったら素晴らしいですよね？

個人的には正方形だと美しいな感じるので、今回はサムネイル画像を全て正方形に表示するように設定したいと思います！

functions.phpに設定を付与！

サムネイルの正方形表示は実はとても簡単なんです。まずは下記の様に正方形表示の設定をfunctions.phpに追記してください。

add_image_size('thumb140', 140, 140, true);

追記する場所ですが、add_theme_support( ‘post-thumbnails’ ); とう言う記述の1行したに追加してください。

上記コードのthumb140は呼び出す名前なので任意で変更してください。

つぎの140はサムネイルの横幅サイズで次の140はサムネイルの縦幅サイズです。

こちらもサイトに合わせて変更してください。

サムネイル画像の呼び出し

あとは上記で指定した名前を使って通常通りサムネイルを呼び出ししてあげるだけ！こんな感じ。

<?php the_post_thumbnail('thumb140'); ?>

通常何も指定しなければthe_post_thumbnail();こんな感じでサムネイルを呼びだしていると思いますがそこにfunctions.phpで作ったサムネイル用の条件を加えるだけです。

思っていたよりも簡単だったんじゃないでしょうか？？もしよければお試しあれ！

私はこちらのサイト様を参考にさせて頂きました。
WordPressのアイキャッチ（サムネイル）を好きなサイズの正方形で表示しよう

それでまた次回っ！

過去記事

▶初心者のためのWORDPRESS -04-
▶初心者のためのWORDPRESS -03-
▶初心者のためのWORDPRESS -02-
▶初心者のためのWORDPRESS -01-