WordPressで記事を書いているときに、<!!–more–>を記事本文の途中に入れると、TOPページ等ではそれより前の部分だけが表示され、「続きを読む」のリンクが表示されます。
Twenty Tenは、このリンク部分が普通のテキストになっていて、これをどうにかして画像に変える方法はないかと思って調べたら、丁寧にやり方を載せてくれているサイトがあったので、それを参考にやってみました。
やりかた
参考にした記事はLovelog+*さんの 続きを読むを画像で出力する方法 です。（Lovelog+さんに感謝ですm(__)m）
Lovelog+さんの説明によると、通常だとindex.phpに変更する場所があるそうですが、私が使っているTwenty Tenは、roop.phpの中にありました。この辺は、同じテーマでもバージョンによって違うかもしれないので探してください＾＾
変更する箇所としては、Twenty Tenではこのように書かれています。
[php]<?php the_content( __( ‘Continue reading <span>→</span>’, ‘twentyten’ ) ); ?>[/php]
この部分が、「続きを読む」のリンク部分にあたるので、ここに画像リンクを貼ればOKです＾＾
そしてLovelog+さんの説明を見ながら、最終的にわたしがこのブログに貼ったのはこれです。
[php]<?php the_content(‘<img src="/images/img_more_off.jpg" alt="’. the_title(”, ”, false). ‘" title="’. the_title(”, ”, false). ‘" />’); ?>[/php]
Lovelog+さん方式でいくと、altやtitleが自動で入り、使っているテーマのimagesフォルダ内の画像を表示させるようになっていて、とても便利です。
altやtitleが自動で入るところは、そのまま使わせていただいたのですが、私の場合、画像に関してはルートにimagesフォルダを作って管理しているので、そっちのほうの画像が表示されるように修正しました^^;
これで画像化は完了ですが、画像の入れ替えもしたかったので、私の書いた記事 jQueryでタイトル画像をふわっとフェード切り替え の方法を使って画像入れ替えもできるようにしました。
やり方としては、「続きを読む」の所には、最初から class=”more-link” がついているので（ここの変更の方法はわかりません^^;）このmore-linkの画像部分に対して画像入れ替えを指定してやればOKです。
追加するとこのようになりました。
[javascript]$(‘#site-title img,.more-link img’).hover([/javascript]
これで上に重なる画像がマウスを乗せるとフェードアウトされるようになります。
あとは、画像が入れ替わった後用の画像を、CSSでmore-linkの背景画像に指定してやればOKです。これで、画像化+画像入れ替えの完成です＾＾