• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

PATE NOTE

ゆるく生きる思考と技術

  • note profile
  • note magazine
  • Contact Us
  • privacy policy

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

2011-05-04 by PATE

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

Filed Under: WordPress, ブログ運営

最初のサイドバー

かれこれ10年以上ネットで稼ぎながらゆるく生きています。Twitterフォロワー1万人越えインフルエンサーの中の人。こうしてゆるーく生きていくための思考と技術をnoteに書いてます。1000円/月だけどランチ1回我慢する程度で社畜の人生とおさらばできると思えば安いもんです。こう見えて意外と人気なんですよ。

note はこちら

人気の投稿

  • iPhoneのGmailアプリに届いた英語のメール本文を超簡単に翻訳する方法
    iPhoneのGmailアプリに届いた英語のメール本文を超簡単に翻訳する方法
  • 「.htaccess」でのファビコン設置方法【チカッパ!レンタルサーバー】
    「.htaccess」でのファビコン設置方法【チカッパ!レンタルサーバー】
  • Discordで運営している、加入条件のあるコミュニティの加入審査をDiscord上でやる方法
    Discordで運営している、加入条件のあるコミュニティの加入審査をDiscord上でやる方法
  • iPhoneで割込通話(キャッチホン)を契約してるだけだと動作してない場合があるよ
    iPhoneで割込通話(キャッチホン)を契約してるだけだと動作してない場合があるよ
  • Discord使ってみたらslackより良い感じ
    Discord使ってみたらslackより良い感じ
  • 真空低温調理器 ANOVA でローストビーフを作ってみた
    真空低温調理器 ANOVA でローストビーフを作ってみた
  • 過去に受信したメールをフォルダに振り分ける方法は?
    過去に受信したメールをフォルダに振り分ける方法は?
  • 知っておくべき集中力と時間帯との関係
    知っておくべき集中力と時間帯との関係
  • Twitterでいいね!やツイートを全消しする方法
    Twitterでいいね!やツイートを全消しする方法

Twitter

ツイート

Instagram

Instagram でフォロー

Footer

Category

Archive

© 2022 PATE NOTE