社名変更のお知らせ(2月~)

WordPressで固定ページだけヘッダーやフッターを非表示にする方法【CSSだけ】

WordPressの特定の固定ページだけヘッダーを非表示にしたい、フッターを非表示にしたい。WordPressできれいなLPを創りたい。

「でも、やり方がわからない。。。」

とつまづいたのは私だけではないでしょう。WordPressの仕様を調べると解決策がありました!

結論、CSSをちょっと書くだけ。3分ほどの作業で非表示にできます!何なら好きな要素を自由に非表示にできます。

プラグインを入れる必要もありませんし、phpをいじる必要もありません。

方法は、WordPress管理画面の「カスタマイズ」→「追加CSS」に記述していくだけです。

そのため、この記事では、WordPressの特定のページのみに対してCSSを反映させ、ヘッダーやフッターを非表示にする方法を解説します。

特定の固定ページのヘッダー・フッターを非表示にする方法

WordPressの固定ページには、ページ固有のidが振られています。それをCSSのクラスとして「page-id-123」として指定します。

.page-id-123 .header{
   display:none;
}

固定ページのidの確認方法は以下のとおり。

管理画面ダッシュボードの「固定ページ」をクリック。固定ページ一覧が表示されると思います。

その後、特定の固定ページのタイトル下「編集」にカーソルをあわせます。(クリックしない。)

すると、ブラウザ右下に下記のような文字列が表示されるはずです。]

https://example.com/wp-admin/post.php?post=222&action=edit

post=222となっている部分に注目してください。

この「222」がその固定ページのidというわけです。idは必ず数字になっていて、そのページ固有の数値です。

そのため、この222のページのヘッダーを非表示にしたい場合には下記のコードを追加CSSとして記述します。

ダッシュボードから「カスタマイズ」→「追加CSS」に移動してください。そこで以下を記述します。

.page-id-222 .header{
   display: none;
}

これでヘッダーが非表示になります。

フッターを非表示にする場合には以下の通り。

.page-id-222 .footer{
   display: none;
}

特定の投稿(ブログ記事)のヘッダー・フッターを非表示にする方法

投稿(記事)に関しても同様のやり方でidを確認してからCSSを記述すればOKです。

ダッシュボードから投稿一覧を表示し、「編集」にカーソルを合わせてpost=123の部分を確認します。

それで分かったidを元に下記のようなCSSを記述します。

.post-123 .header{
   display: none;
}

注意すべきなのは、

”固定ページ” は「.page-id-123」と記述するのに対して、

”投稿” の場合には「.post-123」と記述することです。

CSSが反映されない時はそのあたりに注意してください。

以上、この記事ではWordPressの特定のページに対してCSSを反映させ、ヘッダー・フッターを非表示にする方法を解説しました。

ぜひ試してみてください。