【WordPress】特定の固定ページのみ、ヘッダー/フッターを非表示にする方法

明日は和歌山に寺参りに行きます、アボカドです。

今回はWordPressを使用している方向けに
特定の固定ページのみ、ヘッダー/フッターを非表示にする方法を紹介します。
(SANGOを使用しているのでその方は、完全にそのまま流用出来ます。)

↓↓↓ 上部ヘッダーと下部のフッターを非表示に!! ↓↓↓

通常ヘッダーやフッター部分には

・サイトタイトル(サイト名 例:きなことアボカド)
・メニューやカテゴリ一覧

などが表示されていると思います。

本来であれば、
サイトの顔となるサイトタイトルなどは
SEO対策の面から見ても、表示しておくことが無難ですが
ページの内容によってはヘッダーやフッターを消したいシーンがあると思いますので
htmlやCSSがわからなくても、簡単にできる手順を紹介していきます!!

ちなみに私の場合は、
・結婚式の2次会出欠アンケートをサイトで集めて楽にcsv化したい
・ブログを運営していることをプライベートの友人にバレたくない
を満たすためにこの方法を使いました。(笑)

手順はこちら↓↓

手順1:固定ページの作成

最初はヘッダーやフッターを非表示にしたい固定ページを作成していきます。

固定ページの作成はWordPressのダッシュボードの左メニューから
「固定ページ>>新規作成」を選択して、
新規の固定ページを作成し、公開してください。
(後で編集できますので、一旦タイトルとか中身はどんなものでもいいです。)

※私の場合は、pass付きのアンケートURLを作りたかったので
「ステータスと公開状態>>表示状態」のみ「パスワード保護」として公開し、
残りはヘッダーとフッターの非表示が完了した後に、サイトの中身を更新しました。

手順2: 固定ページのID取得

次に固定ページのID取得をしていきます。
後ほどこのIDを使って、特定のページにのみ、ヘッダーとフッターの非表示を適用します。

【参考】「固定ページのID」ってなに??
WordPressでは、投稿ページ/固定ページなどに自動的に割り当てられる「ID」が存在します。
なので100記事投稿すれば、100個のIDが存在することになります。

①固定ページのID取得はWordPressのダッシュボードのメニューから
固定ページ>>固定ページ一覧」を選択。
すると先ほど作成した、固定ページが一覧に表示されていると思うので
マウスカーソルを作成した固定ページの「タイトル部分」に合わせてください。

②すると、画面左下にURLが表示されます。
ここのURLの「post=○○と表示されていると思います。
この〇〇に当てはまる数字が固定ページの「ID」です。

下の画像が例です。(ここでは「178」がIDです。)

手順3:固定ページのCSSを追加

最後に特定の固定ページに対してのみ
ヘッダーとフッターの非表示をするように、子テーマにCSSを追加していきます。
(子テーマ/CSSが何者かわからない初心者でもできます。)

WordPressのダッシュボードの左メニューから
 「外観>>カスタマイズ」を選択してください。
 選択後、下記のページが開かれます。

②「追加CSS」を選択するとテキストボックスが表示されると思いますので
 下の例に沿って入力してください。(例ではpost=178の場合です。)

・特定の固定ページのヘッダーを非表示にしたい場合

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

・特定の固定ページのフッターを非表示にしたい場合

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

・全ページのヘッダーを非表示にしたい場合

.header{
   display:none;
}
「page-id-〇〇」の1文それぞれを追加してやれば、
複数の固定ページに対して非表示にすることも可能です。
また、「.header」を
「.page-title」に変更すると「ページタイトル」が非表示になり
「.breadcrumb」に変更すると「パンくずリスト」が非表示になります。

ソースを見ると、何を設定すると何が非表示になってくれるとかわかると思いますが、興味があれば別途調べてみてください。
(html / css / classなどで検索すれば出てきます。)

③最後に、公開を押して完了です!
 ページを確認してみてください。

おわりに

無事、ヘッダー/フッターの非表示はできましたでしょうか?
ニッチな内容と思いますが、最後まで読んでいただきありがとうございました!

2 COMMENTS

ゆり

LP作成にと探していた内容だったので大変勉強になりました。

複数の固定ページに適用する際、
>「post-id-〇〇」を追加してやれば、
これはどこに追加したらいいですか?

返信する
きなこ

コメントありがとうございます!
一部文章に誤りがあったので更新しました。。
「post-id-○○」としてましたが「.page-id-○○」が正しいです。

すでに解決済みかもしれませんが、
追加する部分については、同じくCSSのテキストボックス内で
>.page-id-XX, .page-id-YY .header{
> display:none;
>}
もしくは
「.page-id-XX .header{~~~}」
の後に同じ「.page-id-YY .header{~~~}」の一文を追加してあげればできると思います。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です