同サイト上でLPを作る方法とCSS切り替えのコツ【WordPress】

コーポレートサイトやサービスサイト内で「採用情報専用ページ」を作りたいなど、サイト内にランディングページ（LP）を作りたい場面は多いものです。

別ドメインやサブドメインを作って新規サイトとして作る方法もありますが、サイトが２つになってしまうので管理コストが増えるのが悩みどころ。

しかし、実はWordPressの固定ページを上手く使えば、同サイト上でLPを作成しつつ、デザインも自由に変えることができます。

本記事では、WordPressの固定ページでLPを作成する方法と、CSSを切り替えてLP専用デザインを実現するコツについて解説します。

固定ページでLPを作成するメリット

WordPressの固定ページでLPを作る最大のメリットは、管理の一元化ができる点です。

同じサイト上で作成できるため、別ドメインや別テーマを用意する必要がなく、運用の手間を大きく減らせます。

また、既存のコーポレートサイトのヘッダーやフッターを流用できるため、デザインやブランドの統一感を保ちながら情報発信が可能です。

採用ページやキャンペーンページなど、定期的に更新が必要なLPを作る際にも、管理画面から簡単に修正できるのが大きな利点です。

LPのデザインを変えるには？フルワイド設定とカスタムクラス

固定ページでLPを作成する場合、CSSを簡単に設定したいのであれば、該当ページのページタイプをサイドバーを表示しない「フルワイド」レイアウトにしておけば、親クラスに「column-full-wide」を指定すればLP専用のCSSとして使用することができます。

ただ、この場合はサイト内の別のページで「フルワイド」レイアウトを使用できなくなるというデメリットもありますし、いちいち親クラスを指定しなければいけません。

また、ベーシックな手段として各ブロックに「カスタムクラス」を追加すれば、部分的にスタイル変更をすることができますが、ヘッダーやフッターなどサイト共通のパーツでは使えませんし、ブロックごとにカスタムクラスを追加するのは手間がかかります。

特定のURLだけにCSSを読み込ませる方法

もう少し柔軟にCSSを切り替えたい場合は、「コードスニペット」プラグインを使ってURL単位でCSSを読み込む方法もあります。

例えば、URLが「recruit」のページだけに「recruit.css」を適用するコードは以下の通りです。 （recruit.cssはサイトの子テーマにcssというフォルダを作って格納しているという想定です。）

add_action('wp_enqueue_scripts', function() {
  if ( is_page('recruit')) {
    wp_enqueue_style('lp_recruit_css', get_stylesheet_directory_uri().'/css/lp_recruit.css', array('cocoon-style','cocoon-child-style'));
  }
});

この方法を使えば、ヘッダーやフッターなど共通パーツのスタイルもLP専用に調整できます。

少し難易度は上がりますが、複数のLPを同サイト内で展開したい場合に非常に便利なテクニックです。

まとめ

WordPressの固定ページでLPを作るのは、効率的かつ柔軟な運用ができる手法。

同じドメイン内で管理できるため、更新・分析・メンテナンスの面でも大きなメリットがあります。

WordPressを活用すれば、採用ページやキャンペーンページも手軽に自作できます。 自社のサイト運用に合わせて、ぜひこの方法を試してみてください。