採用サイト制作に最適なWordPressテーマ「ISSUE」の機能概要

ワードプレステーマ別

TCDテーマSwitch:トップページ・ブログ一覧ページ・詳細ページのアイキャッチ画像を非表示にする方法

Q.ブログのサムネイル画像を非表示にするにはどうすれば良いのでしょうか。

Switchのブログ記事のアイキャッチ画像につきましては、画像左上にコンテンツを重ねるようなレイアウトにて投稿日付を表示しております。
画像のみを非表示にすることはCSSの調整にて容易かと存じますが、この投稿日付部分についても調整が必要となってまいります。

※なお、ブログアーカイブページ・記事詳細ページの日付については、
【TCDテーマ>ブログ>表示設定>アーカイブページ・記事詳細ページ共通の設定の「日付を表示する」チェック】を外すことで非表示に頂けます。
 
▼変更箇所イメージ(トップページ)
変更箇所イメージ
▼変更後のイメージ(トップページ)
変更後のイメージ

A.下記の方法でカスタマイズしてください。

・トップページ

1. 本来の日付表示を非表示にする
編集するファイル: ホームページ (front-page.php)
編集する箇所: 318~330行目
削除または<!– –>で囲んでコメントアウトします。

<?php if ( $dp_options['show_date'] ) : ?>
(中略)
<?php endif; ?>

2. 記事タイトルの上に日付を表示させる
編集するファイル: ホームページ (front-page.php)
編集する箇所: 341行目

<div class="p-article01__content">

 ↓ 一行追加します。

<div class="p-article01__content">
<p class="p-article09__date"><time class="entry-date updated" datetime="<?php the_modified_time('c'); ?>"><?php the_time('Y.m.d'); ?></time></p>

3. カスタムCSSで画像を非表示にし、他レイアウトを調整する

.home .p-blog-list .p-article01__img { display: none; }
.home .p-blog-list .p-article01 { border-top: 1px solid #ddd; }
・ブログ一覧ページ

1. 本来の日付表示を非表示にする
編集するファイル: index.php
編集する箇所: 28~40行目
削除または<!– –>で囲んでコメントアウトします。

<?php if ( $dp_options['show_date'] ) : ?>
(中略)
<?php endif; ?>

2. 記事タイトルの上に日付を表示させる
編集するファイル: index.php
編集する箇所: 51行目

<div class="p-article01__content">

 ↓ 一行追加します。

<div class="p-article01__content">
<p class="p-article09__date"><time class="entry-date updated" datetime="<?php the_modified_time('c'); ?>"><?php the_time('Y.m.d'); ?></time></p>

3. カスタムCSSで画像を非表示にし、他レイアウトを調整する
カテゴリー・タグアーカイブページにも適用される記述にしています。

.blog .p-blog-list .p-article01__img,
.archive .p-blog-list .p-article01__img { display: none; }
.blog .p-blog-list .p-article01,
.archive .p-blog-list .p-article01 { border-top: 1px solid #ddd; }
・ブログ詳細ページ

1. 本来の日付表示を非表示にする
編集するファイル: single.php
編集する箇所: 30~42行目
削除または<!– –>で囲んでコメントアウトします。

<?php if ( $dp_options['show_date'] ) : ?>
(中略)
<?php endif; ?>

2. カテゴリーの右隣に日付を表示させる
編集するファイル: single.php
編集する箇所: 54行目

<p class="p-entry__meta">
  <a href="<?php echo get_category_link( $categories[0]->term_id ); ?>"><?php echo esc_html( $categories[0]->name ); ?></a>
</p>

 ↓ 一行追加します。

<p class="p-entry__meta">
  <a href="<?php echo get_category_link( $categories[0]->term_id ); ?>"><?php echo esc_html( $categories[0]->name ); ?></a>
</p>
<p class="p-article09__date"><time class="entry-date updated" datetime="<?php the_modified_time('c'); ?>"><?php the_time('Y.m.d'); ?></time></p>

3. カスタムCSSで画像を非表示にし、他レイアウトを調整する

.single-post .p-entry__img { display: none; }
.single-post .p-entry__meta { float: left; }
.single-post .p-entry__title { clear: both; }
.single-post .p-article09__date { margin-left: 150px; padding-top: 10px; }

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事