WordPressでLPを自作する（LPのwordpress化）方法

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

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

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

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

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

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

//変更前
<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分】

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

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

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

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

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

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

/*   
Theme Name: sample1
*/

Theme Name: sample1

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

次に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(); ?>

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

今回は静的なペライチの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(); ?>

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

今回は静的なペライチの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(); ?>

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

今回は静的なペライチの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(); ?>

10.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>

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

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

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

以上で完了です。

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

ゴロニャン

これだけの説明じゃ、難しいよ

なら、本や動画で学習しても良いかもね！でも、買い漁るのはお金がもったいないので注意だニャ

ニャンニャン

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

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

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