巷で噂のアイキャッチ画像をWordPressで表示させてみた
2012年01月10日

ひっそりとリデザインしたこのブログ、大したことをやっていないように見えて、これでも何かと色々手を加えています。人知れず咲く花のように、そうアスファルトのヒビに咲いたタンポポのようにひっそりと。
ホントは手を加えた箇所について全てまとめて書こうと思っていたのですが、おそらくもの凄く長い文章になるんだろうなぁと思って個別に書くことにしました。ほら、タイトルとかも「リデザインした」より「〜のプラグイン追加した」とかの方がわかりやすいでしょ?
なのでまずは第一弾として、豪華絢爛なデザインになったこのブログをよりいっそう華やかにしてくれたアイキャッチ画像の追加について説明したいと思います。本当に巷で噂かどうかは知らん。
目次
アイキャッチを使用する事を教えてあげる
まずは今使用しているテーマで「アイキャッチを使いますよ!」って宣言します。宣言するのはもちろんテーマフォルダ内の functions.php です。以下のコードを書きましょう。
たったこれだけです、楽チンですね。下の行は書いても書かなくても良いんだけど、とりあえずデフォルト値として書いておけば良いんじゃないかな。引数の意味は以下の通り。
第一引数 $width
横幅を指定します。単位はピクセル。初期値は0。
第二引数 $height
高さを指定します。単位はピクセル。初期値は0。
第三引数 $crop
切り抜きかリサイズかを選択します。$width と $height で指定したサイズと縦横比がちがう場合の挙動を選択します。
- デフォルト(何も入力しない)はリサイズになります。
- trure で切り抜きを行います。
こんな感じです。
crop_image posted by (C)anticyborg
※注意点
- 縦横比が違う場合にどちらかを行う(サイズが大きいだけであれば表示時にimgタグでリサイズするのみみたいです
- すでにアップされている画像には切り抜きは適用されません。どうやら画像アップ時に切り出しを行うようです
管理画面でアイキャッチを迎え入れてあげる
次は管理画面の記事投稿ページにアイキャッチの登録箇所を表示する準備です。
管理画面の記事投稿ページ上部にある「表示オプション」をクリックします
admin_01 posted by (C)anticyborg
その中にある(はずの)「アイキャッチ画像」にチェックを入れます
admin_02 posted by (C)anticyborg
すると多分投稿箇所に「アイキャッチ画像」の項目が追加されていると思います
admin_03 posted by (C)anticyborg
簡単ですね、簡単すぎて拍子抜けしてしまいます。
テンプレートタグを追加して表示させてあげる
そして最後の作業は、表示したい箇所にテンプレートタグを記入するだけです。ほんとお手軽!WordPressラクチンネ!シャチョサンラクチンヨ!
single.php とかの画像を表示させたい箇所にこんな感じでコードを書けばOK
4行目にはサムネイルを設定していないページに表示させる画像を指定しています。上記はテーマの中にある画像を使ってるけど別にどこでも良いと思いますよ。
さいごに
僕はもともとサムネイルなんていらないだろ派(そんな派閥があるのかは知りませんが)なんですが、入れてみると良いもんですね。何となく見栄えが良くなるし、アイキャッチと言われるくらいだからちゃんと目を掴んでくれます。いや、掴みはしない、目を引いてくれます。
もしかして「アイ」「キャッチ」だから、「目を」「捕まえる」じゃなくて「目が」「(記事を)捕まえる」って意味なのかな?「目を」だったら順番が逆だよね、「キャッチアイ」になるんだよね、多分。何かどこかのセクシー泥棒三姉妹みたいでそれはそれで良いんじゃないかと思うんだけど。
話それた、アイキャッチを入れると何の事について書いているのかがぱっと分かって良いですねって話をしたかったはず。こういう配慮って大事だよね。
ま、画像が記事を端的に表していて分かりやすいかとか目を引くかとかは僕が作った画像の出来によるんだからあんま期待できないんですけどね。なので画像作るのが面倒になったらすぐやめますよ。無理してやるもんでもないし。思いつきで始めただけだし。
でもちょっとやってみた感じだとそんなに手間もかからないしちょっとクオリティアップに良いかもしんないのでおすすめしますよ。
他にこんな事も書いてます
- WordPressの条件分岐をもちょっと便利にする関数作ったよ
- ゆるふわ勉強会第6回 「WordPress で企業サイトを作る Vol2 【構築編】作ったサイトを オリジナルテーマ化する」を開催しました
- ゆるふわ勉強会第5回 「WordPress で企業サイトを作る Vol1 【初期編】WordPressを知ろう!」を開催しました
- マルチサイト運用中のWordPressサイトをサーバ、ドメインを移行する際の手順
- 軽い!キレイ! Gist で WordPress のコードに色をつける!
- WordPressのショートコードはプラグインにした方が良いケースがあるから作った。ので作り方書くよ
- 1分でできる!WordPress でショートコードを作るよっ(/’□’)/
- WordPress で個別記事ページにのみ記事本文に何か追加したいときの対応方法
- WordCrab 2012 やってきたよ
- html5でWordPressブログを作る勉強会やってきた
FBでコメント
5個のコメント
書いた:巷で噂のアイキャッチ画像をWordPressで表示させてみた – http://t.co/zWLCjE5Q
丁寧に説明が書かれてます。RT @anticyborg: http://t.co/aX52zE3o 巷で噂のアイキャッチ画像をWordPressで表示させてみた
巷で噂のアイキャッチ画像をWordPressで表示させてみた: STACKSTOCK http://t.co/j95X4zcH
巷で噂のアイキャッチ画像をWordPressで表示させてみた: STACKSTOCK http://t.co/DkInavie
#memo SS | 巷で噂のアイキャッチ画像をWordPressで表示させてみた http://t.co/IeyjhuMh via @anticyborg
トラックバック/ピンバックはありません。