WordPressの「続き読む(more)」をカスタマイズする【the_content編】

WordPressの「続き読む(more)」をカスタマイズする【the_content編】

WordPressのmoreタグ(<!--more-->)を使用した場合の記事表示に「(more…)」や「この投稿の続きを読む」となっている部分のカスタマイズする方法を説明します。

■「続き読む(more)」をカスタマイズ内容

・「続き読む(more)」の文言を変更する
・「続き読む(more)」を画像に変更する
・「続き読む(more)」を別ウィンドウで表示する

「続き読む(more)」の文言を変更する手順

WordPressのmoreタグ(<!--more-->)を使用し場合に記事に表示される「(more…)」（「日本語化されている場合は「続きを読む」）となっている部分の文章を変更方法を説明します。

・『続きを読む』を『もっと読む？』に変更する方法

修正ファイル	記事を呼び出すPHPページ（index.phpやloop.phpなど）
修正前	<?php the_content() ?>
修正後	<?php the_content('もっと読む？') ?>

(more…)となっていたのが「続きを読む」と表示されます。


・『続きを読む』にTitleを含める方法

修正後	<?php the_content( '' . the_title('', '', false) . 'をもっと読む？') ?>

「続き読む(more)」を画像に変更する手順

「the_content」タグには、HTMLタグやHTMLエンティティを書くこともできるため、画像を表示したり、CSSを適用し表示したりすることができます。

修正ファイル	記事を呼び出すPHPページ（index.phpやloop.phpなど）
修正前	<?php the_content() ?>
修正後	<?php the_content('<img src="/img/read-more.png" alt="Read More" title="Read More" width="79" height="30" />'); ?>

「続き読む」(more)を別ウィンドウで表示させる手順

Javascriptのwindow.openを使う。

修正ファイル	/wp-includes/post-template.php
修正前	$output .= apply_filters( 'the_content_more_link', ' <a href="' . get_permalink() . "#more-{$post->ID}\" class=\"more-link\">$more_link_text</a>", $more_link_text );
修正後	$output .= apply_filters( 'the_content_more_link', ' <a href="' . $output_link . "?id={$post->ID}\" class=\"more-link\" onclick=\"window.open('$output_link?id={$post->ID}', '', 'width=735,height=500'); return false;\">$more_link_text</a>", $more_link_text );

WordPressおすすめ書籍

いちばんやさしいWordPressで作る 今日からはじめるウェブサイト 著者：久松 慎一 出版日：2014-04-22 出版社：ソシム

企業サイト/スマホサイト/ECサイトを制作しながら学ぶ 魅せるWordPressサイト 著者：安住 光 出版日：2013-03-22 出版社：ラトルズ