Twenty Thirteenのアーカイブ表示をカスタマイズ

「Twenty Thirteen」のアーカイブ表示は、個人的にはタイトル表示が強調されすぎていて、記事の表示が全文で長いと感じます。アーカイブ表示について、タイトル表示の調整と、記事の全文表示を抜粋表示に変更します。アーカイブ表示には、カテゴリ別とタグ別があり、どちらも同じデザインにカスタマイズします。

はじめに

「Twenty Thirteen」のアーカイブ表示をカスタマイズします。
・タイトル表示を調整
・記事の全文表示を抜粋表示に変更

使用環境

WordPress 4.2.3
Twenty Thirteen 1.5

タイトル表示を調整

タイトル表示は、スタイルシート「style.css」で変更します。以下、背景をなくして上下に境界線を追加し、文字サイズを調整した変更例です。

<変更前>

/**
 * 5.9 Archives
 * ----------------------------------------------------------------------------
 */

.archive-header {
	background-color: #e8e5ce;
}

.archive-title,
.archive-meta {
	font: 300 italic 30px "Source Sans Pro", Helvetica, sans-serif;
	margin: 0 auto;
	max-width: 1040px;
	padding: 30px 0;
	width: 100%;
}

<変更後>

/**
 * 5.9 Archives
 * ----------------------------------------------------------------------------
 */

.archive-header {
	border-top   : 2px solid #a0a0a0;
	border-bottom: 2px solid #a0a0a0;
}

.archive-title,
.archive-meta {
	font: 300 normal 24px  Osaka-mono, "MS Gothic", monospace;
	margin: 0 auto;
	max-width: 1040px;
	padding: 30px 0;
	width: 100%;
}

記事の全文表示を抜粋表示に変更

テンプレート「content.php」の記述を変更します。デフォルトでは、検索結果表示のみ抜粋表示となっていますが、カテゴリ別のアーカイブ表示とタグ別のアーカイブ表示も抜粋表示に変更します。

<変更前>
1行目はページの種類の判定で、3行目で抜粋表示しています。

	<?php if ( is_search() ) : // Only display Excerpts for Search ?>
	<div class="entry-summary">
		<?php the_excerpt(); ?>
	</div><!-- .entry-summary -->
	<?php else : ?>
	<div class="entry-content">
		<?php
			/* translators: %s: Name of current post */
			the_content( sprintf(
				__( 'Continue reading %s <span class="meta-nav">&rarr;</span>', 'twentythirteen' ),
				the_title( '<span class="screen-reader-text">', '</span>', false )
			) );

			wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) );
		?>
	</div><!-- .entry-content -->
	<?php endif; ?>

<変更後>
1行目のページの種類の判定に、カテゴリ別とタグ別のアーカイブ表示を追加します。

	<?php if ( is_search() || is_category() || is_tag() ) : // Display Excerpts for Search, Category Archive, and Tag Archive ?>
	<div class="entry-summary">
		<?php the_excerpt(); ?>
	</div><!-- .entry-summary -->
	<?php else : ?>
	<div class="entry-content">
		<?php
			/* translators: %s: Name of current post */
			the_content( sprintf(
				__( 'Continue reading %s <span class="meta-nav">&rarr;</span>', 'twentythirteen' ),
				the_title( '<span class="screen-reader-text">', '</span>', false )
			) );

			wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) );
		?>
	</div><!-- .entry-content -->
	<?php endif; ?>

おわりに

「Twenty Thirteen」のアーカイブ表示をカスタマイズしました。

関連記事(Twenty Thirteenのページ固有の表示をカスタマイズ)

  1. Twenty Thirteenでトップページだけ表示を変更
  2. Twenty Thirteenの固定ページのコメント欄を削除
  3. Twenty Thirteenの前後の記事へのリンクをカスタマイズ
  4. Twenty Thirteenの投稿ページの日付表示等を移動
  5. Twenty Thirteenの投稿ページのコメント欄をカスタマイズ
  6. Twenty Thirteenのアーカイブ表示をカスタマイズ
  7. Twenty Thirteenの検索結果表示をカスタマイズ
  8. Twenty Thirteenのページナビゲーションをカスタマイズ

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

コメント記入欄

※メールアドレス(任意入力)は非公開です。コメントはお気軽にどうぞ!

内容を確認して、「コメント送信」ボタンを押してください。

post date*

※日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)