Twenty Fourteen - Child06

サブタイトルをおすすめコンテンツ・Featured Contentに表示する

Twenty Fourteen - Child06

Pocket

デザイン面を重視したサブタイトルをおすすめ記事に表示する

タイトルの文字数が多くなった時はバランスが悪くなる「Twenty Fourteen」のトップページでおすすめコンテンツを表示すると、投稿記事のタイトルがサムネイル画像とともに表示されます。タイトルの文字数が多くなった時はバランスが悪くなります。
そこで、デザイン面を重視したサブタイトルを作成し表示できるようにします。

カスタムフィールドでサブタイトルを作成します

カスタムフィールドでサブタイトルを作成します

カスタムフィールドを利用可能にします

投稿の編集 画面で右上部の 表示オプション をクリックし カスタムフィールド にチェックを入れます。

カスタムフィールドを作成します

本文入力欄の下に カスタムフィールド 欄が表示されますので 名前 に任意の名称 に表示したいサブタイトルの文章を入力します。

最後に カスタムフィールドを追加 をクリックします。

おすすめコンテンツにサブタイトルを表示します

子テーマに content-featured-post.php を準備する

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

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

コピーしてきた親テーマ「Twenty Fourteen」の content-featured-post.php おすすめコンテンツには投稿記事のタイトルが表示するように設定されています。

親テーマからコピーした content-featured-post.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><!-- .entry-meta -->
		<?php endif; ?>

		<?php the_title( '<h1 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">','</a></h1>' ); ?>
	</header><!-- .entry-header -->

content-featured-post.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><!-- .entry-meta -->
		<?php endif; ?>

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

32行目の h1 タグを h2 タグに変更し、33行目に「subtitle」を追加するためにカスタムフィールドを表示します。

おすすめコンテンツの表示を整えます

子テーマの style.css へ、おすすめコンテンツのスタイルの指定を追記します。

子テーマの style.css の入力例

/* Feautured Contentのスタイルを指定する */

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

.featured-content .entry-title a {
	color: #A9A9A9;
	font-size: 10px;
	text-transform: none;
}

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

.featured-content .subtitle {
	margin: 2px 0px;
	font-size: 14px;
}

.featured-content .subtitle:first-letter {
	color: #FA8072;
	font-size: 20px;
	font-weight: 400;
}

このようにおすすめコンテンツのスタイルが変わります。
おすすめコンテンツのスタイルが変わります

「サブタイトルをおすすめコンテンツ・Featured Contentに表示する」への1件のフィードバック

コメントは停止中です。