巷で噂のアイキャッチ画像をWordPressで表示させてみた

2012年01月10日

アイキャッチ画像を表示させてみた

ひっそりとリデザインしたこのブログ、大したことをやっていないように見えて、これでも何かと色々手を加えています。人知れず咲く花のように、そうアスファルトのヒビに咲いたタンポポのようにひっそりと。

ホントは手を加えた箇所について全てまとめて書こうと思っていたのですが、おそらくもの凄く長い文章になるんだろうなぁと思って個別に書くことにしました。ほら、タイトルとかも「リデザインした」より「〜のプラグイン追加した」とかの方がわかりやすいでしょ?

なのでまずは第一弾として、豪華絢爛なデザインになったこのブログをよりいっそう華やかにしてくれたアイキャッチ画像の追加について説明したいと思います。本当に巷で噂かどうかは知らん。

目次

アイキャッチを使用する事を教えてあげる

まずは今使用しているテーマで「アイキャッチを使いますよ!」って宣言します。宣言するのはもちろんテーマフォルダ内の functions.php です。以下のコードを書きましょう。

たったこれだけです、楽チンですね。下の行は書いても書かなくても良いんだけど、とりあえずデフォルト値として書いておけば良いんじゃないかな。引数の意味は以下の通り。

第一引数 $width

横幅を指定します。単位はピクセル。初期値は0。

第二引数 $height

高さを指定します。単位はピクセル。初期値は0。

第三引数 $crop

切り抜きかリサイズかを選択します。$width と $height で指定したサイズと縦横比がちがう場合の挙動を選択します。

  • デフォルト(何も入力しない)はリサイズになります。
  • trure で切り抜きを行います。

こんな感じです。
crop_image
crop_image posted by (C)anticyborg

※注意点

  • 縦横比が違う場合にどちらかを行う(サイズが大きいだけであれば表示時にimgタグでリサイズするのみみたいです
  • すでにアップされている画像には切り抜きは適用されません。どうやら画像アップ時に切り出しを行うようです

管理画面でアイキャッチを迎え入れてあげる

次は管理画面の記事投稿ページにアイキャッチの登録箇所を表示する準備です。

管理画面の記事投稿ページ上部にある「表示オプション」をクリックします
admin_01
admin_01 posted by (C)anticyborg

その中にある(はずの)「アイキャッチ画像」にチェックを入れます
admin_02
admin_02 posted by (C)anticyborg

すると多分投稿箇所に「アイキャッチ画像」の項目が追加されていると思います
admin_03
admin_03 posted by (C)anticyborg

簡単ですね、簡単すぎて拍子抜けしてしまいます。

テンプレートタグを追加して表示させてあげる

そして最後の作業は、表示したい箇所にテンプレートタグを記入するだけです。ほんとお手軽!WordPressラクチンネ!シャチョサンラクチンヨ!

single.php とかの画像を表示させたい箇所にこんな感じでコードを書けばOK

4行目にはサムネイルを設定していないページに表示させる画像を指定しています。上記はテーマの中にある画像を使ってるけど別にどこでも良いと思いますよ。

さいごに

僕はもともとサムネイルなんていらないだろ派(そんな派閥があるのかは知りませんが)なんですが、入れてみると良いもんですね。何となく見栄えが良くなるし、アイキャッチと言われるくらいだからちゃんと目を掴んでくれます。いや、掴みはしない、目を引いてくれます。

もしかして「アイ」「キャッチ」だから、「目を」「捕まえる」じゃなくて「目が」「(記事を)捕まえる」って意味なのかな?「目を」だったら順番が逆だよね、「キャッチアイ」になるんだよね、多分。何かどこかのセクシー泥棒三姉妹みたいでそれはそれで良いんじゃないかと思うんだけど。

話それた、アイキャッチを入れると何の事について書いているのかがぱっと分かって良いですねって話をしたかったはず。こういう配慮って大事だよね。

ま、画像が記事を端的に表していて分かりやすいかとか目を引くかとかは僕が作った画像の出来によるんだからあんま期待できないんですけどね。なので画像作るのが面倒になったらすぐやめますよ。無理してやるもんでもないし。思いつきで始めただけだし。

でもちょっとやってみた感じだとそんなに手間もかからないしちょっとクオリティアップに良いかもしんないのでおすすめしますよ。

他にこんな事も書いてます

FBでコメント

5個のコメント

  1. 書いた:巷で噂のアイキャッチ画像をWordPressで表示させてみた – http://t.co/zWLCjE5Q

  2. 丁寧に説明が書かれてます。RT @anticyborg: http://t.co/aX52zE3o 巷で噂のアイキャッチ画像をWordPressで表示させてみた

  3. 巷で噂のアイキャッチ画像をWordPressで表示させてみた: STACKSTOCK http://t.co/j95X4zcH

  4. 巷で噂のアイキャッチ画像をWordPressで表示させてみた: STACKSTOCK http://t.co/DkInavie

  5. @gokugokugokuri より:

    #memo SS | 巷で噂のアイキャッチ画像をWordPressで表示させてみた http://t.co/IeyjhuMh via @anticyborg

トラックバック/ピンバックはありません。