wordpress「続きを読む」のカスタマイズ色々

いまリニューアル中の案件で、「続きを読む」という表示をカスタマイズする必要があったのでその覚え書き。

WordPressでは投稿記事中にmoreタグを挿入すると、「続きを読む･･･」というリンクが追加されますがこれがイマイチ。以下、イマイチと感じた点をリストアップ

1. デフォルトの文章がイマイチ
2. リンクをクリックすると投稿の記事中のmoreタグが挿入された場所にジャンプする（記事のトップから表示してほしい）
3. 続きを読むをクリックして表示した投稿の記事のURLにおまけ（#more-xxx）がつく（単純に気持ち悪い）
4. リンクのクラスがdivやpではなくaにつくのでカスタマイズしにくい。

これの解決法を色々としらべました。

1.デフォルトの文章の変更

これはとっても簡単。WordPress Codexを見たらあっさり書いてありました。

ループ内のthe_content()に引数を指定するだけです。こんな感じ

[html]<?php the_content(‘続きを読むぞ！’); ?>[/html]

2.リンクの飛び先

こちらも簡単。WordPress Codexに書いてあります。下記のコードをfunction.phpにコピペすればOKです。

[html]<?php
function remove_more_jump_link($link) {
$offset = strpos($link, ‘#more-‘);
if ($offset) {
$end = strpos($link, ‘"’,$offset);
}
if ($end) {
$link = substr_replace($link, ”, $offset, $end-$offset);
}
return $link;
}
add_filter(‘the_content_more_link’, ‘remove_more_jump_link’);
?>
[/html]

more-linkのURLの変更

これは下記のサイトを参考にさせてもらいました。

http://dogmap.jp/2009/11/10/custom-more-link/

下記のコードをfunctions.phpに書けばOK。フィルターのフックを使っています。

[html]
<?php // #more-$id を削除する。
function custom_content_more_link( $output ) {
$output = preg_replace(‘/#more-[d]+/i’, ”, $output );
return $output;
}
add_filter( ‘the_content_more_link’, ‘custom_content_more_link’ );
?>
[/html]

リンクのクラスの変更

これが、よい方法が見つかりませんでした。

下記のサイトで紹介されている方法を使うと確かにタグを自由に選べるようになります。

http://kudox.jp/wordpress/more-link-customize

しかし、コアファイルを修正するのでWordPressがアップデートされると上書きされてしまう可能性が高いです。

この解決策を考えるガッツとスキルがなかったので、今回の案件はスタイルで何とかすることにしました。

やりたい事は概要の下に右寄せで「続きを読む」ボタンを表示。

右寄せはブロック要素にしてフロート使えばいいけどそのままだとクリアできない。

ただ、幸いにも「続きを読む」は必ずthe_contentの最後に入るのでその下の要素にclear:bothを設定すれば無事右寄せでカラム落ち押せず表示されました。

これで一件落着。