Twenty Fourteenのトップをタイトル一覧にする

Twenty Fourteenのトップページをアイキャッチ画像と記事タイトルの一覧にするカスタマイズこの画像のように、WordPressのテーマTwenty Fourteenのトップページを、アイキャッチ画像と記事タイトルの一覧表示にカスタマイズしたいと思います。
その他にもカテゴリーやタグ、投稿日時も一緒に表示をさせたいと思います。
デフォルト時とは大きく雰囲気も変わり、個人的には見やすくなるカスタマイズだと思っています。

content.phpの編集

content.phpを編集しアイキャッチ画像の表示のさせ方や本文部分表示の削除などを行いましょう。
今回のカスタマイズで私が使用しているコードを貼り付けますね。

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 
	<header class="entry-header">
		<?php
 
			if ( is_single() ) :
				the_title( '<h1 class="entry-title">', '</h1>' );
			else :
				?>
				<!-- 記事一覧のひと記事開始 -->
				<div class="one-title">
					<div class="entry-thumbnail"><a href="<?php the_permalink(); ?>"><img src="<?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id,, true); echo $image_url[0]; ?>" width="100%" /></a></div>
						<div class="entry-meta">
							<?php
								printf( '<span class="entry-date"><a href="%1$s" rel="bookmark"><time class="entry-date" datetime="%2$s">%3$s</time></a></span>',
									esc_url( get_permalink() ),
									esc_attr( get_the_date( 'c' ) ),
									esc_html( get_the_date() )
								);
							?>
							<span class="entry-category"><?php the_category(', ') ?></span>
							<?php the_tags( '<span class="entry-tag">', ', ', '</span><br />' ); ?>
						</div>
					<?php the_title( '<h1><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h1>' ); ?>
 
					<!-- start_description --><div>
						<span class="aioseop_description"><?php echo get_post_meta($post->ID, _aioseop_description, true); ?></span>
					</div><!-- end_description -->
					<span class="readmore"><a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/readmore.svg" alt="read more" /></a></span>
					<br clear="all" />
				</div>
				<!-- 記事一覧のひと記事終了 -->
				<?php
			endif;
		?>
 
	</header><!-- .entry-header -->
 
	<?php if ( is_search() ) : ?>
	<div class="entry-summary">
		<?php the_excerpt(); ?>
	</div><!-- .entry-summary -->
	<?php elseif ( is_single() ) : /* 個別記事表示以外では記事本文は表示しない */ ?>
 
	<div class="entry-content">
		<?php
			the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyfourteen' ) );
			wp_link_pages( array(
				'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfourteen' ) . '</span>',
				'after'       => '</div>',
				'link_before' => '<span>',
				'link_after'  => '</span>',
			) );
		?>
	</div><!-- .entry-content -->
	<?php else : ?>
	<?php endif; ?>
 
</article><!-- #post-## -->

デフォルトコードからの変更点は、
  • twentyfourteen_post_thumbnail()の削除
  • headerタグ内の大幅な改修
  • 単一記事ページ以外では本文を表示しない条件分岐にする
です。

WordPressの有名なプラグインAll in One SEO PackのDescription部分を表示するコードになっていますが、もし表示をしたくない場合にはstart_descriptionend_descriptionで囲まれている部分を削除してください。

style.css

続いてスタイルシートを編集し、表示を整えます。

余白などの細かなサイズについては、好みに合わせて適宜変更してください。

.site {
	margin: 0em auto;			/* ページを中央表示 */
}
 
.site-title a {
	color : #ff8c00;			/* ブログタイトル文字装飾 */
}
 
.content-area {
	padding-top: 10px;			/* コンテンツ部分の上部余白を補正 */
}
 
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
	margin: 0;			/* コンテンツ部分の横幅を広げる */
	max-width: none;			/* コンテンツ部分の横幅を広げる */
}
 
.site-content .entry-content h2{
	border-left: 5px solid #ff1493;			/* h2タグ装飾 */
}
 
.site-content .entry-header {
		padding-right: 0;			/* コンテンツ部分の横幅を広げる */
}
 
.site-content footer.entry-meta {
	padding-right: 0;			/* コンテンツ部分の横幅を広げる */
}
 
.site-content .entry-content,
.site-content .entry-summary,
.page-content {
	padding-right: 0;			/* コンテンツ部分の横幅を広げる */
}
 
.content-sidebar {
	padding-top: 10px;			/* サイドバー部分の上部余白を補正 */
}
 
.site-content .has-post-thumbnail .entry-header {
	margin-top: 0;			/* アイキャッチ画像を削除した後の補正 */
}
 
.one-title {
	position: relative;			/* readmoreボタンの配置のため */
}
 
.one-title .entry-thumbnail {
	width: 200px;			/* 記事一覧のアイキャッチ画像の幅 */
	margin-right: 5px;			/* アイキャッチ画像の右側余白 */
	float: left;			/* アイキャッチ画像は左側に配置 */
}
 
.one-title .entry-meta {
	clear: none;			/* 投稿情報部分をアイキャッチ画像右側に表示するため */
	line-height: 1;			/* 投稿情報部分の行の高さ */
	text-transform: none;			/* 強制大文字表記解除 */
}
 
.one-title .entry-date {
	font-size: 12px;			/* 投稿日時の文字の大きさ */
}
 
