こんにちは！Takeshi(lhZJlNpUPZ1iCfR)です！
LP作ってWordPressにアップロードして！って言われたけどやり方が分からないよ…
上手く表示されないし…詰みです。
今回はこんな方に向けてWordPressでお問い合わせフォーム付きのLPを作成する方法を紹介します。
テーマなどは使わずに、ファイル作成→アップロード→問い合わせフォーム、サンクスページを作成するまでの手順を解説するので初心者の方は是非順番にご覧下さい。
WordPressでのLPの作り方を紹介
それでは早速いってみましょう！
まずはWordPressにアップロードする為の準備からです。
WordPressにLPをアップロードする為の準備
まずは自分の環境に以下を用意して通常通りコーディングして下さい。
- index.htmlファイル
- style.cssファイル
- 画像フォルダ
- jsファイル（必要であれば）
通常のLPをコーディングするだけなら大体こんな感じの中身になると思います。
ちなみに、ここでは分かりやすいように実際にWordPress.lpというフォルダを作って画像で解説していきますね！
現時点でのフォルダの中はこんな感じです。
html、cssファイルと画像を格納するimagesというフォルダを作成しました。
皆さんは通常通りこのファイルを使ってLPのコーディングをして下さい。
ちなみにこのWordPress.lpの中身はこんな感じの表示。
ファイル名を変える
コーディングが出来たらWordPressに読み込ませる為に、index.htmlのファイルをindex.phpに変更して下さい。
こんな感じになりますね。
cssや画像ファイルを読み込む為に記述を変える
現段階ではcssや画像の読み込みは相対パスで書いているかと思います。
例えばCSSや画像だったらこんな感じ。
|
1 |
<link rel="stylesheet" href="style.css"> |
|
1 |
<img src="./images/MORII.png" alt="海"> |
このパスの部分をWordPressで読み込ませる為に記述をこのように変えます。
CSSのパス
|
1 |
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"> |
CSSのパスをstyle.cssから<?php bloginfo('stylesheet_url'); ?>に変更しました。
画像フォルダのパス
|
1 |
<img src="<?php bloginfo('template_url'); ?>/images/MORII.png" alt=""> |
画像のパスの中身を./images/MORII.pngから<?php bloginfo('template_url'); ?>/images/MORII.pngに変更しました。
画像フォルダなどの外部ファイルのパスの先頭の.の部分を<?php bloginfo('template_url'); ?>に変更してあげるようなイメージですね。
cssにテーマの名前を記述する
WordPressにテーマとして扱ってもらう為にcssファイルの冒頭にテーマの名前を記述します。
書き方はこんな感じ。
|
1 2 3 4 5 6 |
/* Theme Name: テーマの名前 Description: テーマの説明 Author: 作成した人の名前 Version:テーマのバージョン */ |
今回見本で作ったWordPress.lpだとこんな感じになります。
|
1 2 3 4 5 6 |
/* Theme Name: WordPress.lp Description: テスト用のLP Author: Takeshi Version:1.0 */ |
他にも書ける項目がありますが、ここではひとまずこれだけ記載します。
自分の用途に合わせて記述してね！
ファイルを分ける
index.phpのファイルを以下のように分けます。
- header.php
- index.php
- footer.php
まず切り分ける前にfooter.phpとheader.phpのファイルを作ります。
作ったらindex.phpの中のheader、footerを切り取ってそれぞれ
header→header.php
footer→footer.php
に貼り付けます。
試しにさっき作ったWordPress.lpを切り分けてみます。
切り取る部分はこんな感じ。
実際に移植するとこんな感じになります
header.php
footer.php
index.php
このindex.phpにheaderとfooterの読み込みが出来るように以下の記述を追加します。
headerを読み込む
|
1 |
<?php get_header(); ?> |
footerを読み込む
|
1 |
<?php get_footer(); ?> |
実際に追加するとこんな感じになります。
index.php
※今回は割愛してますがお問い合わせを実装する場合はindex.phpにフォームを作成して下さい。
サンクスページを作る
お問い合わせ完了画面を作る場合は新たにpage.phpというファイルを作成して下さい。
このファイルがお問い合わせ完了画面のページになります。
page.phpの中にお問い合わせ完了画面の内容を書いていきます。
page.php
大体こんな感じの内容になるかと思います。
|
1 |
<?php get_header(); ?> |
|
1 |
<?php get_footer(); ?> |
↑この記述も忘れずに書きましょう。
ちなみに、"トップへ戻る"などのボタンを追加する場合は、hrefの部分に以下を記載して下さい。
|
1 |
<?php echo esc_url( home_url( '/' ) ); ?> |
こんな感じになりますね。
<?php echo esc_url( home_url( '/' ) ); ?>は簡単に言うと「トップページのURLを出力しますよ！」って意味です。
よく分からなくてもコピペでOK！
最後にWordPressで表示されるこのページの名前を決めます。
page.phpの冒頭に以下を追加して下さい。
|
1 2 3 4 5 |
<?php /* Template Name: 好きな名前 */ ?> |
この好きな名前の部分にページの名前を記入して下さい。
分かればなんでもOKです。
今回はthanks pageと言う名前にしました。
functions.phpを作る
最後にfunctions.phpというファイルを作って追加して下さい。
今回は特にfunctions.phpの中には記述しないですが、WordPressに様々な機能を追加するときに必要になるファイルです。
後々使うこともあると思うのでとりあえず作っておきましょう。
これでいよいよWordPressにアップロードする段階まで来ました。
フォルダをzip化してアップロード
作ったフォルダをzip化してアップロードしましょう。
ちなみにmacの人はフォルダの上で右クリック→"フォルダ名"を圧縮で簡単に圧縮できるよ！
早速WordPressを開いて外観→テーマを開いて下さい。
上にこんな表示が出てくると思います。
ここで新規追加をクリック。
このような表示になるのでテーマのアップロードをクリック。
ここからさっきzip化したファイルをアップロードしましょう。
ドラッグ&ドロップでもOKだよ！
ファイルを指定して今すぐインストールを押すとこんな画面になります。
これが表示されたら有効化をクリックしましょう！
有効化したら実際に表示されてるか確認します。
ちゃんと反映されました。
ここからお問い合わせフォームを作っていきます。
問い合わせフォームを作る
ここではContact Form 7というプラグインを使って問い合わせフォームを実装します。
インストールしたら有効化しましょう。
すると右側にお問い合わせの項目が出てくるのでクリック→コンタクトフォーム1をクリックして下さい。
編集画面に切り替わるのでここで任意のフォームを作成できます。
最初はデフォルトでこんな画面になってます。
上のテキスト、メールアドレス…と書かれたタブをクリックするとinputタグに該当するタグを編集できます。
指定のIDやクラス名がある場合は〜属性と書かれた部分に入力して下さい。
出来上がったら、元々formのコードを書いてあった部分を消して、以下のコードを挿入して下さい。
|
1 |
<?php echo apply_filters('the_content', 'コンタクトフォームのショートコード'); ?> |
このコンタクトフォームのショートコードとはこれのことです。
ここに出て来たコードをコピペして下さい。
すると挿入した部分に問い合わせフォームが出現します。
とりあえずこれでフォームの設置は完了です。
続いてお問い合わせ完了画面の設置をします。
お問い合わせ完了画面を設置する
お問い合わせ完了画面を作成します。
WordPressの左の項目から固定ページ→新規追加をクリックして下さい。
すると編集画面が開くので右にあるテンプレートを選択。
さっき作ったpage.phpの任意で決めた名前がプルダウンで表示できるようになっているはずです。
ここでさっき作ったページを選択して右上の公開するをクリックして下さい。
公開するボタンがグレーアウトしてたら何かタイトルをつけるとクリックできるようになるよ！
これでページの設定は出来たので、次は送信するボタンを押すとお問い合わせ完了画面が表示される設定をしていきます。
お問い合わせ完了画面に移動する設定
送信するボタンを押すとお問い合わせ完了画面に移動する設定は簡単です。
＜/head＞タグの手前か、footerに以下の記述を追加して下さい。
|
1 2 3 4 5 |
<script> document.addEventListener( 'wpcf7mailsent', function( event ) { location = '問い合わせ完了画面のURL'; }, false ); </script> |
これでOKです。
問い合わせ完了画面のURLの部分に自分で作成した完了画面のURLを入力して下さい。
これで問い合わせの送信ボタンを押すと…
無事にページが移動したね！
WordPressナビをつける
最後にいつでも編集画面にアクセス出来るようにWordPressナビをつけましょう。
付け方は簡単です。
以下のコードをそれぞれ入力して下さい。
headタグの前に
|
1 |
<?php wp_head(); ?> |
body閉じタグの前に
|
1 |
<?php wp_footer(); ?> |
これでWordPressナビが表示されました！
最後に
長くなりましたが以上がWordPressでLPを作る方法です！
これを覚えておくとLPだけじゃなくて普通のWEBサイトをWordPress化する時にも役立ちそうですね！
とりあえずこの記事通りに進めればWordPressが全く分からなくても作れると思いますので、興味がある方は仕事じゃなくても試しにやってみて下さい。
それでは最後まで読んで頂きありがとうございました！