WordPressテーマTCDのカスタマイズを研究するサイト

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; }

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

0

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCD LABOへのお問合せやご要望は
ご連絡フォーム をご利用ください。