.one-title .entry-category {
	background: url(images/category.svg) no-repeat 0 0;	/* カテゴリーの画像表示 */
	padding-left: 20px;			/* カテゴリー画像表示調整 */
	font-size: 12px;			/* カテゴリーのテキスト大きさ */
}
 
.one-title .entry-tag {
	background: url(images/tag.svg) no-repeat 0 0;			/* タグの画像表示 */
	padding-left: 20px;			/* タグ画像表示調整 */
	font-size: 12px;			/* タグのテキスト大きさ */
}
 
.one-title h1 {
	border-left: 5px solid #ff1493;			/* 一覧ページタイトルh1タグ装飾 */
	font-size: 26px;
	font-weight: 300;
	display: inline;			/* アイキャッチ画像の右側に表示するため */
}
 
.one-title .aioseop_description {
	font-size: 13px;			/* 記事一覧にAll in One SEOのdescriptionを表示する */
	line-height: 1.1;
}
 
.one-title .readmore {
	position: absolute;			/* 記事一覧の右下にread moreボタンを設置 */
	bottom: 5px;
	right: 5px;
}
 
.singular .site-content .hentry.has-post-thumbnail {
	margin-top: 0;
}

このスタイルシートでの設定ですが、
  • このベクター画像のアイコンを”テーマディレクトリ/images/”に配置し表示している
  • 上記アイコンにてカテゴリーとタグを表示している
  • 上記アイコンにて個別記事ページへとぶread moreを表示している
  • アイキャッチ画像の幅は200pxとし縦横比を崩さずに拡大縮小をしている
  • h1タグやh2タグを少々装飾している
  • メインコンテンツ部分、その他の余白サイズを変更している
といったものです。

今回、初めてsvg形式のベクター画像を使用したのですが、とてもいい感じです!
ぜひ使ってみてください!

私の個人的な好みなのですが、トップページは記事タイトルの一覧が見やすいと感じます。
アイキャッチ画像やカテゴリーなどもわかりやすい位置に配置し、色々な記事を読んでもらえる工夫をしました。

Media Queriesにてスマートフォンにも対応

Twenty Fourteenのカスタマイズ スマホでの表示PCでの表示が変わり安心していたら、スマートフォンでの表示がアレな感じになっていました。
アイキャッチ画像の幅が200pxでは大きすぎるのです。
そこで、CSS3のMedia Queriesにて、スマートフォンでの表示レイアウトを設定することにしました。

Media Queriesは本当に便利です。



@media screen and (max-width: 640px) {
	.one-title .entry-thumbnail {
		width: 84px;			/* 記事一覧のアイキャッチ画像の幅スマホ */
	}
	.one-title .entry-date {
		font-size: medium;
	}
	.one-title .entry-category {
		display: none;
	}
	.one-title .entry-tag {
		display: none;
	}
	.one-title h1 {
		font-size: medium;
		font-weight: bold;
	}
	.one-title .aioseop_description {
		display: none;
	}
	.one-title .readmore {
		display: none;
	}
}

上記コードを追記してください。
この部分のCSSは、
  • 640px以下のブラウザ幅にて作動
  • アイキャッチ画像の幅は84px
  • フォントサイズの変更
  • カテゴリー・タグとread moreは非表示
  • All in One SEO PackのDescription部分は非表示
  • h1タグの装飾変更

という内容です。
Twenty Fourteenのトップページを記事タイトル一覧にするスマートフォン編すると、このような表示になります。

これにて、Twenty Fourteenのスマートフォン表示にも対応できるようになりました。

でも、まだまだ改善の余地はありそうですね!!

感想

Twenty Fourteenに少しだけ慣れてきて、Media Queriesの使い方も少しだけ理解したので、自分なりにカスタマイズができるようになってきました。
プラグインを使用せずに、スマートフォンの表示まで子テーマのCSSで管理できるのは、かなりありがたいです!
Twenty Fourteen、とても使いやすいテーマだと思います!

WordPressも以前に比べ、メディアのアップロード部分を始め色々と使いやすくなっていますし、常に新しいものをチェックすることは大切なんだなぁと感じました。

今後もさらにカスタマイズをし、Twenty Fourteenの子テーマを膨らませていきたいと思います。


関連記事

Twenty Fourteenの検索枠の背景色を変更 Twenty Fourteenの検索枠の色変更
Twenty Fourteenの検索枠の背景色変更のカスタマイズです。
WordPressのTwenty Fourteenをフォトログにカスタマイズ Twenty Fourteenをフォトログ的に使う
Twenty Fourteenのトップページに写真をきれいに並べてフォトログテーマ風にカスタマイズしました。写真ギャラリーとして使えます。
Twenty Fourteenの背景色を変更する Twenty Fourteenの背景色を変更する
WordPressのデフォルトテーマにも採用されたTwenty Fourteenの背景色を変更するカスタマイズの紹介です。意外と手こずるカスタマイズですので、参考になれば幸いです。
WordPressのTwenty FourteenにヘッダーにSNSアイコン画像を貼る Twenty FourteenのヘッダーにSNSアイコン設置
レスポンシブで使いやすいWordPressテーマTwenty Fourteenのヘッダー部分に、SNSアイコン画像を貼り付けるカスタマイズを紹介します。
Twenty Fourteenのメインコンテンツの横幅を広げた Twenty Fourteenのコンテンツ部分横幅を広げる
Twenty Fourteenはデフォルト状態ではメインコンテンツ部分が若干狭いので、余白サイズを変更し横幅を広げるカスタマイズを紹介します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>