Web制作で速く稼ぐための勉強法

WordPressでLPを自作する(LPのwordpress化)方法

WordPressでLPを自作する(LPのWordPress化)方法を簡単にまとめました。

WordPressでLPを自作する方法は簡単で、HTMLやCSSで作ったファイルをWordPress化にするためにファイル分割したり、

imgなどの記述をphpの記述に変更するだけです。

これを押さえるだけでもこなせる仕事があります。

WordPressでLPを自作(LPのWordPress化)する方法

サイトを作る

まずWordPress化する前に、HTML、CSS、jQueryなどでサイトを作り上げましょう。

 

1.WordPressに必要なファイルを用意する

次にWordPressに必要なファイルを用意します。

  • style.CSS
  • functions.php
  • header.php
  • footer.php
  • sidebar.php(サイドバー)
  • index.php
  • home.php
  • single.php(投稿ページ)
  • page.php(固定ページ)
phpファイルの作り方は、HTMLやCSSファイルと同じなので、とりあえず上の名前をつけたファイルを用意すればOKです。

ニャンニャン

 

2.index.HTMLのファイル名をindex.phpに変更

これは、単純にHTMLのファイル名を「index.php」に変更するだけでOKです。

 

3.index.php内の記述を書き換え

index.phpというファイル名に変更したものの中身の記述を変えましょう。

ここで書き換えないと、最初にHTML、CSSで作ったサイトの内容がWordPressに反映されません。

stylesheetとresponsiveファイル記載の変更

imgファイル記載の変更

bootstrapファイル記載の変更

 

LPからWordPressを自作してbootstrapが反応しない場合

以下の記事を参考にしてください。

wordpressを自作してbootstrapが適用されなくなる場合の対処法

 

LPからWordPressを自作してjQueryが反応しない場合

以下の記事を参考にしてください。

wordpressを自作するとjQueryが動かない場合の解決策3つ【5分】

 

4.index.phpの内容をhome.phpへコピペ

次に上で作成したindex.phpの内容をhome.phpへそのままコピペします。

このhome.phpがトップページに表示されるファイルになります。

 

5.style.CSSにテーマ名を記載

次に、style.CSSの1番上に以下のようなテーマ名を記載します。

この「sample1」というのがテーマ名ですが、自分で好きなテーマ名を記載してOKです。

 

6.index.phpのheader部分を移植

次にindex.phpのheader部分をheader.phpへ、footer部分をfooter.phpへ移植します。

header.php

index.phpのheader部分を移植しました。

footer.php

index.phpのfooter部分を移植しました。

index.php

index.phpのheader.phpに移植した部分にはheader.phpを呼び出すコードを書きます。

footer.phpへ移植した部分にはfooter.phpを呼び出すコードを書きます。

 

7.呼び出しコードを表示させたい画面ファイルに貼る

今回は静的なペライチのLPサイトをWordPressにしたい、という人が多いと思うので、飛ばしてOKです。

ただ、ペライチのLPではなく、2枚以上ページがある場合は、page.php(固定ページ)にも、header.phpやfooter.phpの呼び出しコードを記載してください。

また、動的なサイトを作る場合はsingle.php(投稿ページ)にもheader.phpやfooter.phpの呼び出しコードが必要です。

header.phpを呼び出したい場合

footer.phpを呼び出したい場合

sidebar.phpを呼び出したい場合

サイドバーが必要ない場合は載せません。今回のWordPressでLPを自作する場合、サイドバーを載せる人はいないので、飛ばしてください。

 

8.投稿ページ生成テンプレートを作成

今回は静的なペライチのLPサイトをWordPressにしたい、という人が多いと思うので、飛ばしてOKです。

動的なサイトを作る場合は、これで投稿ページ作成画面から、このテンプレートを選ぶことで内容を表示できます。

single.php(投稿ページ)

 

9.固定ページ生成テンプレート作成

今回は静的なペライチのLPサイトをWordPressにしたい、という人が多いと思うので、飛ばしてOKです。

ただ、ペライチのLPではなく、2枚以上ページがある場合は、page.php(固定ページ)に以下のようなテンプレートを作成して、テンプレートの中身には最初に自分で作った2枚目以降のHTMLファイルの内容を入れてください。

中身は「ステップ2でindex.HTMLのファイル名をindex.phpに変更し中身を書き換えた要領」で変えてください。

これで固定ページ作成画面からこのテンプレートを選ぶことで内容を表示できます。

Template Nameの「固定ページの新規テンプレート1」は、自分の好きな名前でOK!

ニャンニャン

page.php(固定ページ)

 

10.WordPressナビをつける

こちらをつけるとワンクリックで編集ができなり、便利なののでつけましょう。

 

11.フォルダをzipファイル化してテーマにup

作ったWordPressフォルダをzip化したら、WordPressのテーマにアップロードして有効化しましょう。

テーマ名はステップ3「style.CSSにテーマ名を記載」した名前と同じにしてください。

以上で完了です。

 

WordPressでLPを自作する方法まとめ

ゴロニャン

これだけの説明じゃ、難しいよ
なら、本や動画で学習しても良いかもね!でも、買い漁るのはお金がもったいないので注意だニャ

ニャンニャン

UdemyのWordPressおすすめ講座は買わなくてOK!買うなら2つだけ厳選紹介

 

WordPressでLPを自作していてHTML、CSS、phpなどが反映されない場合は以下を参考にしてみてください。

WordPressで変更したHTML/CSS/PHP等が反映されない時の対処法