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を反映させ、ヘッダー・フッターを非表示にする方法を解説しました。
ぜひ試してみてください。
この記事の著者
阿部 隼也
Abe Shunya
株式会社プッシュ 代表取締役社長・創業者。東京都出身。横浜市立大学在学中に当社を創業し、SEOなどデジタルマーケティング事業や、ChatGPT入門講座を代表とするプライムアカデミー事業を立ち上げた。技術も好きで、自らコードを書きながらサービスを開発する。
Twitter(X)アカウント