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

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

目次 1 抜粋とは 2 「続きを読む」テクニック 2.1 続きへジャンプするか、ページの先頭へ移動するか 3 More タグをデザインする 3.1 投稿毎にテキストをカスタマイズする 3.2 画像の追加 3.3 ページで「続きを読む」を使用する方法

抜粋とは

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

the_content() はそのままにしておき、投稿の区切りに more クイックタグを挿入する方法がよく用いられています。

クイックタグは、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 がある地点までが表示されます。

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

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

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

$more_link_text は、"Read More" のようなテキストを設定します。2 番目の $strip_teaser は、"more" リンクを隠す (TRUE) か表示する (FALSE) かを設定します。 デフォルト値は FALSE で、リンクが表示されます。最後の $more_file は "Read More" がリンクするファイルを変更したい場合に設定します。デフォルトでは、現在の投稿にリンクします。

リンクを取り除くには、

• index.php の the_content(); を下のように変更する。 (第二引数が制御している)

the_content('',FALSE,'');

• 投稿テキストの <!--more--> の直後に <!--noteaser--> を書き込む。

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

デフォルトでは、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))

More タグをデザインする

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

投稿全文を読むためのリンクを生成するthe_content() タグには、<!--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 クラスを設定することで、好きなスタイルにできます。次の例では、太字で、イタリック体で、通常のテキストより少し小さく、スモールキャピタルを指定する font-variant: small-caps を使用しています。

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

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

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

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

<?php the_content("...continue reading the story
called " . get_the_title('', '', false)); ?>

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

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

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

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

画像の追加

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

"Read More" テキストに「葉」の画像を表示する例です。

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

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

上述したとおり、画像と 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 to the content

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

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

最新英語版： WordPress Codex » Customizing_the_Read_More （最新版との差分）