ブロギングライフ

ブログサイト運営関連、AdSenseについての情報などを発信しています。

WordPress 標準テーマ トップページの投稿を全文から要約に表示変更する方法

WordPress 標準テーマ トップページの投稿を全文から要約に表示変更する方法

WordPressの標準テーマは、トップ(ホーム)ページで投稿記事の全文が表示される仕様になっています。ホームページに複数(デフォルトでは10)の記事(投稿)を表示させるようにしている場合、記事がある程度長いと縦に(非常に)長いページとなってしまいます。

カテゴリーページでも、同様に全文が表示されます。カテゴリーページでは、要約(序文の抜粋)を表示した方が、ユーザーが記事の一覧を見やすくなります。

WordPress 標準テーマ トップページの投稿を全文から要約に変更する設定

WordPress 標準テーマのホーム、カテゴリー、アーカイブなどの一覧表示ページで、記事の全文ではなく、序文を抜粋して表示する設定手順を以下に紹介します。

本設定は、Twenty Fifteen, Twenty Sixteen, Twenty Seventeen で動作することを確認しております。

作業前の準備

本設定は、テンプレートファイルを編集します。子テーマのテンプレートファイルを編集した設定は、テーマのアップデートでも行なっても保持されます。本作業を行う前に子テーマの作成・設定をすることをおすすめ致します。
備考:
WordPressの標準テーマの機能追加は、テンプレートファイルの編集を行う作業が比較的多くあります。子テーマを作成して、利用すると保守性、作業効率が良くなります。

編集テンプレートファイルを子テーマに設置

本作業は、テンプレートファイル content.php を編集します。Twenty Fifteenでは、テーマのディレクトリ(wp-content/themes/twentyfifteen)の下にあるcontent.phpをコピー(ダウンロード)して、子テーマのディレクトリーの下にペースト(アップロード)します。

Twenty Sixteenの場合、content.phpは、テーマのディレクトリーの下のサブディレクトリー template-parts にあります。子テーマのディレクトリーの下にtemplate-partsを作成して、その下に親テーマのcontent.phpをコピーしペーストします。

Twenty Seventeenの場合、テーマディレクトリーの下にある2つのサブディレクリー(twentyseventeen/template-parts/post)にcontent.phpがあります。子テーマのディレクトリーの下にtemplate-partsを作成して、さらにその下にサブディレクトリーpostを作成します。そして、作成した子テーマのサブディレクトリー(twentyseventeen-child/template-parts/post)の下にcontent.phpをアップロードします。

テンプレートファイル (content.php) の編集

WordPressの管理メニュー項目「外観」から「テーマの編集」を選択します。子テーマの場合は、Twenty Fifteenではページ右側のテーマファイルのリストに表示されているcontent.phpをクリックします。Twenty Sixteenでは、テーマファイルのリストの中からtemplate-partsをクリックするとcontent.phpが表示されます。Twenty Seventeenの場合は、template-partsをクリック、続いてpostをクリックするとcontent.phpが表示されます。

Twenty Seventeenの場合のcontent.php編集
Twenty Seventeenのcontent.php 編集選択手順

表示される content.php の中に以下の様な記述箇所があります。

<div class=”entry-content”>
<?php
/* translators: %s: Name of current post */
the_content(
sprintf(
__( ‘Continue reading<span class=”screen-reader-text”> “%s”</span>’, ‘twentyseventeen’ ),
get_the_title()
)
);wp_link_pages(
array(
‘before’ => ‘<div class=”page-links”>’ . __( ‘Pages:’, ‘twentyseventeen’ ),
‘after’ => ‘</div>’,
‘link_before’ => ‘<span class=”page-number”>’,
‘link_after’ => ‘</span>’,
)
);?>
</div><!– .entry-content –>

この部分は、the_content() ファンクションによって、それぞれの投稿の全文(フルコンテント)を表示を行う箇所です。

この部分に条件分岐を追加して、個別投稿の場合は全文表示、それ以外のページ(例:トップページやカテゴリーページ)では、抜粋文を表示するようにコードを変更します。変更コードは以下の様になります。

