フリーランスが営業なしで受注する方法5つ

wordpressでLPを自作する(LPのwordpress化)最も簡単な方法

wordpressでLPを自作する(LPのwordpress化)方法を簡単にまとめました。wordpressでLPを自作する方法は簡単で、HTMLやCSSで作ったファイルをwordpress化にするためにファイル分割したり、imgなどの記述をphpの記述に変更するだけです。これを押さえるだけでもこなせる仕事があります。

wordpressでLPを自作(LPのwordpress化)する最も簡単な方法

0.HTML、CSS、jQueryでサイトを作る

まずwordpress化する前に、HTML、CSS、jQueryでサイトを作り上げましょう。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に変更し、ファイル内の記述を書き換える

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

 

3.style.cssにテーマ名を記載

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

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

 

4.index.phpのheader部分を、header.phpへ、footer部分をfooter.phpへ移植する

次に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を呼び出すコードを書きます。

 

5.header.php、footer.php、sidebar.phpの呼び出しコードを表示させたい画面ファイルに貼る

今回は静的なペライチの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を自作する場合、サイドバーを載せる人はいないので、飛ばしてください。

 

6.投稿ページ(記事ページ)を生成するテンプレートを作成

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

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

single.php(投稿ページ)

 

7.固定ページを生成するテンプレートを作成

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

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

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

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

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

ニャンニャン

page.php(固定ページ)

 

8.wordpressナビをつける

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

 

9.フォルダをzipファイル化してwordpressのテーマにupload&有効化する

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

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

以上で完了です。

完了したら、contactformもつけてみましょう。ほとんどの案件で必須です。

自作したwordpressにcontactform7をつける1番簡単な方法

 

wordpressでLPを自作(LPのwordpress化)する方法が上の説明だけでわからない人は?

ゴロニャン

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

ニャンニャン

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

 

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

wordpressで変更したhtml、css、php等が反映されない時の対処法【5分】