WordPressの「続きを読む」を画像化+画像入れ替えする方法

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>&rarr;</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です。これで、画像化+画像入れ替えの完成です^^