Webデザイン

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

投稿日:2011年5月4日 更新日:

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

-Webデザイン
-

執筆者:

関連記事

WordPressでパーマリンクを変更した時にやった手順まとめ

ブログをいじるのが趣味の、あんちゃん(@anchan_jp)です。 このブログのパーマリンクを変更しました。 パーマリンクの変更って、いろいろ気をつけないとGoogle先生から消えちゃったりするみたい …

no image

「target="_blank"(ターゲットブランク)」で別ウインドウ表示させる

別サイトに飛ぶリンクには「target=”_blank”(ターゲットブランク)」をつけましょうねー(*´∀`*)という話があります。 これは以前、アフィリエイターの中では常識と …

Twenty Tenのサイドバーの幅を変更する方法

以前「WordPressのテーマ変えました」という記事でArrasテーマに変えたと紹介して、しばらくはこれにしようみたいな感じで書いたんですけど、結局またテーマをTwenty Tenに戻しました。 ま …

no image

「.htaccess」でのファビコン設置方法【チカッパ!レンタルサーバー】

ファビコンを設置してみました。 ファビコンって何?って思うかもしれませんが、企業のホームページとか開いた時にアドレスの横、ブックマークしたときにはブックマークの横につ いていたりする小さい企業のロゴと …

no image

WordPressのヘッダーに書いてあるフィードURLを変更する方法

WordPress弄りまくってる、あんちゃん(@anchan_jp)です。 だいぶぐちゃぐちゃになってきました。 ちょっと前に、フィードをFeedBurnerに任せようかなーって思って作ってみたんです …