【WordPress】「Twenty Sixteen」テーマのアーカイブページの一覧性を改善します

0.1upprojectはWordPressの標準テーマ「Twenty Sixteen」を基礎にしています。初期のアーカイブページは1記事の縦幅が広すぎて一覧性が悪いので改修したいと思います。カテゴリベースでパンくずリストを表示する場合にも、整備したほうが良さそうですね。

サイトにパンくずリストをつけたかったので、その準備としてSEO対策プラグインをYoast SEOに変更しました。パンくずリストもすぐに表示できる状態になったのですが、そのままでは使いづらそうな点も見つかりました。

今回はパンくずリストの実装に向けて、Wordpressの標準テーマ「Twenty Sixteen」のアーカイブページを改修していきます。


はじめに

今回はテーマの編集を行います。テーマを編集する場合はそのテーマの子テーマを準備し、そちらを改修しましょう。


カテゴリ記事一覧が表示されたときの問題点

サイト構造はカテゴリを使って整理していたので、パンくずリストをたどるとカテゴリの記事一覧(アーカイブページ)が表示されます。初期状態ではアーカイブページには記事の本文が表示されるのですが、記事一つの縦幅が広すぎて一覧性が悪く、使いにくい印象です。

【Twenty Sixteen】初期アーカイブページの風景(この後本文が続きます)
【Twenty Sixteen】初期アーカイブページの風景(この後本文が続きます)

現在SEO対策の一環として、固定ページや記事の概要を整備しています。アーカイブページに表示される本文は「続きを読む」までで区切ることもできるのですが、概要のほうがコンパクトにまとめているので、アーカイブページにはこちらを表示したいと思います。


content.php を修正する

WordPressメニュー「外観」→ 「テーマエディター」をたどります。

今回改修するファイルは「content.php」になります。

Twenty Sixteenでは「template-parts」というフォルダ内に入っています。

【Twenty Sixteen】content.phpの場所
【Twenty Sixteen】content.phpの場所

元の概要とアイキャッチ画像を削除

元のソースだと20行目に概要とアイキャッチ画像のコードがあります。削除してしまってもいいのですが、今回はコメントアウトで対応します。

【Twenty Sixteen Child】元の概要とアイキャッチ画像の削除
【Twenty Sixteen Child】元の概要とアイキャッチ画像の削除

削除したアイキャッチ画像は、表示サイズを調節して更新日の上に表示します。


本文表示を概要だけに変更

元のソースだと24行目あたりに「<div class=”entry-content”>」から始まる部分があります。

【Twenty Sixteen】content.phpの元コード
【Twenty Sixteen】content.phpの元コード

ここで、記事本文を表示しているのですがまるっといらないので、下記のように修正します。

<a href="<?php esc_url(the_permalink()) ?>" rel="bookmark">
<?php
	twentysixteen_excerpt();
?>
</a>

アーカイブページを確認してみると、問題なく概要が表示されています。
一覧性も良くなったと思います。

【Twenty Sixteen】改修後のアーカイブページの風景
【Twenty Sixteen】改修後のアーカイブページの風景

今後の課題

記事本文を概要に変更することで、一覧性はかなり向上すると思います。あと気になるとすれば、概要の左手にある、カテゴリ・タグの情報でしょうか。現状この部分の縦幅が広いので、ここは概要の下辺りに表示したほうがスッキリするかもしれませんね。ここについては、時間を作って検討してみたいと思います。


この断片があなたの星へ続く道を、少しでも照らすことを願って

投稿者: 0.1

イラストレーター/0.1up project著者 厚塗りで「存在感や重さ、質感による説得力」のあるイラストを目指しています。 日本では線画をベースとしたイラストが主流ですが、そこから外れたモノもイラストの世界を広げる為に必要だと考えています。「世界観にもう一味試したい」そんなときには、ぜひお声がけください。