TwentyFourteenの一覧表示を自動で抜粋表示にカスタマイズ

WordPress のテーマ TwentyFourteen のカスタマイズ記事です。

TwentyFourteen は PC・タブレット等のデバイスで表示すると、コンテンツ内容が一覧に全て表示される仕様となっています。

TwentyFourteen のトップページ表示例

記事を投稿する際に <!–more–> を使えば任意の場所を抜粋表示にできるのですが、面倒だし一覧ページはコンテンツはいらないと思っているので自動で抜粋表示にするようにカスタマイズしてみます。

※ 抜粋というよりは「続き」ボタンをつけた感じです。

全体的なバランスは後から調整しますが、今回のカスタマイズでこんな感じになります。

カスタマイズ後のトップページ表示例

カスタマイズは下記のような順で記載していきます。

• 自動抜粋表示用の関数作成
• content.php の修正
• スタイルシートの調整

スポンサーリンク

自動抜粋表示用の関数を作成する

まずは自動抜粋表示用に下記のコードを、子テーマ内の functions.php に下記を追加します。

function my_excerpt( $post ) {

	$content  = "<a href='".get_permalink( $post->ID )."' class='my-excerpt'>この記事を読む</a>\n";
	return $content;

}

content.php の修正

関数を作成したら次は content.php の修正を行います。

content.php は親テーマから子テーマ内のディレクトリにコピーしてから修正します。

カスタマイズする箇所はこの辺り。

	</header><!-- .entry-header -->

	<?php if ( is_search() ) : ?>
	<div class="entry-summary">
		<?php the_excerpt(); ?>
	</div><!-- .entry-summary -->
	<?php else : ?>

これをこんな感じにします。

	</header><!-- .entry-header -->

	<?php if ( is_home() || is_search() || is_archive() ) : ?>
	<div class="entry-summary">
		<?php echo my_excerpt( $post ); ?>
	</div><!-- .entry-summary -->
	<?php else : ?>

45 行目で「抜粋表示」を適用するページ判定を追加、49 行目を先ほど追加した関数で置き換えという感じです。

本文が記載されていた場所には「この記事を読む」のテキストアンカーで置き換えられていると思います。

スタイルシートの調整

最後はスタイルシートの調整です。

「この記事を読む」のテキストアンカーをボタンっぽい感じにしてあげます。

子テーマ内のスタイルシートに下記を追加します。

カスタマイズ箇所はなるべくまとめたいので「6.15 Customize」として項目を追加しています。

/**
 * 6.15 Customize
 * -----------------------------------------------------------------------------
 */

a.my-excerpt {
	float: right;
	font-size: 12px;
	margin-top: 5px;
	padding: 1px 5px;
	border-radius: 2px;
	text-decoration: none;
	color: #fff;
	background-color: #e05d22;
}

a:hover.my-excerpt.my-excerpt {
	filter: alpha(opacity=85);
	-moz-opacity: 0.85;
	opacity: 0.85;
}

これで PC・タブレット表示のカスタマイズは完了です。

スマートフォンの場合は元々コンテンツ部分は表示されませんが、今回追加した「この記事を読む」も表示されないので合わせてスタイルシートを修正します。

これは Media Queries でコンテンツ部分を隠しているだけなので、下記部分の display: none; を消すかコメントアウトするだけで OK です。

@media screen and (max-width: 400px) {
.
.
.
	.list-view .site-content .cat-links,
	.list-view .site-content .entry-content,
	.list-view .site-content .entry-summary,
	.list-view .site-content footer.entry-meta {
		// display: none;
	}
.
.
.
}

これで下記のような表示になると思います。

SP before

SP after

こっちは配置等をまだカスタマイズしていないのでスッキリ感が損なわれましたがとりあえずはこんな感じで。

TwentyFourteen の抜粋表示カスタマイズはこれでお終いです。