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

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

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

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ファイル記載の変更

//変更前
<link rel="stylesheet"  href="css/style.css">
<link rel="stylesheet"  href="css/responsive.css">
//変更後
<link rel="stylesheet"  href="<?php  echo get_template_directory_uri(); ?>/css/style.css" type="text/css" >
<link rel="stylesheet"  href="<?php echo get_template_directory_uri(); ?>/css/responsive.css" type="text/css">

//変更前

//変更後

imgファイル記載の変更

//変更前
<img src="/img/zzz.png">
//変更後
<img src="<?php echo get_template_directory_uri(); ?>/img/zzz.png">

//変更前

//変更後

bootstrapファイル記載の変更

//変更前
<script src="bootstrap/js/bootstrap.min.js"></script>
//変更後
<script src="<?php echo get_template_directory_uri(); ?>/bootstrap/js/bootstrap.min.js"></script>

//変更前

//変更後

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です。

/*   
Theme Name: sample1
*/

Theme Name: sample1

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

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

header.php

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

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
//割愛
  <?php wp_head(); ?>
</head>
  <body>
　　　<div class="inner">
    <header>
//割愛
　　　</header>

<!doctype html>

<head>

//割愛

<?php wp_head(); ?>

</head>

<body>

//割愛

　　　</header>

footer.php

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

  <footer>
   //割愛
  </footer>
 <script src="script.js"></script>
 </div>
 <?php wp_footer(); ?>
 </body>
</html>

//割愛

</footer>

</div>

<?php wp_footer(); ?>

</body>

</html>

index.php

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

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

//header.phpを呼び出すコード
<?php get_header(); ?>
<!-- main -->
//footer.phpを呼び出すコード 
<?php get_footer(); ?>

//header.phpを呼び出すコード

<?php get_header(); ?>

//footer.phpを呼び出すコード

<?php get_footer(); ?>

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を呼び出したい場合

<?php get_header(); ?>

1	<?php get_header(); ?>

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

<?php get_footer(); ?>

1	<?php get_footer(); ?>

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

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

<?php get_sidebar(); ?>

1	<?php get_sidebar(); ?>

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

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

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

single.php(投稿ページ)

<?php get_header(); ?>
<div class="container">
  <div class="contents">
 
  </div>
  <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

<?php get_header(); ?>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

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

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

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

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

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

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

ニャンニャン

page.php(固定ページ)

<?php
/*
Template Name: 固定ページの新規テンプレート１
*/
?>
<?php get_header(); ?>
//中身に自分で作ったHTML、CSSファイルの内容を書く 
<?php get_footer(); ?>

<?php

Template Name: 固定ページの新規テンプレート１

<?php get_header(); ?>

//中身に自分で作ったHTML、CSSファイルの内容を書く

<?php get_footer(); ?>

8.wordpressナビをつける

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

//</head>の前に追加(header.phpに追加)
<?php wp_head(); ?> 
</head>

//</body>の前に追加(footer.phpに追加)
<?php wp_footer(); ?>
</body>

//</head>の前に追加(header.phpに追加)

<?php wp_head(); ?>

</head>

//</body>の前に追加(footer.phpに追加)

<?php wp_footer(); ?>

</body>

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分】