【初心者】WordPressでLPサイトを自作する方法と手順【まずは、WEB制作で月5万を稼ごう】

WordPressでLP作りたい人

WordPressでLPを作りたいのですが、どうやって作ればいいの？

WordPressに1ミリも触ったことがありません。ブログもやったことないし、プログラミングは初心者レベルです。

将来的に、WEB制作やWordPress案件で稼ぎたいので、教えてください。

こんなお悩みを解決します。

✔︎本記事の内容

WordPressでLPサイトを自作する方法と手順

本記事では、ペライチのLPをWordPress化する方法と手順について解説します。基本的に取っつきにくいのは、PHPだと思います。

とはいえ、ここで抑えるのはWordPressで使うPHP。勉強範囲を絞ることは、とても重要。

なお、本記事の内容を抑えるだけで、WEB制作のお仕事をゲットできます。

WEB制作を案件受注している僕が、解説します。

WordPressでLPサイトを自作する方法と手順

わかりやすく解説します。
なお、最低限のスキルがある前提です。

【前提】ペライチのLPを作る

すみません。
最低限、LPを作れるくらいのスキルが前提です。

HTML、CSS、jQuery、Bootstrap…
このあたりの言語を使って、基礎レベルのLPを作ることができればOK。

VSCodeなどの、ローカル環境でコーディングできれば余裕です。ここで躓いていたらわりとキツイので、頑張って作り上げてください。

手順1：WordPressに必要なファイル作成

WordPressは、phpで実装されています。
なので、ファイル形式は「.php」を作ればOK。

index.php：必須
header.php：必要
footer.php：必要
front-page.php：なくてもいい
home.php：なくてもいい
function.php：なくてもいい
single.php（投稿ページ）:なくてもいい
page.php（固定ページ）：なくてもいい
sidebar.php：なくてもいい
style.css：必須

上記のとおり。
あとは、画像やcssフォルダなどを用意できていれば、下準備は完了です。

本記事では、必要最低限に絞って解説します。ペライチのLPなので、テンプレートは多く必要ありません。「index.php」「style.css」があれば、テーマとして認識されます。

手順2：index.phpの作成

LPは「index.html」で作成していると思います。
これを「index.php」へと、名前を変換するだけ。

そうすると、いろいろ書き換える工程が出るので、次の項目で解説していきます。書き換えないと、WordPress上で反映されませんので。

phpファイルに変換すると、「コードの呼び出し」みたいなことができるようになります。たとえば、ヘッダーやフッターを別のphpファイルから呼び出すことも可能。

手順3：index.phpの書き換え

「<?php echo get_template_directory_uri(); ?>」このコードを追加していきます。

呪文みたいな感じですが、コピペでOK。
最初は、慣れないと思いますが、そのうち慣れてきますので安心を。

cssファイル

//変更前
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/responsive.css">

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

画像ファイル

//変更前
<img src="img/xxx.jpg" alt="XXX">

//変更後
<img src="<?php echo get_template_directory_uri(); ?>/img/xxx.jpg" alt="XXX">

scriptファイル

//変更前
<script defer type="text/javascript" src="js/script.js"></script>

//変更後
<script defer type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>

「defer」というのは、読み込みを高速化するテクニック。他にも「async」属性があります。

とりま、つけておけば高速化できるよって認識でOK。

基本的には、上記の3つの手順で書き換え作業は完了。絶対パスと相対パスの使い分けは、各人にお任せです。

初心者にありがちですが、画像はなるべく相対パスで書くようにしましょう。SEO的には問題ありませんが、WEB制作の現場では、相対パスで記述する会社が多いです。phpファイル上では外部サイトへリンクする場合を除き（httpsで始まるヤツ＝絶対パス）、画像やリンクはphpコードを使用して呼び出す形が一般的。

手順4：front-page.phpまたはhome.phpの作成（省略可）

次の工程は、トップページの作成です。
今回は、ペライチのLPなので、LPそのものがトップページになります。

なので、ぶっちゃけ、、、
「index.php」だけでOKです。

今回は、省略します。

階層と優先順位の理解

WordPressのトップページを表示するテンプレートは、3つあります。この辺は、WordPress特有の「階層」と「優先順位」を理解しておく必要がありますね。

ザックリいうと、
トップページを表示する優先順位がありまして、

優先1位：front-page.php
優先2位：home.php
優先3位：index.php

3つのテンプレートが同じテーマ内に存在する場合は、「front-page.php」が基本的に最優先で出力されます。index.phpは、すべてのテンプレートが読み込まれた最後に出力されるイメージです。

もしくは「front-page.php」や「home.php」がなければ、「index.php」が出力されます。

手順5：style.cssの作成

ファイルの中身は、テーマ名だけでもOK。
これだけで、テーマとして認識されます。

@charset "utf-8";
/*
Thema Name: テーマの名前
*/

コメント形式で必ず「テーマの詳細」を記述する必要があります。

たとえば、、、

