• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

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

提供: WordPress Codex 日本語版
移動先: 案内検索

WordPress サイトのトップページに投稿の抜粋を表示して訪問者の興味を引き、タイトルやリンクのクリックで、続けて投稿や記事の全文へガイドするテクニックがあります。WordPress では簡単にこのテクニックをカスタマイズ可能な方法で実現できます。

抜粋とは

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

  • 最初の方法は the_content() テンプレートタグがある状態で、投稿の編集の際、区切り位置に more クイックタグを挿入する方法です。

どちらの方法も、投稿の編集画面の「抜粋」ボックスに入力されたテキストが抜粋として使用されます。何も入力されていない場合は自動的に文章が切り取られます。

一般に使用される方法は最初の方法です。これは投稿の編集者が、コンテンツ全文を表示するのか、あるいは抜粋を表示するのかを個々の投稿ごとに選択できるためです。しかしテンプレートファイルで the_excerpt() を使用すれば、毎回、投稿に more クイックタグを挿入しなくても、投稿の文章の最初の 55 単語を切り取った抜粋が自動で作成されます。

注意: WordPress 日本語版の WP Multibyte Patch が有効化された環境では、デフォルトで最初の110文字が切り取られます。

投稿に more クイックタグを追加するには、抜粋としたい部分の最後にカーソルを置き more クイックタグボタンをクリックしてください。 クイックタグは、管理画面 > 投稿 > 新規追加 で表示される編集画面の上部にある小さなボタンです。太字、イタリック、リンク等に続いて、我らが more があります。

posteditor more button text.jpg

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 のある地点までが表示されます。

抜粋に興味を持ったユーザーは記事全文へのリンクをクリックして続きを読むことができます。上の方法によりデフォルトでは抜粋に続けてリンクが生成されます。以下に例を挙げます。

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() には、次のパラメータがあります。

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

$more_link_text には、「続きを読む」のような語句を設定します。2番目の $strip_teaser は、「続きを読む」の前の抜粋部分のテキストを隠すか (TRUE)、表示するか (FALSE) を設定します。デフォルト値は FALSE で、抜粋部分のテキストは表示されます。

抜粋部分のテキストを非表示にするには、

  • index.phpthe_content(); を下のように変更する。第2引数で変化します。
the_content( '', TRUE );
  • 投稿の <!--more--> の直後に <!--noteaser--> を追加する。

「続きを読む」リンクのクリック時にページをスクロールしない

デフォルトでは .more-link アンカーをクリックすると、Web 文書が開かれ、アンカー「#more-000」を含むセクション位置までページがスクロールされます。このセクション位置はユーザーが投稿に <!--more--> を挿入した位置です。

このスクロールを止めるには単純な正規表現で the_content_more_link をフィルタリングします。

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

上のコードをテーマの functions.php ファイルに挿入してください。名前付きのアンカーが削除されます。

「続きを読む」の変更

「続きを読む」リンクに表示される語句をカスタマイズするには functions.php ファイルに次のコードを挿入します。

function modify_read_more_link() {
    return '<a class="more-link" href="' . get_permalink() . '">ここに続きを示す語句を挿入</a>';
}
add_filter( 'the_content_more_link', 'modify_read_more_link' );

コードの参照: https://wordpress.org/support/topic/more-tag-ignored-on-home-page

the_excerpt() で表示される「続きを読む」の変更

必ずしもすべての投稿に more クイックタグを追加できず、抜粋を表示するにはテンプレートを変更して the_content()the_excerpt() に変えるしかない場合もあります。the_excerpt() を使用するとVersion 4.1 以降であれば「続きを読む」、それよりも古いバージョンであれば「...」が表示されます。

この語句をカスタマイズするには functions.php ファイルに次のコードを挿入します。

// Replaces the excerpt "Read More" text by a link
function new_excerpt_more($more) {
       global $post;
	return '<a class="moretag" href="'. get_permalink($post->ID) . '">ここに続きを示す語句を挿入</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

ただし、フィルター設定で「続きを読む」リンクを設定したテーマを親テーマとして子テーマを作成している場合、上のコードだけでは正しく動作しません。remove_filter() を使用して親テーマのフィルターを削除する必要があります。ここで問題は、子テーマの functions.php が親テーマの functions.php よりも前にロードされる点です。子テーマの関数が実行される時点で削除すべきフィルターはないため remove_filter() は警告を出さずに失敗します。

この問題を解決するには、親テーマのロードの後に呼び出されるアクションフック関数内に remove_filter() コードを挿入します。たとえば「en:Twenty Eleven」を親テーマとする子テーマを使用していて上のカスタマイズコードを正しく動かすには、次のコードを追加する必要があります。実際に使用している親テーマのコードを確認し remove_filter() コードに正しいパラメータを指定してください。親テーマで使用されている add_filter() のパラメータと完全に一致する必要があります。

function child_theme_setup() {
	// 親テーマで指定された抜粋の「続きを読む」を上書きする
	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' );

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

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

設計上、the_content() テンプレートタグには「続きを読む」リンク内で表示される語句を設定するパラメータがあります。

デフォルトでは、次のように表示されます。

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 続きを読む

「続きを読む」を別の語句に置き換える場合、テンプレートタグに新しい語句を指定します。

<?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 » » » »

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 --> と書きます。

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

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

画像の追加

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

「続きを読む」に「葉」の画像を表示する例です。ここで画像ファイルはテーマの「images」フォルダーにあるものとします。

<?php the_content('続きを読む...<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 続きを読む...   leaf

すでに述べたように 画像と 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_content() の呼び出し前、the_post() の呼び出し後に挿入すること

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

$more を設定するタイミング

デフォルトのグローバル変数 $more を上書きする場合、タイミングが重要です。ループの「中」、そして投稿の設定の「後」でなければなりません。標準のループと the_post() を使用する場合、$morethe_post の「後」、the_content() の「前」で設定します。

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

$more についてもう少し

$more を -1 に設定すると、more タグは表示されません。この動きは最初の記事だけ全文を表示し、残りのコンテンツは抜粋を表示する「マレットループ」の実装で便利です。

<?php global $more; $more = -1; // ループ前に $more を宣言し設定 ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); // ループの開始 ?>
<?php 
    if ($more == -1) { // 最初の記事では more タグを使わない
        the_content();
        $more = 0; // 次からは more タグを使用する
    }
    else { // more タグを使用
        the_content(__('続きを読む...'));
    }
?>
<?php endwhile; // ループの終了 ?>

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