[WordPress] 「続きを読む」をカスタマイズする方法

LINEで送る
Pocket

この記事の所要時間: 約 4分34秒

さて、WordPressの設定を進めている中で、

海外のテンプレートなどを利用すると「続きを読む」ボタンリンクが

「read more」になっていたりします。

 

read more

「read more」では、パッと見てピンとこないので、

やっぱり、日本語の「続きを読む」にしたほうが良いですね。

 

こんな感じ

 

続きを読む

 

設定方法はいたって簡単

 

まず、管理画面にログインし「テーマ編集」「メインインデックスのテンプレート」を選択。

 

テーマ編集

 

メインインデックスのテンプレート

 

ソースが表示されています。ここから「read more」という文字列を探します。

ブラウザの「検索」(ctrl+F)などで検索しましょう。

 

read moreの検索

 

この文字列を「続きを読む」に変更。

 

続きを読むに文字列変更

 

更新したら完了。

これで、文字列の変更はできました。

しかし、このような「続きを読む」が出てくるページは、いろいろなインデックスページで表示されます。

 

私のテンプレートの場合は、「カテゴリーテンプレート」でも出てくるので同じように変更しました。

 

カテゴリーテンプレート

 

次に 、

 

続きへジャンプするか、ページの先頭へ移動するかの設定

 

ほとんどの場合、「続きを読む」をクリックするとmoreタグが入っている個所にリンク移動します。

なんだかこれもスッキリしないので、やはり記事トップに飛ばした方がいいでしょう。

これも設定は簡単。以下のタグを、「テーマのための関数(function.php)」のPHPの綴じタグの前に記述します。

 

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' );

?> ← PHPの閉じタグ

 

※function.phpを変更する際は、必ずソースのバックアップを取ってから行いましょう。

もし、何らかの記述ミスがあった場合、エラーで管理画面にもログインできない状況になる可能性があります。もし、そうなった場合は、バックアップファイルのfunction.phpファイルをFTPで再アップロードしてください。戻るはず。

 

これでOKなのですが、このようにソースに変更を加えた場合は後でも内容がわかるようにした方がいいです。

コメントタグをいれておきましょう。

PHP内の記述するコメントタグは

 

/* コメントタグの文字列  */

 

書くならこんな感じです。

 

/* 続きを読む トップへ移動 */
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' );
/* 続きを読む トップへ移動 END */

 

 

「続きを読む」を画像リンクにしたい場合

 

テキストリンクではなく、もう少し凝った画像にしたい場合は、
ソースを下記に書き換えればOK

私の場合は、「続きを読む」に設定されているphpの一文を

 

<?php the_content(''.__('続きを読む
<span class="meta-nav">&raquo;</span>', 'codium_extend').''); ?>
↓
<?php the_content('<img src="' . get_bloginfo('template_directory').
'/images/img_more.gif" alt="'. the_title('', '', false). '"
title="'. the_title('', '', false). '" />'); ?>

 

 

画像は予めテーマの直下にある「images」に入れておきましょう。
ここではファイル名は「img_more.gif」としています。

画像で表示させる方法はこちらのサイトを参考にさせていただきました。

できたのはこんな感じです。

 

続きを読む、画像リンク

 

わりと簡単でした。

 

LINEで送る
Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です