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(固定ページ)
ニャンニャン
2.index.HTMLのファイル名をindex.phpに変更
これは、単純にHTMLのファイル名を「index.php」に変更するだけでOKです。
3.index.php内の記述を書き換え
index.phpというファイル名に変更したものの中身の記述を変えましょう。
ここで書き換えないと、最初にHTML、CSSで作ったサイトの内容がWordPressに反映されません。
stylesheetとresponsiveファイル記載の変更
|
1 2 3 4 5 6 |
//変更前 <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ファイル記載の変更
|
1 2 3 4 |
//変更前 <img src="/img/zzz.png"> //変更後 <img src="<?php echo get_template_directory_uri(); ?>/img/zzz.png"> |
bootstrapファイル記載の変更
|
1 2 3 4 |
//変更前 <script src="bootstrap/js/bootstrap.min.js"></script> //変更後 <script src="<?php echo get_template_directory_uri(); ?>/bootstrap/js/bootstrap.min.js"></script> |
4.index.phpの内容をhome.phpへコピペ
次に上で作成したindex.phpの内容をhome.phpへそのままコピペします。
このhome.phpがトップページに表示されるファイルになります。
5.style.cssにテーマ名を記載
次に、style.CSSの1番上に以下のようなテーマ名を記載します。
この「sample1」というのがテーマ名ですが、自分で好きなテーマ名を記載してOKです。
|
1 2 3 |
/* Theme Name: sample1 */ |
6.index.phpのheader部分を移植
次にindex.phpのheader部分をheader.phpへ、footer部分をfooter.phpへ移植します。
header.php
index.phpのheader部分を移植しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!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> |
footer.php
index.phpのfooter部分を移植しました。
|
1 2 3 4 5 6 7 8 |
<footer> //割愛 </footer> <script src="script.js"></script> </div> <?php wp_footer(); ?> </body> </HTML> |
index.php
index.phpのheader.phpに移植した部分にはheader.phpを呼び出すコードを書きます。
footer.phpへ移植した部分にはfooter.phpを呼び出すコードを書きます。
|
1 2 3 4 5 |
//header.phpを呼び出すコード <?php get_header(); ?> <!-- main --> //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を呼び出したい場合
|
1 |
<?php get_header(); ?> |
footer.phpを呼び出したい場合
|
1 |
<?php get_footer(); ?> |
sidebar.phpを呼び出したい場合
サイドバーが必要ない場合は載せません。今回のWordPressでLPを自作する場合、サイドバーを載せる人はいないので、飛ばしてください。
|
1 |
<?php get_sidebar(); ?> |
8.投稿ページ生成テンプレートを作成
今回は静的なペライチのLPサイトをWordPressにしたい、という人が多いと思うので、飛ばしてOKです。
動的なサイトを作る場合は、これで投稿ページ作成画面から、このテンプレートを選ぶことで内容を表示できます。
single.php(投稿ページ)
|
1 2 3 4 5 6 7 8 |
<?php get_header(); ?> <div class="container"> <div class="contents"> </div> <?php get_sidebar(); ?> </div> <?php get_footer(); ?> |
9.固定ページ生成テンプレート作成
今回は静的なペライチのLPサイトをWordPressにしたい、という人が多いと思うので、飛ばしてOKです。
ただ、ペライチのLPではなく、2枚以上ページがある場合は、page.php(固定ページ)に以下のようなテンプレートを作成して、テンプレートの中身には最初に自分で作った2枚目以降のHTMLファイルの内容を入れてください。
中身は「ステップ２でindex.HTMLのファイル名をindex.phpに変更し中身を書き換えた要領」で変えてください。
これで固定ページ作成画面からこのテンプレートを選ぶことで内容を表示できます。
ニャンニャン
page.php(固定ページ)
|
1 2 3 4 5 6 7 8 |
<?php /* Template Name: 固定ページの新規テンプレート１ */ ?> <?php get_header(); ?> //中身に自分で作ったHTML、CSSファイルの内容を書く <?php get_footer(); ?> |
10.WordPressナビをつける
こちらをつけるとワンクリックで編集ができなり、便利なののでつけましょう。
|
1 2 3 4 5 6 7 |
//</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を自作する方法まとめ
ゴロニャン
ニャンニャン