Thema Name：テーマ名
Thema URL：テーマサイトのURL
Author：テーマの著者
Description：テーマの説明
Vesion：テーマのバージョン
Tags：テーマの特徴を表すタグ
License：GNU General Public License v2 or later
License URL：http://www.gnu.org/licenses/gpl-2.0.html

上記を記述すればOK。
楽チンですね。

あと基本的に、cssはこのファイルに書くのではなくて、別に用意してあるcssファイルに書くので、お間違えなく。

手順6：header.phpの作成

index.phpの冒頭から</header>までを、header.phpにマルっと移行します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>header.phpの作成方法</title>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/base.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/responsive.css">
<?php wp_head(); ?>
</head>
<body>
<header>
//省略部分
</header>

「<?php wp_head(); ?>」を</head>タグ直前に挿入するのをお忘れなく。下記で解説するのも同様で、ないと機能しません。

手順7：footer.phpの作成

上記と同様に、こちらも<footer>から</html>までをマルっとfooter.phpに移行します。

    <footer>
      //中略
    </footer>
  </div>
  <script defer type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>
  <?php wp_footer(); ?>
  </body>
</html>

こちらも「<?php wp_footer(); ?>」を</body>タグ直前につけるのをお忘れなく。

index.phpでヘッダーとフッターを呼び出す方法

index.phpでヘッダー部分を呼び出すには、、、

<?php get_header(); ?>

//<main>中略</main>

<?php get_footer(); ?>

ヘッダーとフッターを呼び出す関数を記述します。
page.phpなどの固定ページでも同様で、このように書きます。

手順8：固定ページ（page.php）を作りたい場合（省略可）

基本的に、固定ページの構成は下記のとおり。
ヘッダーとフッターを呼び出しつつ、固定ページを出力します。

<?php get_header(); ?>

//固定ページを呼び出す
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; endif; ?>

<?php get_footer(); ?>

今回は、ペライチのLPなので省略。
メニュー項目やお問い合わせページなどの固定ページがある場合に作ります。

手順9：screenshot.pngの作成

WordPressの外観テーマの写真になります。
テキトーにサクッと作っておきましょう。

ない場合は、表示されません。

手順10：フォルダをzipファイル化して、アップロードしよう

zipファイル化＝圧縮です。
右クリックから「”ファイル名”を圧縮」を選んでください。

zipファイル化できたら、WordPressのテーマにアップロード→有効化して、反映されるか確認しましょう。

うまく反映されない場合は、記述がミスっているハズなので、念入りに確認してください。

1文字でも違うと、うまく反映されない場合が多いです。

【目標】まずは、WEB制作で月5万を稼ごう

ここまでできれば、月5万を稼ぐ力はあります。
WEB制作は、純粋に楽しいですよ。

【補足】MAMPの実装方法

MAMPを使えば、ローカル環境でテストできます。
いきなりアップロードでも問題ないですが、不安な方はいったんローカル環境で確認してみるのもアリですね。

下記で実装方法を解説していますので、どうぞ。

【簡単】MAMPのインストール方法を図解付きでわかりやすく解説【中学生でOK】

それでも、挫折しそうな方へ

挫折は、最高の友達です。
僕も、独学でけっこう苦労してきました。

プログラミング＝挫折って、ありがちですよね。
そもそも、ハナから諦めている人も多い。

でも、この記事を読んでいる方は素晴らしいです。
プログラミングに挑戦していますし、尚且つ、壁を乗り越えようとしているからです。

壁を突破した時に成長があります。
ググりまくって、ようやく解決できた時に達成感があります。

コーディングレベルまでは身に付けましたが、PHPとなると敷居がガクッと高くなりますよね。

でも、そこで完全に挫けてしまったら、ちょっともったいないと思います。もう少しで、稼げるレベルなのですから。とりま一眠りでもして、また明日から挑戦するかくらいの構えでちょうどいい。

というのも、スキルは一朝一夕では身につきませんよね。僕も、WEB制作で稼ぐのに半年以上かかりました。

しかし、地道に毎日コツコツ勉強してアウトプットしていったら、自然とできるようになりました。

何が言いたいのかというと、、、
挫折が最強の武器になるということ。

そもそも、何かに挑戦すらしなかったら挫折もしないということ。それで、周りから笑われるなら、いつしか見返して腹パンでもしてやればいいです。（ミカサ風w）

僕も、WEB制作の領域にはコミットし続けます。
オワコンといわれようが、リモートで稼げるので、人生にとってのメリットがかなり大きいのは事実です。

だって、通勤を排除できますからね。
控えめにいって、サイコーです。

僕にとってプログラミングは、あくまでも人生のツールです。稼ぐための、人生を豊かにしてくれるための「道具」です。

スマホだって、毎日触っているから使いこなせます。だから、初心者ほど毎日勉強しましょう。

長くなりましたが、WEB制作で稼げることを願っています。諦めずに、毎日コツコツ勉強していきましょう。

アディオス。