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

WordPressでLP作りたい人

WordPressLP自作したいです。

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制作で稼げることを願っています。

諦めずに、毎日コツコツ勉強していきましょう。