テーマの調整中にアイキャッチ画像を追加しようとしたら、思った以上に手間がかかり、やっとテーマの修正が終わりました。
Twentytenのアイキャッチ画像のカスタマイズは大変
このサイトはTwentytenをベースに少しカスタマイズしたものを使っています。先週までに大雑把な修正を終えて適用させてみましたが、一部要素間のマージンを微調整したほうが良さそうだったのでチョコチョコ直していました。
マージンの調整はすぐ終わったのですが、ふとアイキャッチ画像を使ってみたくなり、テスト環境のWordpressで適当な画像をアイキャッチ画像にとして登録してみました。でも、なんの変化も見られない。
実はTwentytenのアイキャッチ画像はヘッダー画像と入れ替わるため、大きめな画像でないと何の変化も現れないのです。それを知らなかったので、記事の冒頭あたり画像が表示されるはず、との思い込みとカスタマイズが悪影響を与えたのではという不安から闇雲にテンプレートファイルを調べていました。で、ヘッダーのところにアイキャッチ画像の表示するコードを見つけてがっくり。なんでこんな所に表示するんでしょう。
気をとり直してアイキャッチ画像らしくするためにオリジナルの表示はざっくり削除し、代わりに一覧表示テンプレートの記事冒頭に小さい画像を表示させる事にしました。その際、画像はタイトルの下に左側へ寄せて表示させ、その右側に記事の先頭部分が回り込ませます。
回り込み解除に苦労する
一覧表示と同様にシングル記事表示でもアイキャッチ画像を表示させたかったのでシングル記事用のテンプレートにもタグを入れました。
ところがテストしてみると、続き以降の文章もそのまま回り込んでしまいます。これはh3等のタイトルが来ると解除されますが、ブロッククォート等が来るとひどい表示なってしまうためなんとかしておきたいところです。
対処法として続きの前の文章が終わったら、フロート解除するようにしたかったのですが、そもそも続きの前半部と後半部は識別しづらい構造になっています。そのため、記事の出力方法を色々試したり、前半後半別々に出力してみたりとトライアンドエラーを繰り返しましたがどれもすっきりせず、最終的には前半と後半の間に挟まっているspan要素にクラスを追加する荒業に落ち着きました。このspanはシングル記事のページで自動的に出力され、idも付けられているのですが、記事IDと組み合わせてこんな感じになっています。
<span id=”more-693″></span>
数字部分は記事IDなのでページごとに変わってしまい、CSSに指定できないのです。最終的にはこれをフィルターフック’the_content’を使ってこんな風に書き換えるようにしました。
<span class=”clearfix” id=”more-693″></span>
class=”clearfix”が追加された属性です。後はこのクラス名でフロートをクリアすればOKです。
参考
今更Twentytenにアイキャッチ画像なんて遅過ぎですが、参考までにコードの一部を掲載しておきます。この方法は記事の前半と後半の間に広告を入れたい人も応用できます。というか、このフックはその手の記事で見つけました。
なお、フィルターでは速度重視でstr_replaceを使っていますが、スペースの数が変わったら…とか判定が甘い、などと気になる人は正規表現で検索する関数に変更した方が良いかもしれません。
functions.php
1 2 3 4 5 6 7 8 | function add_clearfix( $content ) { if (is_single()) { $content = str_replace('<span id="more-', '<span class="clearfix" id="more-',$content); } return $content; } add_filter( 'the_content', 'add_clearfix' ); |
CSSはこんな風にしています。entry-postimageはアイキャッチ画像に付けているクラスです。clearfixは上記フィルタで自動的に追加されます。
style.css
1 2 3 4 5 6 7 8 | /* --- post image --- */ .entry-postimage { float: left; margin: 12px 1em 1em 0; } .clearfix { clear: both; } |
テンプレートファイルにこんな感じのコードを追加すると、そこにアイキャッチ画像が表示されます。ただし、ループ内でのみ表示できます。
1 2 3 4 5 | <?php if(has_post_thumbnail()) { ?> <div class="entry-postimage"> <?php the_post_thumbnail(); ?> </div><!-- .entry-postimage --> <?php } ?> |