LPをワードプレス化したいんだけどやり方が分からない
そして、なぜかJavaScriptが読み込まれない
こんにちは、ヨロと申します。
今回は、ランディングページ(LP)をワードプレス化する方法という事で、まず必要最低限のファイルは、
元のhtmlファイル「index.html」の名前を変更した
これら３つだけ。
あとは「header.php」も「footer.php」も何もいらない。
とてもシンプルです。
他にももし「JavaScript(jQuery)のファイル」などがあるなら、その都度追加。
もしランディングページ１枚ではなく、他にもページがあるようなら「header.php」や「footer.php」など、
もしくは、それ用の固定ページのテンプレートも用意。
レスポンシブ(スマートフォン対応)にする場合は、それ用の「レスポンシブCSSファイル」も追加。
ただ、基本的には上の３つだけでLPをワードプレス化する事は可能。
ランディングページ(LP)をワードプレス化するやり方, 方法, メリットなどについて
ランディングページをワードプレス化するメリットとしては、
セキュリティ関連のプラグインを入れたり、お問い合わせフォームを設置出来たりといろいろ。
ただ、ランディングページをワードプレス化する場合、いくつものファイルに分割をするような事がないため、作りがシンプルな分、
簡単な見落としが多くなったりもしますので、そこら辺は注意が必要。
という事で、ランディングページをワードプレス化する簡単な手順としては、
①レンタルサーバー、もしくは自分のパソコン(ローカル環境)にワードプレスをインストール
基本的にWordPressのインストール方法は、WordPressのサイトからファイルをダウンロードした後に、
フォルダを解凍後、中のファイル名を変えてからサーバーにアップロードするだけ。
(独自ドメイン会社とレンタルサーバー会社側のドメイン設定をした後、フォルダをサーバーにアップロード)
さくらのレンタルサーバーにバリュードメインで取得したドメインを設定する方法はこちら
ローカル環境(自分のパソコン)にWordPressをインストールする方法はこちら
「index.html」を「index.php」に変更
そして、ここからが実際に作ったランディングページ(LP)をワードプレス化する方法、
②作ったHTMLファイル「index.html」を「index.php」にファイル名を変更し、フォルダごとサーバーのワードプレスを保存するフォルダ内「wp-content」 → 「themes」の中に入れる
※HTMLファイル等が入った②のフォルダ名は分かりやすい名前に変更しておく(レンタルサーバー側で設定した指定フォルダの名前と合わせる)
③CSSを読み込む
「index.php」のヘッダー部分の、
// 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をワードプレス化してみて、JavaScript(jQuery)が読み込まれなかったりする場合は、こちらの記事がおすすめ。
ワードプレスでJavaScript(jQuery)を読み込む方法
ブラウザで何のエラーもなく確認が出来ればOK。
JavaScriptがうまく読み込まれない場合に注意する点
JavaScriptがうまく読み込まれない場合の注意点としては、
特にランディングページ(LP)を作る際には「header.php」や「footer.php」を使わない事もあるため、
// ヘッダー部分とフッター部分の記述 <?php wp_head(); ?> <?php wp_footer(); ?>
「index.php」に、この２つの記述を忘れがち。
wp_headは必ず「headの閉じタグの手前」に書く。
という感じで、最低限ここら辺に気をつけながら、上から順に丁寧にやっていけば問題なくワードプレス化が出来るはず。
コメント