2013WordPressTips【WordPress】アイキャッチ画像を自動で切り抜き・リサイズブログを美しく見せる最も手っ取り早い手段がアイキャッチ画像だと思います。アイキャッチとは、その名の通りコンテンツの内容を端的なイメージで訴求するためのもの。記事への興味を持ってもらうために必須と言えますが、毎回フォトレタッチソフトで画像を整形するのはかなり面倒です。僕の場合はかつて更新が滞った一因にもなりました。アイキャッチ用にアップした画像を自動で切り抜いたりリサイズする方法をご紹介します。Thumbnailなどのプラグインを利用したりテンプレートファイルに直接記述する方法を多く見掛けますが、僕個人のポリシーで可能な限りfunctions.phpからコントロールする方法を推奨しています。functions.phpに以下のコードを追加functions.phpはテーマディレクトリの直下にあるファイルで、テーマによってはfunction.phpだったりします。直接ファイルを編集してFTPでアップロードするか、管理画面の「外観」⇒「テーマ編集」⇒「テーマのための関数」を編集します。いずれにしてもバックアップはしっかりと。);WordPress管理画面の投稿/固定ページでアイキャッチ画像を設定するためのコードです。);そして表示サイズを指定するコード。数字はそれぞれ画像の横幅と縦幅なので自由に設定してください。trueは画像を切り抜きたい場合に記述します。上記の例では、アップロードした元画像のサイズを640×480とすると、そのままの比率(4:3)で520×390に縮小してから天地の余剰部分をカットして520×220にする作業を自動で行うわけです。);trueを記述しない場合は自動リサイズになります。縦横比を保ったまま縮小されなので、たとえば縦横1:1に指定すると足りない部分が生じます。実例を挙げるとこんな感じですね。当サイトでは各記事のアイキャッチを520×220、新着記事のサムネイルを50×50でいずれも切り抜きモードに設定しています。the_post_thumbnail();?>以下はこのサイトにおける記述例です。index.phpとsingle.phpに上記のタグを追加しています。?></div></div>挿入する場所はデザインに合わせて任意で。あとでスタイルシートで微調整もできます。これで一旦は完了です。ついでにアイキャッチが無い場合の代替画像を指定いくら簡単にアイキャッチを表示できるようになったとはいえ、それでも記事内容によってはマッチする画像を見つけてくること自体が難しかったりします。当サイトの場合はデフォでアイキャッチが必要なサイトデザインなので、画像が用意できないときに予め設定しておいた代替画像を表示させるようにしました。そのために以下のコードを同じくfunctions.phpに追加で記述しています。);}}}ハイライト中にある「23」の数字、これは代替画像用にアップロードした画像URLのIDです。IDの調べ方は以下のURLにて。英語ですが問題なく理解できると思います。Wptuts+なお、この代替画像を表示する方法は以下のエントリを参考にしました。いつもいつもお世話になっております。ちびと.net代替画像をカテゴリ別に設定するすいません、分からないなりに頑張りましたがやっぱり分かりませんでした。惜しいところまではいったんですが...どなたか詳しい方よろしくお願いします。これなんて凄くイメージに近いんですよね。top↑」の画像がすごく邪魔です...(/o\)めっちゃ邪魔...笑もったいないので通りすがりの774から進言でした。PMご指摘有難うございますwネタとしても古いので手が空いたら邪魔にならない小さい画像に差し替えます。コメントをキャンセルメールアドレスが公開されることはありません。followers)Facebook。