当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムWordSlack #docs チャンネルでお知らせください。</p>

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

提供: WordPress Codex 日本語版
2016年5月29日 (日) 11:51時点におけるAkira Tachibana (トーク | 投稿記録)による版 (最新英語版を反映 en:Customizing_the_Read_More 11:47, 29 May 2016‎ Atachibana版)

移動先: 案内検索

WordPress をセットアップすると、ホームページには投稿の抜粋が表示されます。訪問者にタイトルやリンクしてもらい、投稿の続きを読んでもらいたいと思いますよね? WordPress ではこれが簡単にできますし、カスタマイズもできます。

抜粋とは

WordPress では、抜粋を表示する二通りの方法があります。

  • The first, keeping the the_content() template tag and inserting a quicktag called more at your desired "cut-off" point when editing the post. the_content() はそのままにしておき、投稿の区切りに more クイックタグを挿入する方法がよく用いられています。
  • The second, by replacing the the_content() template tag with the_excerpt(). 一つ目は、the_content()the_excerpt() に置き換える方法です。

In both cases, if you have set anything in the Excerpt meta box on the post editor screen, that text will be used. Otherwise, the excerpt will be automatically trimmed.

The most commonly used method is the first one, because the user editing the post can choose between showing the whole content or just the excerpt, individually for each post. However, using the_excerpt() in your template file can also get a teaser from the first 55 words of the post content, without the need to place a more quicktag in the post.

To add a more quicktag in your post, put your cursor where you want to end the excerpted content of your post and click the more quicktag button. quicktags are the little buttons found above the editing window in your Administration > Write > Post SubPanel. They include bold, italic, links, and others, and the famous more.

posteditor more button text.jpg

Administration > Write > Post サブパネルで入力した抜粋が表示されます。あるいは、投稿の最初の 55 文字(訳注:日本語の場合はWP Multibyte Patchを参照 --Mizuno 2009年11月2日 (月) 23:01 (UTC))が表示されます。訪問者は、タイトルをクリックして読み進むことができます。

クイックタグは、Administration > Write > Post サブパネルで編集ウィンドウの上部にある小さなボタンです。太字、イタリック、リンク等、そして有名な more があります。投稿で、抜粋にしたい部分の最後にカーソルを置き、more クイックタグを押してください。

下のように、カーソルの場所にコードを挿入します。

and I told him that he should get moving or I'd be
on him like a limpet.  He looked at me with shock on 
his face and said

<!--more-->

投稿が続きますが、non-single/non-permalink ページ、例えばアーカイブ、カテゴリー、トップページ、検索結果等では、more がある地点までが表示されます。

Users can then continue reading more as you have enticed them with your summary introduction, by clicking on a link to the full article. Themes usually include this link in the title and the above methods will generate it by default trailing your teaser, as the example below.

and I told him that he should get moving or I'd be on him like a limpet. He looked at me with shock on his face and said more...

「続きを読む」テクニック

the_content() には、以下のパラメータがあります。

<?php the_content( $more_link_text , $strip_teaser ); ?>

$more_link_text は、"Read More" のようなテキストを設定します。The second one, $strip_teaser, sets whether or not the teaser part or excerpt part before the more text should be stripped (TRUE) or included (FALSE). The default is FALSE, which shows the teaser part. 2 番目の $strip_teaser は、"more" リンクを隠す (TRUE) か表示する (FALSE) かを設定します。 デフォルト値は FALSE で、リンクが表示されます。

リンクを取り除くには、

  • index.phpthe_content(); を下のように変更する。 (第二引数が制御している)
the_content( '', TRUE );
  • 投稿テキストの <!--more--> の直後に <!--noteaser--> を書き込む。

Prevent Page Scroll When Clicking the More Link

