投稿ページに表示されるタイトルを非表示にする(WordPress)

― 広告 ―

投稿ページに表示されるタイトルを非表示にする(WordPress)
1. タイトルを非表示にする設定(CSSで非表示)
  1. CSSのテーマの編集【style.css(子テーマ)】
  2. その他の記事タイトルの非表示設定
    1. それぞれのcssクラス設定の条件
    2. style.css(子テーマ)へ追加する各コード例
2. まとめ

投稿ページに表示されるタイトルを非表示にする(WordPress)

記事を投稿すると自然に投稿画面の上部にタイトルが表示されますが、装飾もされていないし、自分の見出し文とかぶったりと以前から非表示にしたいなぁーと思ってたので調べてみました。

※私の例だと、アイキャッチ画像内のタイトルと上部のタイトルがかぶってます。

????　????
こんな感じにスッキリ!!

タイトルを非表示にする設定(CSSで非表示)

投稿ページの記事タイトルを非表示にする設定には、CSSのテーマの編集【style.css(子テーマ)】にコードを入力する必要があります。

CSSのテーマの編集【style.css(子テーマ)】

※WordPressで、Cocoon使用時例です。

【外観】➡【テーマエディター】を選択
【スタイルシート style.css】選択
【子テーマ用のスタイルを書く】の下記部分に CSSのコードを記入
【ファイルを更新】ボタンで更新

※CSSコード追加詳細(後でわかる用にメモを記入してあります)➡/* 全投稿ページで非表示 */

/* 全投稿ページで非表示 */
.post .entry-title {
    display: none;

その他の記事タイトルの非表示設定

それぞれのcssクラス設定の条件

投稿タイトルのclassは【entry-title】
投稿全体部分に【post_class()】でclassを出力

固定ページでは【.page】
投稿ページでは【.post】
個別ページでは【.post-[id]】

※これらのCSSクラスを使用して、特定の投稿、または同じカテゴリ（または投稿形式）が割り当てられた投稿にスタイルを設定できます。

style.css(子テーマ)へ追加する各コード例

/* 全固定ページで非表示 */
.page .entry-title {
    display: none;
}
/* 全投稿ページで非表示 */
.post .entry-title {
    display: none;
}
/* 特定の投稿IDで非表示 .post-(例:post=77)*/
.post-77 .entry-title {
    display: none;
}

テーマによっては、固定ページ・投稿ページ・個別記事と特定方法を探し出す必要があります。
詳しくはWordPressの『Code Reference』参照まで。