【WordPress】特定のページで「ヘッダー」や「フッター」を非表示にする方法

ケケンタ

WordPressで一部のページの「ヘッダー」や「フッター」を非表示にしたいんだけどやり方がわからない……

このようなお悩みをお持ちの方に向けて

WordPressの特定のページで
「ヘッダー」や「フッター」を非表示にする方法

を解説します。

＼Web制作を仕事にしたいなら／

こちらの記事で

Web制作コース独学プラン

についてご紹介しています。

Web制作を10万円以下で学べるオンライン型プログラミングスクール｜忍者CODE

まずは無料相談してみる >>

￣￣￣

「仕事が忙しい」、「すぐに欲しい商品がある」という方、必見のサービス 

　Amazon Prime　

by Amazon

日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる

最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る　
※ご注文の時間帯やお住まいの地域によります。

Amazonプライムの無料体験は「何度でも」利用可能

Amazonプライムの無料体験を何度も利用する方法 

• Amazonのカート画面で表示される「Amazon Primeの無料体験の案内」をクリック
• 会員の自動更新を解除しておく＝期限が来たら自動解約
• １～３ヶ月ぐらいするとAmazonのカート画面で再度無料体験の案内が表示される

商品をカートに入れ、カート画面に行ったときに「無料体験の案内」が表示されていれば
1ヶ月間の無料体験を受け取ることが可能です。

ケケンタ

僕自身、過去に少なくとも３回は無料体験を利用しています。

※条件は不明ですが、解約後に一定期間が経過すると、再び「Amazon Prime無料体験の案内」が表示され、再度利用することが可能です。

Amazonで買い物をする　>>

WordPressで特定のページの「ヘッダー」、「フッター」を非表示にする

具体的な作業の流れは以下の通りです。

【手順①】「ヘッダー」、「フッター」を非表示にしたいページの「ページID」を確認する

STEP

管理画面で「ヘッダー」、「フッター」を非表示にしたいページの「編集画面」を開く

STEP

URLに記載されている「ページID」を確認する

【手順②】「追加CSS」に「ヘッダー」、「フッター」を非表示にするためのプロパティを記述する

STEP

「追加CSS」を開く

「外観」→「カスタマイズ」→「追加CSS」を開く

STEP

CSSを記述して保存する

STEP1で「追加CSS」を開いたら、下記のCSSを追記します。

対象のページが「固定ページ」なのか「投稿ページ」なのかによって記述内容（class名）が若干変わるため気を付けましょう。

固定ページの場合

.page-id-ページID header {
  display: none;
}

/*例*/
.page-id-9 header {
  display: none;
}

投稿ページの場合

.post-id-ページID header {
  display: none;
}

/*例*/
.post-id-5 header {
  display: none;
}

CSSを追記したあとは忘れずにページ上部にある「公開」ボタンを押しましょう。

ケケンタ

以上の手順によりWordPressで特定ページの「ヘッダー」や「フッター」を非表示にすることが可能です！

ページIDが分かれば特定ページのカスタマイズが簡単

いかがだったでしょうか。

今回のようにそのページのIDが分かれば、そのページに対してだけCSSを設定することが可能です。

今回は「ヘッダー」、「フッター」を非表示にするというピンポイントな内容でしたが、CSSの知識があれば他にも色々なカスタマイズも可能ですので、ぜひ挑戦してみて下さい。

ケケンタ

それでは、最後までご覧いただきありがとうございました！

当ブログではWordPressやWeb制作、PHPの情報を発信しています。
ご興味のある方は他の記事もご覧いただけると嬉しいです。