Twenty Fourteen - Child07

ドロップキャップを適用しエントリータイトルをスタイリッシュにカスタマイズ

Twenty Fourteen - Child07

Pocket

記事タイトルでドロップキャップを実現する

文章の最初の一文字を大きくする表現技法「ドロップキャップ」を使って投稿記事のエントリータイトルをスタイリッシュに変更します。カスタムフィールドを利用したサブタイトルも併記しつつ、SEOに適したタグを適用させます。

子テーマ用の content.php を用意する

FTP クライアントソフトなどでサーバにアクセスし wp-content > theme > twentyfourteen > content.php をダウンロードして wp-content > theme > 子テーマのフォルダ > content.php としてアップロードします。
これで、親テーマ「Twenty Fourteen」の content.php に優先して、子テーマの content.php が有効になります。

子テーマの content.php を編集する

コピーしてきた親テーマ「Twenty Fourteen」の content.php では h1 タグが指定されたエントリータイトルのみが表示(24〜28行目)されるように設定されています。

親テーマからコピーした content.php

<header class="entry-header">
		<?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) : ?>
		<div class="entry-meta">
			<span class="cat-links"><?php echo get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'twentyfourteen' ) ); ?></span>
		</div>
		<?php
			endif;

			if ( is_single() ) :
				the_title( '<h1 class="entry-title">', '</h1>' );
			else :
				the_title( '<h1 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h1>' );
			endif;
		?>

		<div class="entry-meta">
			<?php
				if ( 'post' == get_post_type() )
					twentyfourteen_posted_on();

				if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) :
			?>
			<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyfourteen' ), __( '1 Comment', 'twentyfourteen' ), __( '% Comments', 'twentyfourteen' ) ); ?></span>
			<?php
				endif;

				edit_post_link( __( 'Edit', 'twentyfourteen' ), '<span class="edit-link">', '</span>' );
			?>
		</div><!-- .entry-meta -->
	</header><!-- .entry-header -->

シングルコンテンツのページでは h1 タグが指定されたままで構いませんトップページやカテゴリー別・日付別などのアーカイブページでは h1 タグだらけになりますので、 h2 タグに変更します。
また、カスタムフィールドで作成した「subtitle」も併記していきます。

content.php の変更例

	<header class="entry-header">
		<div class="content-title">
		<?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) : ?>
		<div class="entry-meta">
			<span class="cat-links"><?php echo get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'twentyfourteen' ) ); ?></span>
		</div>

		<?php
			endif;

			if ( is_single() ) :
				the_title( '<h1 class="entry-title">', '</h1>' ); 
		?>
				<h2 class="subtitle"><?php echo esc_html ($post->subtitle); ?></h2>
		<?php		
			else :
				the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); 
		?>
				<h3 class="subtitle"><a href="<?php the_permalink(); ?>"><?php echo esc_html ($post->subtitle); ?></a></h3>
		<?php
			endif;
		?>

		<div class="entry-meta">
			<?php
				if ( 'post' == get_post_type() )
					twentyfourteen_posted_on();

				if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) :
			?>
			<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyfourteen' ), __( '1 Comment', 'twentyfourteen' ), __( '% Comments', 'twentyfourteen' ) ); ?></span>
			<?php
				endif;

				edit_post_link( __( 'Edit', 'twentyfourteen' ), '<span class="edit-link">', '</span>' );
			?>
		</div><!-- .entry-meta -->
		</div><!-- .content-title -->
	</header><!-- .entry-header -->

子テーマの style.css を編集する

ドロップキャップを適用し、一文字目を拡大表示しながら記事のタイトル周りのデザインを整えます。
style.css の変更例

/* Entry Titleのスタイルを指定する */

.content-title {
	font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', sans-serif;
}

.content-title .entry-title,
.content-title .entry-title a  {
	color: #000;
	font-size: 14px;
	font-weight: 700;
	text-transform: none;

}

.content-title .entry-title:first-letter {
	float: left;
	color: #FA8072;
	font-size: 50px;
	font-weight: 400;
	line-height: 1;
}

.content-title .entry-title a:hover,
.content-title .subtitle a:hover {
	color: #FA8072;
}

.content-title .subtitle,
.content-title .subtitle a {
	color: #000;
	margin-top: 15px;
	padding: 10px 0;
	font-size: 14px;
}