ランディングページ(LP)をワードプレス化するやり方, 方法, 必要最低限なファイル等

man

困ってる人

LPをワードプレス化したいんだけどやり方が分からない
そして、なぜかJavaScriptが読み込まれない


こんにちは、よろと申します。

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

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

  • 「index.php」
  • 「CSSファイル」
  • 「functions.php」(JSファイルを読み込ませる為)
  • これら3つだけ。

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

    とてもシンプルです。

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

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

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

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

    ただ、基本的には上の3つだけでLPをワードプレス化する事は可能。

    ランディングページ(LP)をワードプレス化するやり方, 方法, メリットなどについて

    ランディングページをワードプレス化するメリットとしては、

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

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

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

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

    ①レンタルサーバー、もしくは自分のパソコン(ローカル環境)にワードプレスをインストール

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

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

    (独自ドメイン会社とレンタルサーバー会社側のドメイン設定をした後、フォルダをサーバーにアップロード)

    さくらのレンタルサーバーにバリュードメインで取得したドメインを設定する方法はこちら

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

    自分のパソコン(XAMPP)にワードプレスをインストール

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

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

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

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

    ③CSSを読み込む

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

    もしくは、

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

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

    いざ、LPをワードプレス化してみて、JavaScript(jQuery)が読み込まれなかったりする場合は、こちらの記事がおすすめ。

    ワードプレスでJavaScript(jQuery)を読み込む方法

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

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

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

  • JavaScriptがきちんと読み込まれているのかをデベロッパーツールを使ってみて確認
  • JavaScript(jQuery)をきちんと読み込むように「functions.php」に書く
  • jQueryの書き方が間違っていないかを確認(WordPressの場合、jQueryの書き方が異なる)
  • 特にランディングページ(LP)を作る際には「header.php」「footer.php」を使わない事もあるため、

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

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

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

    プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール