Simplicityで出力される関連記事のサムネイル(アイキャッチ画像)を非表示にする方法ほか

WordPressのテーマで一番気に入って使わせていただいている「Simplicity」。いろいろなところをカスタマイズしているので、原型をとどめておらず、骨格??位しか分からない感じにはなっていますが、当然当サイトもこのテーマを使用しています。

で、今回のお題は「テキスト主体のサイトなので関連記事の表示からアイキャッチ画像を削除したい」ということ。

Simplicityのいいところである、ビジュアル的な部分をまたまた破壊してしまう行為なのですが、このサイトのようにアイキャッチ画像を使っているけどあまり意味がないという感じのサイトでは、逆にアイキャッチ画像が表示されることでごちゃごちゃ感が出てしまう、そんな場合のカスタマイズです。

ここまで読んで、「そんなのカスタマイザーでできるでしょ!!」と思った方は正解です

もともとこのテーマでは、カスタマイザーでアイキャッチ画像を非表示にするためのオプションが備わっていますので、そこでサムネイル表示の項目のチェックを外せば、すぐにアイキャッチ画像を非表示にできます。

が、それだと共通コードで呼び出しているのでアーカイブ一覧からもアイキャッチ画像が非表示になってしまいます。

今回はアーカイブ一覧ではアイキャッチ画像を表示したいけど各投稿に表示する関連記事はアイキャッチなしにしたいという大変身勝手なカスタマイズです。

スポンサーリンク

該当するPHPファイルをカスタマイズする

該当しそうなファイルは「related-entries.php」「related-entry-thumbnail-card.php」「related-entry-card.php」の3つ

動作としては、カスタマイザーの設定により、「related-entries.php」から「related-entry-thumbnail-card.php」か「related-entry-card.php」のどちらを呼び出すかの忖度選択がされています。

ファイル名からも想像できるように、「related-entry-card.php」がリスト表示になりますから、こちらをカスタマイズします。

とはいえ、後で元に戻すこともあると思いますから、必ず子ページへコピーしてから行ってくださいね

やり方はざっくり、下のコードを削除してしまえばいいです

<div class="related-entry-thumb">
    <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
    <?php if ( has_post_thumbnail() ): // サムネイルを持っているとき ?>
    <?php echo get_the_post_thumbnail($post->ID, 'thumb100', array('class' => 'related-entry-thumb-image', 'alt' => get_the_title()) ); //サムネイルを呼び出す?>
    <?php else: // サムネイルを持っていないとき ?>
    <img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" class="no-image related-entry-no-image" />
    <?php endif; ?>
    </a>
  </div><!-- /.related-entry-thumb -->

ここで、サムネイルがあるかどうか(あれば表示、なければ代替の画像を表示)の判断をしつつ画像を表示するようにしています。

これで簡単にサムネイル画像は非表示にできます。

以上、終わり・・・ん??デザインがおかしい、サムネイル部分がぽっかり空洞になってる!!の解消方法は次に・・・

見た目をカスタマイズする

サムネイルの部分の幅だけタイトルなどの部分を右に寄せるようにCSSが書かれているので

.related-entry-content {
    margin-left: 110px;
}

を子テーマのCSSへコピーして

.related-entry-content {
    margin-left: 0px;
}

としてやれば、右に寄った部分がなくなります、至って簡単!!

ただこれだけでは芸がないのでもう少しカスタマイズします。

.related-entry-content {
   margin-left: 0px; 
   border-bottom: 1px dashed #000000;
}

というふうにすると、関連記事ごとに1ピクセルの黒色の破線を入れなさいよ!!というのを追加することができます。サムネイルがあったときは何となくサムネイルの右がタイトルなどなのでリスト的に見えましたが、サムネイルがなくなると殺風景なのでこのようにするといいと思います。

また、何もカスタマイズしていないと、タイトルの文字と抜粋の文字の大きさが似ていてちょっと区別しにくく見えるので、抜粋(記事の内容)の部分の文字サイズを小さくします。この部分の文字の大きさは通常はカスタマイザーの文字の大きさに準拠しますが、ここもカスタマイズしやすいようにセレクタを設けてもらえてますので

.related-entry-snippet{
font-size:14px;
}

を子テーマのCSSへ追記すれば完了です。14pxとなっている文字の大きさは適当に変更しましょう。

最後に

「Simplicity」をカスタマイズしていて本当に感心するのは、「ここを変えたいなぁ」と思ったものが部品化(ファイル化)されていること、ここのデザインだけ変えたいなぁと思うところへきちんとCSSセレクタが入っているところですね。

作者のブログや「Simplicity」のサイトを見ると作者自身が使うときにこうなってれば・・・と思うところをどんどん盛り込んで作られているからこういう気の利いたテーマができるんですね。勉強になります。

私がWordpressでサイトを作るときには現状100%「Simplicity」というテーマを使っています。もちろん今ご覧になっているサイトも「Simplicity」で作ってます。公式サイトでもこのテーマについてすごく細かく解説されてますから今更書くこともないとも思いつつ、一人のユーザーとして私の言葉で紹介しようと思います。

というどれだけ「Simplicity」が使いやすいかを勝手に書いた記事がありますからついでに読んでみてくださいね。

役に立つ情報でしたらぜひSNSやメールでシェアしてください
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

メニューを表示できません

ページ先頭へ