[WordPress] Twenty Sixteenテーマ - 記事全体の代わりにサマリーを表示する

Last Updated: 2016 年 01 月 31 日 4のコメント
無料電子ブック AdSense ウェビナー

WordPressの2016年度のテーマである トゥエンティシックスティーンは無難なレイアウトを示しています。 特別カスタマイズせずに活用してもいいのブログを作成することができるようになります。 もちろんカスタマイズを介して様々な活用が可能でしょう？

Twenty Sixteenテーマを活用した、いくつかのサイトです。

Twenty Sixteenテーマのブログのページの場合、要約文（Excerpt）の代わりに全体文の内容が表示されます。 文が長い場合は、ブログのページ（あるいは前面ページ）があまりにも長くなって、訪問者が記事を読むことは容易ではないでしょう。

Twenty Sixteenテーマのアーカイブページ（ブログのページ、カテゴリページなど）で、個々の記事の全体文の内容ではなく、要約だけを表示するには、次のように template-parts フォルダ内の content.php ファイルを変更します。

content.php ファイルの次の部分を探します。

Twenty Sixteenテーマで要約を表示する

上記の内容を次のコードに置き換えます。 

<div class="entry-content">
<?php
if ( is_single() ) :
/* translators: %s: Name of current post */
the_content( sprintf(
__( 'Continue reading %s', 'twentysixteen' ),
the_title( '<span class="screen-reader-text">', '</span>', false )
) );

wp_link_pages( array(
'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentysixteen' ) . '</span>',
'after'       => '</div>',
'link_before' => '<span>',
'link_after'  => '</span>',
'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>%',
'separator'   => '<span class="screen-reader-text">, </span>',
) );
else :

/* translators: %s: Name of current post */
the_excerpt( sprintf(
__( 'Continue reading %s', 'twentysixteen' ),
the_title( '<span class="screen-reader-text">', '</span>', false )
) );

wp_link_pages( array(
'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentysixteen' ) . '</span>',
'after'       => '</div>',
'link_before' => '<span>',
'link_after'  => '</span>',
'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>%',
'separator'   => '<span class="screen-reader-text">, </span>',
) );
endif;
?>
</div><!-- .entry-content -->
// Reference: matrudev.com

これにより、次のようにホームページ（最新記事表示時）、ブログのページ、カテゴリページなど要約が表示されます。

Excerpts in Twenty Sixteen Theme in WordPress

サムネイル（特性画像）が指定されているタイトルと要約文の間にサムネイルが表示されます。 もしサムネイルの幅が100％ではない場合には、次のCSSコードを使用するようにします。

img.attachment-post-thumbnail.size-post-thumbnail.wp-post-image {
width: 100%;
}

上の図で要約文の長さを調整したい場合には、 この記事を参考にしてみてください。

メモ：

4のコメント

コメント

  1. それにしてもTwenty Sixteenテーマに変えて、この部分が惜しかったが、良い情報ありがとうございます！

    Twenty Sixteenテーマでアーカイブ（カテゴリ）と投稿ページで、投稿のタイトルとサムネイルの画像サイズを小さく変更する方法をお尋ねください。 投稿のタイトルとサムネイルが大きくなりすぎますが、どのように変更するのかわかりません。

    応答

  2. enfold テーマを使用しています〜
    contentフォルダが表示さのに。どこスジョンといいご連絡致しますㅜ

    応答

    • こんにちは？

      通常contentフォルダはないようです。
      テーマの位置はwp-content/themes/の下にあります。 編集を希望する場合は、子テーマを作成してください。

      上記の内容は、Twenty Sixteenという無料テーマに適用される事項です。

      Enfold(https://www.thewordcracker.com/go/enfold ）テーマの場合、有料テーマであるため、ほとんどの必要な機能がテーマに搭載されていることです。 テーマガイドを先にお読み見ればいいようです。

      応答