ランディングページ（LP）をWordPress化する方法｜必要最低限なファイル

こんにちは、ヨロと申します。

今回はランディングページ(LP)をWordPress化する方法という事で、まず必要最低限のファイルは、

元のhtmlファイル「index.html」の名前を変更した

「index.php」

「CSSファイル」

「functions.php」(JSファイルを読み込ませる為)

これら３つだけ。

あとは「header.php」も「footer.php」も何もいらない。

とてもシンプルです。

他にももし「JavaScript（jQuery）のファイル」などがあるなら、その都度追加。

もしランディングページ１枚ではなく、他にもページがあるようなら「header.php」や「footer.php」など、

もしくは、それ用の固定ページのテンプレートも用意。

レスポンシブ(スマートフォン対応)にする場合は、それ用の「レスポンシブCSSファイル」も追加。

ただ、基本的には上の３つだけでLPをWordPress化する事は可能。

ランディングページ(LP)をWordPress化するやり方、方法、メリット

ランディングページをWordPress化するメリットとしては、

セキュリティ関連のプラグインを入れたり、お問い合わせフォームを設置出来たりといろいろ。

ただ、ランディングページをWordPress化する場合、いくつものファイルに分割をするような事がないため、作りがシンプルな分、

簡単な見落としが多くなったりもしますので、そこら辺は注意が必要。

という事で、ランディングページをWordPress化する簡単な手順としては、

ランディングページ(LP)をWordPress化｜①WordPressをインストール

基本的にWordPressのインストール方法は、WordPressのサイトからファイルをダウンロードした後に、

フォルダを解凍後、中のファイル名を変えてからサーバーにアップロードするだけ。

ローカル環境（自分のパソコン）にWordPressをインストールする方法はこちら

自分のパソコン（XAMPP）にWordPressをインストール

「index.html」を「index.php」に変更

そして、ここからが実際に作ったランディングページ(LP)をWordPress化する方法、

②作ったHTMLファイル「index.html」を「index.php」にファイル名を変更し、フォルダごとサーバーのWordPressを保存するフォルダ内「wp-content」 → 「themes」の中に入れる

※HTMLファイル等が入った②のフォルダ名は分かりやすい名前に変更しておく(レンタルサーバー側で設定した指定フォルダの名前と合わせる)

③CSSを読み込む

「index.php」のヘッダー部分の、

<link rel="stylesheet" href="css/style.css"> を

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> に変更

もしくは、

②のフォルダ内に「functions.php」を新規作成後、その中にCSSを読み込む記述をする。

(JavaScript, jQueryのファイルがある場合は、これらを読み込む命令も「functions.php」に書く)

いざ、LPをWordPress化してみて、JavaScript（jQuery）が読み込まれなかったりする場合は、こちらの記事がおすすめ。

WordPressでJavaScript（jQuery）を読み込む方法

ブラウザで何のエラーもなく確認が出来ればOK。

JavaScriptがうまく読み込まれない場合に注意する点

JavaScriptがうまく読み込まれない場合の注意点としては、

JavaScriptがきちんと読み込まれているのかをデベロッパーツールを使ってみて確認

JavaScript（jQuery）をきちんと読み込むように「functions.php」に書く

jQueryの書き方が間違っていないかを確認(WordPressの場合、jQueryの書き方が異なる)

特にランディングページ(LP)を作る際には「header.php」や「footer.php」を使わない事もあるため、

// ヘッダー部分とフッター部分の記述

<?php wp_head(); ?>

<?php wp_footer(); ?>

「index.php」に、この２つの記述を忘れがち。

wp_headは必ず「headの閉じタグの手前」に書く。

という感じで、最低限ここら辺に気をつけながら、上から順に丁寧にやっていけば問題なくWordPress化が出来るはず。