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

公開日: 更新日: Simplicity
CMSのアイキャッチ画像




【この記事の目次】- 必要な部分だけ見たいときにどうぞ - [表示する]

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 –>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

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

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

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

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

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

.related-entry-content {
    margin-left: 110px;
}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

を子テーマのCSSへコピーして
.related-entry-content {
    margin-left: 0px;
}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

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

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

.related-entry-content {
   margin-left: 0px;
   border-bottom: 1px dashed #000000;
}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

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

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

.related-entry-snippet{
font-size:14px;
}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

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

最後に

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

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

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

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】