stinger5でアイキャッチ画像を非表示にしてみた
『stinger5』はwordpressで人気のテーマの一つ。
stinger5は一覧表示でアイキャッチ画像をデフォルト表示するが、
もし記事にアイキャッチ画像が未設定だと
“no image"のデフォルト画像が表示され見栄えが悪くなってしまう。
そこでアイキャッチ画像が未設定なら画像を表示しないようにする。
修正するページ
- トップページの記事一覧
- サイドバーの新記事一覧
- 記事ページ下部の関連記事一覧
wordpressのダッシュボードから「外観」ー「テーマの編集」を選択、
各該当ページの内容を編集する。
編集内容は3ファイルともほぼ同じ、以下のとおり。
トップページの記事一覧 itiran.php
〜〜〜〜〜 <dt> <a href="<?php the_permalink() ?>" > <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php the_post_thumbnail( 'thumb150' ); ?> <?php else: // サムネイルを持っていないときの処理 ?> <!-- <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" /> ここをコメントアウト! --> <?php endif; ?> </a> </dt> <?php if ( has_post_thumbnail() ): // この行を追加! ?> <dd> <?php else: // この行を追加! ?> <dd class="no_thumbnail"> <!-- この行を追加! --> <?php endif; // この行を追加! ?> 〜〜〜〜〜
5〜8行目は削除してもOK
サイドバーの新記事一覧 newpost.php
〜〜〜〜〜 <dt> <a href="<?php the_permalink() ?>"> <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php the_post_thumbnail( 'thumb150' ); ?> <?php else: // サムネイルを持っていないときの処理 ?> <!-- <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" /> ここをコメントアウト! --> <?php endif; ?> </a> </dt> <?php if ( has_post_thumbnail() ): //この行を追加! ?> <dd> <?php else: // この行を追加! ?> <dd class="no_thumbnail"> <!-- この行を追加! --> <?php endif; //この行を追加! ?> 〜〜〜〜〜
5〜8行目は削除してもOK
記事ページ下部の関連記事一覧 kanren.php
〜〜〜〜〜 <dt> <a href="<?php the_permalink() ?>"> <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php the_post_thumbnail( 'thumb150' ); ?> <?php else: // サムネイルを持っていないときの処理 ?> <!-- <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" /> ここをコメントアウト! --> <?php endif; ?> </a> </dt> <?php if ( has_post_thumbnail() ): //この行を追加! ?> <dd> <?php else: //この行を追加! ?> <dd class="no_thumbnail"> <!-- この行を追加! --> <?php endif; //この行を追加! ?> 〜〜〜〜〜
5〜8行目は削除してもOK
最後にスタイルシート修正 style.css
以上の修正だけだと、
アイキャッチ画像が表示されていた領域が空白となってしまう。
タイトルの文言を左に詰めるためにスタイルシートに以下を追記
/*media Queries タブレットサイズ ----------------------------------------------------*/ @media only screen and (max-width: 780px) { #topnews dd.no_thumbnail, #kanren dd.no_thumbnail{ padding-left: 0; } 〜〜〜〜 } /*media Queries タブレットサイズ ----------------------------------------------------*/ @media only screen and (min-width: 380px) { #topnews dd.no_thumbnail, #kanren dd.no_thumbnail{ padding-left: 0; } 〜〜〜〜 } /*media Queries PCサイズ ----------------------------------------------------*/ @media only screen and (min-width: 780px) { #topnews dd.no_thumbnail, #kanren dd.no_thumbnail{ padding-left: 0; } 〜〜〜〜 } dd.no_thumbnail{ padding-left: 0; }
各mediaqueryの中にno_thumbnailセレクタのスタイルを追記
最後に念のためmediaquery外の箇所にもdd.no_thumbnailのスタイルを追記しておいた