2014年5月19日月曜日

WordPressのTwenty Fourteenのアイキャッチは消すけど、サムネイルは残す方法

Twenty Fourteenのアイキャッチを消す方法をググると、

content.phpの

<?php twentyfourteen_post_thumbnail(); ?>

をコメントアウトしろ、という記事がたくさん出てきます。
しかしこれはサムネイル表示の機能そのものでもあるので、
これを消してしまうとスマホで見た時のサムネイルも消えてしまうのです。
記事ページのアイキャッチは鬱陶しいけど、スマホでの記事一覧のサムネイルは
表示しておきたい人のほうが多いのではないでしょうか。

スマホで見たときのサムネを残しつつ、記事ページのでっかいアイキャッチを消すのは、

1.記事単体ページでのアイキャッチを消す
2.記事一覧ページで画面サイズが大きい時のアイキャッチを消す

の2段階の処理が必要です。



記事単体ページのアイキャッチを消すには、

wp-content/themes/twentyfourteen/inc/template-tags.php

を変更します。

これの175行目(ほぼ最下部)あたりが

<div class="post-thumbnail">
<?php
 if ( ( ! is_active_sidebar( 'sidebar-2' ) || is_page_template( 'page-templates/full-width.php' ) ) ) {
  the_post_thumbnail( 'twentyfourteen-full-width' );
 } else {
  the_post_thumbnail();
 }
?>
</div>

こうなっていますので、2行コメントアウトしてください。

<div class="post-thumbnail">
<?php
 if ( ( ! is_active_sidebar( 'sidebar-2' ) || is_page_template( 'page-templates/full-width.php' ) ) ) {
//  the_post_thumbnail( 'twentyfourteen-full-width' );
 } else {
//  the_post_thumbnail();
 }
?>
</div>




もうひとつ、記事一覧ページで画面サイズが大きい時のアイキャッチを消すには、

wp-content/themes/twentyfourteen/style.css

の3077行目あたりが

@media screen and (min-width: 401px) {
 a.post-thumbnail:hover img {
  opacity: 0.85;
 }

となっていますので、

@media screen and (min-width: 401px) {
 a.post-thumbnail img {
  display: none;
 }


こう書き換えて下さい。


これで「アイキャッチは消すけど、サムネイルは残す」が達成できます。