By default, clicking the .more-link anchor opens the web document and scrolls the page to section of the document containing the named anchor (#more-000). This section is where writers choose to place the <!--more--> tag within a post type.

Users can prevent the scroll by filtering the content more link with a simple regular expression.

function remove_more_link_scroll( $link ) {
	$link = preg_replace( '|#more-[0-9]+|', '', $link );
	return $link;
}
add_filter( 'the_content_more_link', 'remove_more_link_scroll' );

Simply add the above code to the theme's functions.php file and the named anchors are no more.


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

デフォルトでは、Read More リンクをクリックすると、ページが読み込まれ、投稿の <--more--> タグが設定された場所へジャンプします。ジャンプさせたくない場合は、テーマの functions.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');

バージョン 2.7.1 以前では、wp-includes/post-template.php の以下の行を編集することで、デフォルトから変更することができます。 (注意: WP 2.1 以前では、このコードは wp-includes/template-functions-post.php にあります)

(注意: WordPress をアップグレードすると、このファイルは上書きされます。アップグレード後にもう一度変更するメモをしておきましょう。)


$output .= ' <a href="'. get_permalink() ."#more-$id\">$more_link_text</a>";

to

$output .= ' <a href="'. get_permalink() ."\">$more_link_text</a>";

or

$output .= ' <a href="'. get_permalink() .'">$more_link_text</a>';

(訳注: コアカスタマイズなので非推奨です。また英語版 Codex では削除されています。--Mizuno 2009年11月12日 (木) 22:12 (UTC))


Modify The Read More Link Text

Adding this code to your functions file enables you to customize the read more link text.

add_filter( 'the_content_more_link', 'modify_read_more_link' );
function modify_read_more_link() {
return '<a class="more-link" href="' . get_permalink() . '">Your Read More Link Text</a>';
}

Code reference: https://developer.wordpress.org/reference/hooks/the_content_more_link/

Displaying a "more…" link when using the the_excerpt()

Sometimes you can't afford adding a more quicktag to all your posts, so the only way to show an excerpt is modifying the template, changing the_content() to the_excerpt() but that will just show "[...]" at the end, not a "more…" link to the full post.

To show a "more" link, add the following code to your functions.php file.

// Replaces the excerpt "more" text by a link
function new_excerpt_more($more) {
       global $post;
	return '<a class="moretag" href="'. get_permalink($post->ID) . '"> Read the full article...</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

If you are using a Child Theme, the above code will not work without modification if the parent theme has its own filters setting its own "more" link. You will need to use the remove_filter() function to remove the parent's filters for yours to work. The problem is your functions.php file is loaded before the parent's functions.php, so at the time of your file's execution, there is no filter to remove yet, and your remove_filter() code will fail without warning.

The key is to put your remove_filter() code in a function that executes from an action hook that triggers after the parent theme is loaded. The following code is an example of the additional code needed to get the above code to work from a child theme of the parent theme twentyeleven. You will need to examine your actual parent theme's code for the correct parameters in the remove_filter() code, they must exactly match the add_filter() parameters used by the parent.

function child_theme_setup() {
	// override parent theme's 'more' text for excerpts
	remove_filter( 'excerpt_more', 'twentyeleven_auto_excerpt_more' ); 
	remove_filter( 'get_the_excerpt', 'twentyeleven_custom_excerpt_more' );
}
add_action( 'after_setup_theme', 'child_theme_setup' );


Customizing the "more…" text

More タグをデザインする

続きを読むの仕組みを説明したので、ここでは、投稿を続けて読んでもらいやすくする方法を紹介します。

By design, the the_content() template tag includes a parameter for setting the text to be displayed in the the "more…" link which allows you to continue reading. 投稿全文を読むためのリンクを生成するthe_content() タグには、<!--more--> の中身と見栄えを決めるパラメータがあります。

デフォルトでは、以下のようになっています。

and I told him that he should get moving or I'd be on him like a limpet. He looked at me with shock on his face and said more...

more... を別の語句に置き換えたい場合、タグに新しい語句を書くだけです。

<?php the_content('Read on...'); ?>

あるいは、もっと洗練された方法で興味を引くこともできます。

<?php the_content('...on the edge of your seat? Click
here to solve the mystery.'); ?>

テキストのスタイルを設定することもできます。

<?php the_content('<span class="moretext">...on the edge of
your seat? Click here to solve the mystery.</span>'); ?>

style.css スタイルシートの moretext クラスを設定することで、好きなスタイルにできます。次の例では、太字で、イタリック体で、通常のテキストより少し小さく使用しています。

and I told him that he should get moving or I'd be on him like a limpet. He looked at me with shock on his face and said ...On the Edge of Your Seat? Click Here to Solve the Mystery.

テキストではなく、拡張文字や HTML 文字実体 を使用したい人もいるでしょう。

<?php the_content('&raquo; &raquo; &raquo; &raquo;'); ?>

は、以下のように表示します。

and I told him that he should get moving or I'd be on him like a limpet. He looked at me with shock on his face and said » » » »

the_content() テンプレートタグには、more テキストに投稿タイトルを含むことができます。the_title() タグを利用して、投稿タイトルを含めることができます。

<?php the_content("...continue reading the story
called " . the_title('', '', false)); ?>
and I told him that he should get moving or I'd be on him like a limpet. He looked at me with shock on his face and said ...continue reading the story called A Tale That Must Be Told

投稿毎にテキストをカスタマイズする

the_content() は通常、上で説明したようにテンプレートで呼び出され、決まったテキストを表示しますが、特定の投稿で個別のテキストを表示することもできます。テキストエディタで、<!--more Your custom text --> と書けば Ok です。

例えば、次のようにします。

<!--more But wait, there's more! -->

画像の追加

CSS のデザイン能力は無限です。WordPress では、テンプレートタグ の多くで画像を使用することができます。more タグでも利用可能です。画像を追加するには、二通りの方法があります。単純な方法は、the_content() テンプレートタグに書くことです。

"Read More" テキストに「葉」の画像を表示する例です。and assumes that the image file is within your theme's images folder.

<?php the_content('Read more...<img src="' . get_bloginfo('template_directory'). '/images/leaf.gif" alt="read more" title="Read more..." />'); ?>

画像タグで ALTTITLE を使用していることに注意してください。アクセシビリティ、Web 標準に準拠するためです。画像はリンクでもあるからです。このコードは以下のような表示になります。

and I told him that he should get moving or I'd be on him like a limpet. He looked at me with shock on his face and said Read More...   leaf

上述したとおり、画像と more タグにスタイルを付加することもできます。"Read More" テキスト無しで画像を用いる場合は、テキストを削除してください。

二つめは、CSS 背景画像を使用します。上の例では、スタイルクラスを使う方法を説明しました。今回は込み入ったやり方です。コンテナのスタイルで、テキスト背景に画像表示するのを許可しておく必要があります。上の例を背景画像にするには、style.css スタイルシートを以下のようにします。

.moretext {
   width: 100px; 
   height: 45px; 
   background:url(/images/leaf.gif) no-repeat right middle;
   padding: 10px 50px 15px 5px}

右マージンに対する 50px padding は、テキストが画像と重ならないようにするためです。高さは、コンテナを拡張して画像が見えるようにするためです。背景画像はその場所にあるのではなく、コンテナの境界を広げないからです。画像の大きさと形に合うようにするため、試してみる必要があるでしょう。

ここまで、基本を説明しました。ここからは、あなたの想像力次第です。

ページで「続きを読む」を使用する方法

"続きを読む" タグは、最近の投稿を表示するホームページでのみ使用します。ページ では動作しません。ページ でも動作するようにするには、ループ内に以下のコードを記述してください。

<?php
global $more;
$more = 0;
?>
//The code must be inserted ahead of the call the_content, but AFTER the_post()

<?php the_content('Continue Reading'); ?>

When to set $more

It's important that if you're going to over-ride the default $more global variable you do it inside The Loop, but after your setup the post. If you're working with the standard Loop and using the_post(), make sure you set $more after the_post (but before the_content().

詳しくは More tag ignored on static front page を参照してください。

More about $more

If you set the $more variable to -1, the More tag will not be displayed. This can be useful in a "mullet loop". Like this:

<?php global $more; $more = -1; //declare and set $more before The Loop ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); //begin The Loop ?>
<?php 
    if ($more == -1) { //do not use the more tag on the first one.
        the_content();
        $more = 0; //prevent this from happening again. use the more tag from now on.
    }
    else { //use the more tag
        the_content(__('Read more...'));
    }
?>
<?php endwhile; //end of The Loop ?>

最新英語版: WordPress Codex » Customizing_the_Read_More最新版との差分