【Twenty Twelve】記事抜粋と全文表示とアイキャッチ画像のカスタマイズ

WordPressテーマカスタマイズ

トップページやカテゴリー、アーカイブ別に投稿記事を表示するときは、アイキャッチ画像を記事横に小さく表示するのと同時に記事も抜粋表示して、記事をシングルページで表示するときはアイキャッチ画像を大きく、記事を全文表示にする方法について。

【記事抜粋の表示例】
twentytwelve-header7

シングルページか否かでアイキャッチ画像の表示サイズを変更する【Twenty Twelve】アイキャッチ画像の表示位置とサイズのカスタマイズ記事を以前書きました。それを土台にして、トップページなどでは記事抜粋表示にするためにcontent.phpファイルを内容を編集します。

content.phpファイルのdiv.entry-contentの部分を以下のコードに変更します。
シングルページ以外では、アイキャッチ画像をサムネイル表示して記事抜粋に、シングルページではアイキャッチ画像を大サイズにして記事全文を表示するコードになります。

<div class="entry-content">
	<?php if(!is_single()): ?>
			<?php the_post_thumbnail('thumbnail'); ?>
			<?php the_excerpt(); ?>
	<?php else : ?>
			<?php the_post_thumbnail('large'); ?>
			<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentytwelve' ) ); ?>
			<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
	<?php endif; ?>
</div><!-- .entry-content -->

追記:投稿で抜粋を書いている場合

<div class="entry-content">
	<?php if(!is_single()): ?>
			<?php the_post_thumbnail('thumbnail'); ?>
			<?php if( !has_excerpt()) : ?>
					<?php the_excerpt(); ?>
			<?php else : ?>
					<?php echo get_the_excerpt() . '<a href="' . get_permalink()  .  '">...続きを読む</a>'; ?>
			<?php endif; ?>
	<?php else : ?>
			<?php the_post_thumbnail('large'); ?>
			<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentytwelve' ) ); ?>
			<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
	<?php endif; ?>		
	</div><!-- .entry-content -->
スポンサーリンク

コメント

タイトルとURLをコピーしました