Twenty Seventeen、”archives.php”を要約スタイルへ

ワードプレスの2017年の標準テーマ、Twenty Seventeenは、とてもおしゃれで最近の流行スタイルを踏襲したテーマですが、カテゴリーページなどarchives.phpが全文表示で、ちょっと見づらいです。

投稿日、投稿タイトル&リンク、投稿リード文」の3段構成に仕立て直しました。

アーカイブ、カテゴリー、タグページ(修正後)
アーカイブ、カテゴリー、タグページ(修正後)

Archives.phpは多種のリストに影響

今回、archives.phpを修正することでカテゴリーページの構成をカスタマイズしたのですが、このarchives.phpは、カテゴリーだけではなく、タグ、日付、作者別などいろいろな種類の投稿一覧のベースになっており、これらすべてに影響します。

カテゴリーページの構成だけを変更したい場合は、category.phpを追加することができるっぽいですが、ここでは割愛します。

archives.phpを子テーマにコピー

archives.phpをカスタマイズするにあたって、当該ファイルを子テーマにコピーします。
私は管理画面からの操作方法を知らないので、サーバーにログインしてコントロールパネルからコピーを作成しました。

SiteGroundのレンタルサーバーを使っている人はほとんどいなさそうですけれど、参考までに↓

SiteGround 子テーマへコピー
SiteGround 子テーマへコピー

“archives.php”修正箇所

外観→テーマの編集→twentyseventeen_child→アーカイブ (archive.php)にて修正をします。

archives.php 修正前
archives.php 修正前

黄色の枠線内が実際に修正を加えた箇所です。
ついでにグレーの枠線内も削除することでHTMLエラーを修正しました。

archives.php 修正後
archives.php 修正後

修正手順メモ

  1. HTMLコードを指すために、ループ開始部分<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>?>でいったん閉じます。
  2. 下記のコード(更新日、更新タイトル、リード文を挿入します。
  3. ループ開始文を閉じてしまったので、ループの残りの<?php endwhile; else : ?><?php endif; ?>に開始タグ<?phpを追記します。

コード

<time class="entry-meta entry-date published" datetime="<?php echo get_the_date(); ?>T<?php the_time(); ?>"><?php echo get_the_date(); ?></time>
<h2 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div class="entry-content"><p class="article_lead"><?php echo get_post_meta($post->ID, '_yoast_wpseo_metadesc', true); ?></p></div>

classにentry-meta、entry-contentなどの既存の指定することによって、見た目を他のページにできるだけ近づけています。

但し、ループの区切りが分かりにくかったので、class="article_lead"で関連部分の背景色をピンク色に装飾しました。

.article_lead {
	background: #ffeaea;
	padding: 0.5rem;
	margin: 0 0 1rem 0;
}

1ページあたりの表示記事数を設定

設定→表示設定→1ページに表示する最大投稿数にて変更します。

1ページに表示する記事数
1ページに表示する記事数

もっとスマートなやり方があるかも…

archives.phpを使ったカテゴリー一覧を短縮表示させる方法は、他にもいくつかあります。もっともよく見かけるのは、moreタグを追加する方法なのですが、個別記事で毎回手動で設定するのは面倒です。

phpが上手く書ければ、短縮表示を自動化するもっとスマートなやり方があるのかもしれませんが、この辺りが現在の限界です。

コメントを残す

メールアドレスが公開されることはありません。