wordpressでLPを自作する（LPのwordpress化）方法を簡単にまとめました。wordpressでLPを自作する方法は簡単で、HTMLやCSSで作ったファイルをwordpress化にするためにファイル分割したり、imgなどの記述をphpの記述に変更するだけです。これを押さえるだけでもこなせる仕事があります。
目次
- wordpressでLPを自作(LPのwordpress化)する最も簡単な方法
- 0.HTML、CSS、jQueryでサイトを作る
- 1.wordpressに必要なファイルを用意する
- 2.index.htmlのファイル名をindex.phpに変更し、ファイル内の記述を書き換える
- 3.style.cssにテーマ名を記載
- 4.index.phpのheader部分を、header.phpへ、footer部分をfooter.phpへ移植する
- 5.header.php、footer.php、sidebar.phpの呼び出しコードを表示させたい画面ファイルに貼る
- 6.投稿ページ(記事ページ)を生成するテンプレートを作成
- 7.固定ページを生成するテンプレートを作成
- 8.wordpressナビをつける
- 9.フォルダをzipファイル化してwordpressのテーマにupload&有効化する
- 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(固定ページ)
ニャンニャン
2.index.htmlのファイル名をindex.phpに変更し、ファイル内の記述を書き換える
index.htmlのファイル名をindex.phpに変更
これは、単純にhtmlのファイル名を「index.php」に変更するだけでOKです。
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> |
LPからwordpressを自作してbootstrapが反応しない場合
以下の記事を参考にしてください。
LPからwordpressを自作してjQueryが反応しない場合
以下の記事を参考にしてください。
index.phpの内容をhome.phpへコピペ
次に上で作成したindex.phpの内容をhome.phpへそのままコピペします。
このhome.phpがトップページに表示されるファイルになります。
3.style.cssにテーマ名を記載
次に、style.cssの1番上に以下のようなテーマ名を記載します。
この「sample1」というのがテーマ名ですが、自分で好きなテーマ名を記載してOKです。
1 2 3 | /* Theme Name: sample1 */ |
次に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(); ?> |
今回は静的なペライチの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(); ?> |
6.投稿ページ(記事ページ)を生成するテンプレートを作成
今回は静的なペライチの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(); ?> |
7.固定ページを生成するテンプレートを作成
今回は静的なペライチの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(); ?> |
8.wordpressナビをつける
こちらをつけるとワンクリックで編集ができなり、便利なののでつけましょう。
1 2 3 4 5 6 7 | //</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でLPを自作(LPのwordpress化)する方法が上の説明だけでわからない人は？
ゴロニャン
ニャンニャン
wordpressでLPを自作していてhtml、css、phpなどが反映されない場合は以下を参考にしてみてください。
