HTML/CSS/JSのLPをWordPressへ! ヘッダー非表示・フッター表示で効果的な活用術

ECサイト運営者の皆様、集客やコンバージョン率向上に重要な役割を果たすランディングページ(LP)。HTML/CSS/JSで作成されたLPを、現在運用中のWordPressサイトに統合することで、より手軽な更新や管理が可能になります。

今回は、既存のLPをWordPressに移管する際に、テーマのヘッダーは非表示にしつつ、フッターは共通で表示したいという具体的なニーズに対応する方法とそのメリットについて解説します。

LPをWordPressに移行するメリット

HTML/CSS/JSで作成されたLPをWordPressに移行することには、以下のようなメリットがあります。

  • 更新の容易性: WordPressの管理画面から、テキストや画像などのコンテンツを簡単に更新できるようになります。
  • プラグインの活用: WordPressの豊富なプラグインを利用することで、LPに様々な機能(お問い合わせフォーム、CTAボタンのABテスト、アクセス解析など)を簡単に追加できます。
  • サイト全体の統一感: WordPressサイトとLPのデザインの一部を共通化することで、ブランドイメージの統一性を保てます。
  • SEO対策の強化: WordPressのSEO対策プラグインを活用することで、LPの検索エンジン最適化を容易に行えます。

実装のポイント:ヘッダー非表示、フッター表示

今回の要件である「WordPressのテーマで設定されているヘッダーは表示せず、フッターは表示したい」という実装は、テーマファイルを編集することで実現可能です。

テーマファイル(PHP)の編集

WordPressのテーマファイル(主にPHPファイル)を編集することで、特定の固定ページでのみヘッダーを非表示にし、フッターを表示させることができます。具体的な手順は以下の通りです。

  1. 固定ページのスラッグ(URLの一部)を確認: 移行するLPをWordPressの固定ページとして作成し、そのスラッグ(例: lp-sample)を確認します。
  2. テーマファイルの特定: 現在使用しているWordPressテーマの、固定ページを表示するためのテンプレートファイル(page.php など)を特定します。
  3. 条件分岐の追加: 特定の固定ページ(LP)でのみヘッダーを表示しないように、PHPの条件分岐 (if 文) を追加します。具体的には、現在のページがLPのスラッグを持つ場合に、ヘッダーを表示するコードをスキップするような記述を行います。
  4. フッター表示の確認: 通常、WordPressのテーマでは、フッターを表示するためのコードが共通のファイル (footer.php) に記述されており、wp_footer() 関数が呼び出されています。テーマファイルを編集する際も、このフッターを表示するコードが削除されていないことを確認します。

注意点:

  • テーマファイルの編集は、サイトの表示に影響を与える可能性があるため、事前にバックアップを取ることを強く推奨します。
  • 編集するPHPファイルや、ヘッダー・フッターを読み込んでいるファイルの構成は、使用しているテーマによって異なります。
  • WordPressのテーマアップデートにより、編集したファイルが上書きされる可能性があるため、子テーマを作成して編集を行うことを推奨します。

LPの特性に合わせた柔軟な表示

上記のようにテーマファイルを編集することで、LPのコンテンツを最大限に強調するためにヘッダーを非表示にし、一方で、サイト全体の信頼性向上や共通の導線としてフッターを表示させることができます。

WordPress移行後のLP活用

LPをWordPressに移行した後は、以下のような活用方法が考えられます。

  • コンテンツの定期的な更新: キャンペーン情報や実績などを手軽に更新し、常に最新の情報を提供します。
  • 効果測定と改善: WordPressのアクセス解析プラグインやABテストプラグインを活用し、LPの効果測定を行い、改善を繰り返します。
  • 他のコンテンツとの連携: WordPressサイト内の他のページやブログ記事とLPを連携させることで、回遊率の向上を図ります。

まとめ

HTML/CSS/JSで作成されたLPをWordPressに移行し、ヘッダーを非表示、フッターを表示するというカスタマイズを行うことで、LPの特性を活かしつつ、WordPressの管理機能やプラグインの恩恵を受けることができます。ぜひ、WordPressへのLP移行を検討し、より効果的な集客・コンバージョン戦略を実現してください。

投稿者プロフィール

エンジニア 俊貴