eye

Twenty Twelveのアイキャッチ画像を表示したい所に表示させる

この記事の所要時間: 1158

どうも、Noodle.(@Noodle1002)です。WordPressにあるアイキャッチ画像って便利ですよね。記事の内容をイメージさせる画像、または記事内で使用している画像を表示させることで印象がずいぶんと変わります。ただこのブログで使用しているWordPressのテーマ「Twenty Twelve」ですとトップページのような記事一覧でも、個別のページでも表示されるんですよね。

そこで記事一覧ならアイキャッチ画像を表示させ、単体記事なら表示されないように調整してみたいと思います。

Twenty Twelveのアイキャッチ画像を出し分ける|Webourgeon

こちら様の記事がドンピシャでした。のでそのままご紹介。テーマファイルの修正や改造、またテーマ自体の作成をしたことがある方なら朝飯前だと思います。content.phpファイルを調整してあげましょう。調整後のcontetn.phpを種明かしすると、以下の様なソースになっております。

<?php
/**
 * The default template for displaying content. Used for both single and index/archive/search.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?>

	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
		<?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
		<div class="featured-post">
			<?php _e( 'Featured post', 'twentytwelve' ); ?>
		</div>
		<?php endif; ?>
		<header class="entry-header">
			<?php if ( is_single() ) : ?>
			<h1 class="entry-title"><?php the_title(); ?></h1>
			<?php else : ?>
			<h1 class="entry-title">
				<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
			</h1>
			<?php endif; // is_single() ?>
			<?php if ( comments_open() ) : ?>
				<div class="comments-link">
					<?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentytwelve' ) . '</span>', __( '1 Reply', 'twentytwelve' ), __( '% Replies', 'twentytwelve' ) ); ?>
				</div><!-- .comments-link -->
			<?php endif; // comments_open() ?>

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

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

		<div class="entry-content">

<?php if ( is_search() ) : // Only display Excerpts for Search ?>
          <!--検索結果-->               <div class="entry-summary">
                    <?php the_post_thumbnail(); ?>
          <!--アイキャッチを表示-->
                    <?php the_excerpt(); ?>
           <!--抜粋を表示-->
               </div><!-- .entry-summary -->

               <?php elseif( is_home() || is_archive()) : ?>
            <!--トップページかアーカイブページだったら-->
               <div class="entry-content">
                <!--アイキャッチを表示-->
                    <?php the_post_thumbnail(); ?>
                    <?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?>
                <!--投稿の内容を表示-->
                    <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
               <!--前後の投稿へのリンク-->
               </div><!-- .entry-content -->

               <?php else : ?>
                  <!--そうじゃなかったら-->
               <div class="entry-content">
                    <!--アイキャッチはない-->
                    <?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?>
                <!--投稿の内容を表示-->
                    <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
               <!--前後の投稿へのリンク-->
               </div><!-- .entry-content -->
               <?php endif; ?>

		</div><!-- .entry-content -->

		<?php endif; ?>

		<footer class="entry-meta">
			<?php twentytwelve_entry_meta(); ?>
			<?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?>
			<?php if ( is_singular() && get_the_author_meta( 'description' ) && is_multi_author() ) : // If a user has filled out their description and this is a multi-author blog, show a bio on their entries. ?>
				<div class="author-info">
					<div class="author-avatar">
						<?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'twentytwelve_author_bio_avatar_size', 68 ) ); ?>
					</div><!-- .author-avatar -->
					<div class="author-description">
						<h2><?php printf( __( 'About %s', 'twentytwelve' ), get_the_author() ); ?></h2>
						<p><?php the_author_meta( 'description' ); ?></p>
						<div class="author-link">
							<a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
								<?php printf( __( 'View all posts by %s <span class="meta-nav">&rarr;</span>', 'twentytwelve' ), get_the_author() ); ?>
							</a>
						</div><!-- .author-link	-->
					</div><!-- .author-description -->
				</div><!-- .author-info -->
			<?php endif; ?>
		</footer><!-- .entry-meta -->
	</article><!-- #post -->

詳しい解説はWebourgeonさんにてご覧いただければと思います。簡単に説明すると条件分岐を使い、「○○の場合はアイキャッチ画像を表示させ、それ以外は表示しない」というソースを組んでいるんですね。

ちなみに私はアイキャッチ画像をクリックすると個別記事へ移動するように調整していたり、サイズを調整していたりもしますが、その辺りはまた今度ご紹介したいと思います。

それでは、これにて。

photo by: helgabj

Twenty Twelveのアイキャッチ画像を表示したい所に表示させる」への1件のフィードバック

  1. ピンバック: TwentyTwelveのカスタマイズ② | My Dear Robi-週刊ロビ組立日誌

コメントを残す