<div class="entry-content">
<?php
if ( is_single( ) ) :
/* translators: %s: Name of current post */
the_content(
sprintf(
__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
get_the_title()
)
);
wp_link_pages(
array(
'before' => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
'after' => '</div>',
'link_before' => '<span class="page-number">',
'link_after' => '</span>',
)
);
else :
/* translators: %s: Name of current post */
the_excerpt(
sprintf(
__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
get_the_title()
)
);
wp_link_pages(
array(
'before' => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
'after' => '</div>',
'link_before' => '<span class="page-number">',
'link_after' => '</span>',
)
);
endif;?>
</div><!-- .entry-content -->

一つ前に紹介した投稿の全文表示設定コードの部分を、上のコード(個別投稿で全文表示、それ以外は抜粋表示)に入れ換えます。

コードの変更に仕方が分かりづらい場合は、YouTubeの説明をご覧下さい。(後ほど、投稿予定です。)

変更内容を確認の上、「ファイルを更新」ボタンを押してテンプレートファイルを保存します。

ホームページでの表示確認

ブラウザーでホームページを表示して、確認します。設定が適切に行われていれば、以下の様に記事タイトルの下に、記事が序文の抜粋、その下に「続きを読む」と表示されます。(使用テーマ:Twenty Seventeen)

ホームページの記事が全文ではなく、序文の抜粋で表示されています。

抜粋表示文字数の変更

抜粋で表示する文字数を変更(増やしたり減らしたり)する場合は、以下のコードをfunctions.php に追加します。

function twenty_seventeen_excerpt_length( $length ) {
return 175;
}
add_filter( 'excerpt_length', 'twenty_seventeen_excerpt_length', 999 );

175の部分が抜粋で表示する文字数です。お好みに合わせて、数を設定変更して下さい。

上の設定を加えた場合は、抜粋文の文字数が多くなります。(175文字)

投稿の抜粋文字数を175に設定した例

カテゴリーページの一覧も投稿の全文から、抜粋に変更になります。記事の一覧表示は抜粋の方が適している場合が多いと思います。
ネイティブAMP対応 ブロギングライフBLOG のトップ、カテゴリーページは序文抜粋の表示を、本記事で紹介した設定方法で実装しています。

YouTube

本記事の内容をYouTubeで紹介しております。コードの設定変更方法については、ビデオの方で具体的な作業方法を説明しております。

コメントとトラックバック

  • Comments ( 4 )
  • Trackbacks ( 0 )
  1. 突然のコメント失礼いたします。
    大変分かりやすい記事、ありがとうございます。無事に全文表示から抜粋表示にできました!

    しかし,カテゴリーを開いた際、抜粋表示にはなっているのですが、タイトルの上に「 array( ‘before’ =>’ 」という文字が全記事の上に表示されてしまい、消えません。一体どこで間違えてしまっているのでしょうか?

    無知な質問ですみません、よろしくお願い致します。

    • By Chico@ブロギングライフ

      はじめまして。

      コメントありがとうございます。無事に抜粋表示できたとの事、何よりです。

      カテゴリーを開いた際の現象については、お書き下さった内容だけでは、原因を絞り込むことは難しいです。頻発するような現象であれば、その現象が発生している原因を直ぐに特定することができる場合もありますが、そうでない場合には、原因と考えられるような事項を絞り込んでいくような作業が必要となります。

      ご利用のテーマをお知らせ頂ければ、私の環境でも試してみることはできます。ただし、それで原因が分かるかどうかはやってみないと分かりません。

      • ご返信ありがとうございます。

        後日色々試しましたら全く別の箇所から派生して起こっていたバグでした。。
        バグの解消後、ブロギングライフさんの記事通りcontent.phpを書き換えたら無事に綺麗な抜粋表示に変更できました。

        返信のお時間をいただいてしまい、すみません。記事、大変参考になりました!ありがとうございました。

        • By Chico@ブロギングライフ

          更新情報のご連絡、ありがとうございます。無事に抜粋表示されるようになったとの事、良かったですね!

コメントを残す(承認後表示されます)

*
*
* (公開されません)

Return Top Mastodon Mastodon Mastodon
error: Content is protected !!