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

こんにちは!CODE CLUB965のKです!

今回はWordPressの固定ページでヘッダーやフッターを非表示にする方法について書こうと思います。

テーマによっては、メニューの設定等は異なります。

しかし、投稿方法やカテゴリー、タグ等の設定やコンテンツにテキストや画像を投稿する設定は、どのテーマでも使い方は同じです。

ヘッダーやフッターは、SEO的に表示させておくのが無難ではありますが、ページによっては非表示にしておきたい場合もあるかと思います。

今回は初心者でも簡単にできる方法を書いておきます。

固定ページとは?作成方法

固定ページ

最初に、固定ページを作る方法についてご紹介します。

固定ページ作成の流れ

  1. 固定ページにマウスカーソルを合わせる
  2. 新規作成をクリック
  3. ページタイトル、本文、ディスクリプションを作成
  4. 公開をクリック

以上の流れで、作成します。

非表示にする手順

35080_s

まずは固定ページのIDを確認する

前提として固定ページは作成しておいてください。

固定ページを作成すると、固定ページごとに一意のIDが付与されますので、まずはそれを確認します。

WordPress管理画面のページ一覧を表示し、タイトルにカーソルを合わせると画面左下にURLが表示されます。

このURLの後半に「post=○○○」とあるのですが、これはページのIDになります。

wordpress管理画面

上記の画像の赤枠がURLですが、この画像だと「post=2」となっているのでIDが2だとわかります。

固定ページのCSSの記述を追加する

IDが分かったらあとはCSSの記述を追加するだけです。

管理画面の「外観 => カスタマイズ」を選択して移動したら、「追加CSS」という項目があるので選択します。

テキストボックスが表示されるので後は記述をするだけです。

先程確認したIDを「page-id-〇〇」のように書けばOKです。
下記の例はIDが「2」の場合です。

■ ヘッダーを非表示にする場合
.page-id-2 .header{
   display:none;
}

■ フッターを非表示にする場合
.page-id-2 .footer{
   display:none;
}

「.header」や「.footer」以外にも設定したいものがあれば、その部分の記述を変えてあげればできます。

あとは公開すれば完了です。

エンジニア育成をサポート

242905

今回ご紹介した内容以外にも特定のページで変更したいものがある場合は、上記と同じ方法でできるので試してみて下さい。

htmlコードやちょっとした使い方を知っておきたいと思ったことはありませんか?

CODE CLUB965では、ご指定をいただきましたら、その内容に沿ったオリジナルのカリキュラムをご用意いたします。

トップページをはじめ、WordPressを使って、もう少しボタンや各種機能の変更等の更新を行うのは、外注を使うのではなく、内製化したいという企業様向けにエンジニア人材育成をサポートいたします。

お気軽にご相談ください。

それでは、また!

Follow me!