※ソースコードの訂正です。
———————————————————————-
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です。
>ひじりさん
ご回答ありがとうございます。
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/
>ひじりさん
text-indentを知りませんでした(汗
しかし、どうしても表示されてしまうか
画像(背景)が上手く表示されなかったので
文字色をページの背景と同じにして誤魔化しました。
今後の勉強と課題になりそうですが
目的のものをつくることができました。
ご協力ありがとうございました。
教えていただいたページも今後参考にさせていただきます!