ワードプレステーマ「cocoon」固定ページ 投稿日 非表示

もっともポピュラーなワードプレステーマcocoon(コクーン)は、固定ページも投稿ページも自動的に日付が表示されます。記事の日付は、作成日や編集された更新日が表示されて便利ですが、ほとんど更新されない固定ページの「プロフィール」「プライバシーポリシー」「お問い合わせフォーム」などの日付は不要なので非表示にします。通常のcocoon設定にはない項目なのでCSSを追加する必要があります。

固定ページの日付を非表示にする方法

全ての固定ページの日付を非表示にする

全ての固定ページで日付を非表示にする方法です。
子テーマのstyle.cssに下記コードを追加します。

/*全固定ページの日付非表示*/
.page
 .date-tags {
display: none;
}
/*全固定ページの日付非表示*/
.date-tags {
display: none;
}

これで、固定ページの日付が非表示になります。

個別に固定ページの日付を非表示にする

固定ページに「プロフィール」「お問い合わせ」「プライバシーポリシー」などがある場合、全ての日付を非表示にするのではなく、例えば「プライバシーポリシー」だけを非表示にすることができます。。

まず日付を非表示にしたいページの記事IDを調べます。
① WordPressのダッシュボードから「固定ページ」→「固定ページ一覧」を選択します。
記事IDを調べる 固定ページ→固定ページ一覧
② 固定ページ一覧の「ID」をメモします。
固定ページの一覧表から、非表示にしたいページの記事IDの数字を確認して、メモしておきます。

子テーマのstyle.cssに下記コードを追加します。
「post-〇〇」の〇のところに、先程メモした記事IDの数字を入れます。

非表示ページが1つの場合

/*個別固定ページの日付非表示*/
.post-〇〇 .date-tags {
display: none;
}

非表示ページが複数の場合

/*個別固定ページの日付非表示*/
.post-〇〇 .date-tags,
.post-〇〇 .date-tags,
.post-〇〇 .date-tags {
display: none;
}

上記の複数例は非表示ページが3つの場合です。
.post-〇〇 .date-tags,」が1ページ分となるので、さらに増やしたい場合は「.post-〇〇 .date-tags,」を追加してください。

当初に設定しておくと良い非表示

記事内の背景色

/*記事内の背景色*/
.main{
background-color: #fff;
}

更新日を非表示にする

/*更新日を非表示にする*/
.post-update{
display: none;
}

オーサー名を非表示にする

/*オーサー名を非表示にする*/
.post-update{
display: none;
}

カテゴリーウィジェット 非表示のカテゴリー

/***********************************
**カテゴリーウィジェット 非表示のカテゴリー2023.1.1
************************************/
.cat-item.cat-item-2, .cat-item.cat-item-8,
.cat-item.cat-item-13, .cat-item.cat-item-19
{
display: none;
}

CSSを追加する方法

子テーマのstyle.cssに追加する方法

子テーマのスタイルシートにコードを追加する場合
※テーマをアップグレードしても有効です。

WordPressのダッシュボードから
「外観」→「テーマエディター」で、Cocoon Child スタイルシート(style.css)に追加します。

子テーマスタイルシートにコードを追加する
これまでにコードの追加をしている場合は、その後ろに追加します。
コードを追加したら、「ファイルを更新」を押して保存します。

【追加CSS】に追加する方法

Cocoon Child スタイルシートに追加する方法のほかに、簡単にできる【追加CSS】があります。
※テーマをアップグレードすると消されて無効になる。

WordPressのダッシュボードから
「外観」→「カスタマイズ」→追加CSS画面
追加CSS画面にコードを追加する
コードを追加したら、「公開」を押します。

スポンサーリンク

↑記事が良かったら「いいね」をお願いします。お読みいただきありがとうございました。

くま吉

2010年から「ビジネスサイト制作教室」を主宰してきた現役ウエブデザイナーです。多くの生徒さんと一緒に、ワードプレスによるサイト作りに携わった経験を生かしてこの講座を始めました。

くま吉をフォローする
コクーン
くま吉をフォローする
スマホ・パソコン・ワードプレスの使い方

コメント