ブロギングライフ

ブログサイト運営関連、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() ファンクションによって、それぞれの投稿の全文(フルコンテント)を表示を行う箇所です。

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


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

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

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

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

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

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

抜粋表示文字数の変更

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


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

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

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

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

YouTube

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

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

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

Return Top
error: Content is protected !!