WordPressサイトに1カラムのランディングページを含める方法

作成中のWordPressサイトにランディングページを混ぜるには、どうすれば良いでしょうか。たとえば次のような1カラムの宣伝ページを作りたいことがあります。

「ランディングページとは何か」は別にして、次のような要件を満たしたいところです。

ヘッダー・フッター・サイドバーは不要
フォントサイズを全体的に大きめに
できれば現在のテーマと共存させたい

ネックになるのは現在のテーマを使いつつ、ヘッダーやフッターが存在しない1カラムのページを作成できるかという点です。

単独のランディングページ用のサイトであればThe Landing Pageのようなランディングページ用のテーマを使う方法があります。

ここでは、CSSを使った解決策を紹介します。

以下はテーマにBizVektorを使う例で説明しますが、他のテーマでも考え方は同じです。ちなみにBizVektorなど、新規追加する固定ページで「サイドバーなし」のような1カラムページ用のテンプレートを選べるテーマもありますが、この記事ではデフォルトテンプレートを使う前提で話を進めます。

既存デザインを変更せずにランディングページを作る

まずは、テスト表示用にランディングページを作成しましょう。投稿でも構いませんが、ここでは固定ページとします。

公開されたページ（下書き中でも大丈夫です）のHTMLソースを見て、bodyタグに付いているclass名を調べます。

この「page-id-167」の部分がページ固有のclass名です。ページごとに異なる番号が付加されます。このclassに対してCSSを設定すれば、そのページだけにスタイルを適用することができます。

つまり、

ランディングページ（page-id-167）のみヘッダーやフッターを非表示に
その他のページのスタイルは変更しない

のように同じサイト内で別々のスタイルを適用することができます。

固定ページではなく投稿で作成した場合は「postid-167」のようなclass名が付加されます。

試しに「page-id-167」のclass名を使って子テーマのstyle.cssに次のようなCSSを入力してみましょう。「167」は作成したページに合わせて変更してください。

/* BizVektorのヘッダーを削除 */
.page-id-167 #headerTop,
.page-id-167 #header,
.page-id-167 #gMenu {
    display: none;
}

このCSSはBizVektorの例です。BizVektor以外をお使いの場合はCSSセレクタを調べて修正してください。

これにより、ランディングページのヘッダー（ヘッダーロゴやグローバルナビゲーションなど）が消えます。

喜ぶのはまだ早いです。他のページに影響が出ていないか確認しましょう。

うまくいっているようであれば、次のCSSで一気に不要な項目を消してしまいましょう。上記のCSSを置き換えてください。

/* BizVektorのヘッダー・フッター・サイドバーを非表示に */
.page-id-167 #headerTop,
.page-id-167 #header,
.page-id-167 #gMenu,
.page-id-167 #pageTitBnr,
.page-id-167 #panList,
.page-id-167 #back-top,
.page-id-167 #footerSection,
.page-id-167 #main #container #sideTower {
    display: none;
}

これでヘッダー・フッター・サイドバーなどがスッキリ消えます。

あとはランディングページ風に仕上げるCSSを自由に入力しましょう。ここでは、フォントサイズを大きくしてコンテンツ全体を中央寄せにしています｡

/* ランディングページのフォントを設定 */
.page-id-167 {
    font-size:30px;
    font-weight:bold;
}

/* コンテンツエリアを中央寄せに */
.page-id-167 #main #container #content {
    margin: 0 auto;
    float: none;
    width: auto;
    text-align: center;
}

ふわっと仕上げです。不要なスタイルは取捨選択してください。

表示結果は次のようになります。