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

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

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

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

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

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

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

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

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

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

つまり以下のようなCSSを書きます。

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

固定ページのidを知る方法

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

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

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

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

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

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

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

そのため、この222のページのヘッダーを非表示にしたい場合にはこのidを使います。

では、このidを指定してCSSを書いてみましょう。

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

ヘッダーを非表示にする：

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

フッターを非表示にする

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

以上です。

意外とカンタンなのです。

ちなみに、このようなCSSによるカスタマイズがよくわからないという方は下記の記事が参考になるので、読みながら試してみてください。

【追加cssとは】wordpressで追加CSSの使い方・CSS編集方法