サポート » 使い方全般 » the_excerpt()で「続きを読む」を画像にしたい!

  • 解決済 matsugeinu

    (@matsugeinu)


    the_excerpt()で抜粋記事とアイキャッチ画像を表示しています。

    「続きを読む」のリンクを作成した画像にしたいのですが
    function.phpをいじっていても変わりません。
    (リンクは表示されますが、画像が正しく表示されません。)

    以下のように記述しています。(function.php)
    ————————————————–

    function new_excerpt_more($more) {
        global $post;
        return '……( <a href="' . get_permalink() . '">' . __('<img src="images/readmore.png"/>') . '</a> )';
    }
    add_filter('excerpt_more', 'new_excerpt_more');

    ————————————————–

    画像を正しく表示するにいはどうしたらいいでしょうか?

    また、ホバー時とそうでない時で
    画像を入れ替え、少し位置をずらいたいので
    可能であればその方法もお願いします。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック投稿者 matsugeinu

    (@matsugeinu)

    ※ソースコードの訂正です。
    ———————————————————————-

    function new_excerpt_more($more) {
        global $post;
        return '……<br>( <a href="' . get_permalink() . '">' . __('<img src="images/readmore.png"/>') . '</a> )';
    }
    add_filter('excerpt_more', 'new_excerpt_more');

    ———————————————————————-
    それではご回答をお待ちしております。

    画像はテンプレートディレクトリの images ディレクトリに入れてありますか?
    そうなると、パスは src=”[テンプレートディレクトリ]/images/readmore.png” になりますよね。
    つまり、 get_permalink() ではなく get_bloginfo( ‘template_directory’ ) を使えばいいと思いますよ。

    > ホバー時とそうでない時で

    「CSS ホバー」で調べただけですが、WordPress というよりは CSS での実装だと思うので、
    こういうことでしょうか?
    http://www.kanaya440.com/contents/tips/html/007.html

    この場合、imgタグは使用せずに、aタグにクラスを指定してスタイルシートで制御してあげればOKです。

    トピック投稿者 matsugeinu

    (@matsugeinu)

    >ひじりさん
    ご回答ありがとうございます。
    WPやPHP初心者なもので少々手こずりましたが
    以下のようにreturnを変更したら画像リンクが表示されました。
    ———————————————————————-

    return '……<br><a href="' . get_permalink() . '" class="readmore"><img src="' .get_bloginfo('template_directory'). '/images/readmore.png' . '" /></a>';

    ———————————————————————-

    CSSによるロールオーバーに関してですが
    調べてもロールオーバーはbackgroundを切り替える方法が多くみられます。
    しかし、上記のコードで表示した画像はbackgroundではないのでどうしたらいいのかわかりません。

    以下のコードをCSSに追記したらリンク領域が拡大された上
    ロールオーバーする画像(位置が大きくずれている)と
    ロールオーバーしない画像(元の位置)の2つが表示されました。
    ———————————————————————-

    .readmore {
    	display: block;
    	background: url(images/readmore.png) no-repeat;
    }
    .readmore:hover {
    	display: block;
    	background: url(images/readmore_hover.png) no-repeat;
    }

    ———————————————————————-
    PHPの<img>を消してCSSでbackground画像指定のみにしたら何も表示されなくなりました。

    画像リンクの数・領域・位置・ロールオーバーの異変の改善はできないでしょうか?
    他のやり方や何か根本的な部分の間違いがあればご指摘願います。

    長文になりましたが
    よろしくお願いします。

    あー、ちょっと変なソースでしたね。すみません。
    実際に動かしてみたら、こうなりました。

    function.php

    function new_excerpt_more($more) {
    	return ' <a href="'. esc_url( get_permalink() ) . '" class="readmore" title="続きを読む">続きを読む</a>';
    }
    add_filter('excerpt_more', 'new_excerpt_more');

    style.css

    .readmore {
    	display:block; background:url(./images/readmore.png) no-repeat right 0; height:16px; width:16px; overflow:hidden; text-indent:50px;
    }
    .readmore:active, .readmore:hover {
    	background-position:0 0;
    }

    うちで使ってるテーマは、中で色々やってるので、挙動が少し違うのですが、
    サンプルとして確認できますので参考までにどうぞ。
    http://mekemoke.jp/

    トピック投稿者 matsugeinu

    (@matsugeinu)

    >ひじりさん
    text-indentを知りませんでした(汗

    しかし、どうしても表示されてしまうか
    画像(背景)が上手く表示されなかったので
    文字色をページの背景と同じにして誤魔化しました。

    今後の勉強と課題になりそうですが
    目的のものをつくることができました。

    ご協力ありがとうございました。
    教えていただいたページも今後参考にさせていただきます!

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「the_excerpt()で「続きを読む」を画像にしたい!」には新たに返信することはできません。