WordPressでサムネイル画像を正方形に!コードを1行追加するだけ

WordPressでサムネイルを正方形に!コードを1行追加するだけでOK

WordPress(ワードプレス)で作るウェブサイト・ブログで、デザインの重要な部分を担う画像。
アイキャッチで登録した画像を記事ページのキービジュアルとしてだけではなく、サムネイルとして使うことも多々あるかと思います。

デザインによってはサムネイル画像を正方形にしたい場合があるかと思います。
商品を紹介するサイトなどでは、横長画像よりも正方形画像のほうがキャッチーに見せることができるので、正方形画像があると重宝するのです。

今回は、その正方形画像を生成する方法をまとめます。
と言っても、実はコードを1行追加するだけ。サクッと簡単に実装できますよ。

ワードプレスのサムネイルを正方形にしたい!そんな時に

さて、今回僕がサムネイルを正方形にしたいな〜と思ったのは、こんなデザインが必要になったからでした。

WordPressでサムネイル画像を正方形に!コードを1行追加するだけ

「PRODUCT」なのにステーキってなんなのよ、となりそうですがあくまでレイアウトのサンプルです。
ちなみに関係ないですがステーキはミスターデンジャーのものw

元々WordPressで画像を登録すると、自動的にいくつかのサイズの画像が作成されます。
その中に正方形のサムネイルもあるのですが、デフォルトでは”150 x 150″となっていて小さいのです。

管理画面のメディア設定からサムネイルのサイズを変更することも可能ですが、小さいサイズも利用する場合があったりと変更するのは難しい場合があります。

そんな時には、WordPressで自動生成される画像の種類を増やしてしまいましょう。

任意のサイズの正方形サムネイル画像を追加する方法

さて、WordPressで自動生成される画像の種類を増やすには、前述の通りコードを1行追加するだけとなっています。

コードを追加するのは利用しているテーマ内のfunctions.php。
子テーマを利用している場合は、そちらのfunctions.phpに記述します。

追加するコードは上記。
設定値の内容は、「add_image_size (‘名称’ ,幅 ,高さ , 切り抜きの有無);」となっています。

  1. 名称(必須)
    画像を呼び出す際にも利用する名称です。任意でつけることができます。

  2. 初期値は0。サムネイルの幅をピクセルで入力します。
  3. 高さ
    初期値は0。サムネイルの高さをピクセルで入力します。
  4. 切り抜きの有無
    trueまたはfalseで指定します。初期値はfalseです。
    falseの場合は指定したサイズでのリサイズ、trueにした場合は指定したサイズでの切り抜きとなります。

コードを追加した上で、投稿画面よりアイキャッチなどを登録すると指定したサイズのサムネイル画像が自動生成されるようになります。

Advanced Custom Fieldsなどのカスタムフィールドから登録した画像についても同様に作られますよ。

自動生成した正方形サムネイルの書き出し

 

さて、書き出しについても簡単で、画像を書き出す際に使う”large”や”thumbnail”などの設定値と同様に、任意で命名した名称で呼び出すだけです。

まとめ

どうでしょう、想像するよりも簡単ではないでしょうか。
注意点としては、当たり前ですが自動生成の画像の種類を増やせば増やすだけ画像の数が増えること。また、上記設定を行う前の画像には設定は適用されないことです。

設定も簡単なので、WordPressでサイト構築する際には念頭に置いておきたいですね。

カテゴリ別記事一覧(全カテゴリ一覧
WordPress ウェブ制作・運用

筆者について

筆者について


1982年、東京下町生まれ。
高校卒業後、アメリカへ留学。その後、「アートが根付いた国では絵だけで食えるのか」を確認するため、ドイツベルリンにてアート活動をおこなう。

日本に戻ってからは、コーディング・オーサリング・プログラミングなんかを経て、ウェブディレクターを肩書きにしておりました。現在は独立し、ブログやサイトの運用を軸に、ウェブサイトの企画提案からデザイン・構築まで手広く活動しております。何でも屋です。
制作のご依頼はお問い合わせフォームよりお願いします。

isLog〜イズログ〜では『日々生きること自体が旅』をモットーに、日々の旅を中心に綴っています。

詳しいプロフィールはこちら


feedly

コメントを残す

*