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

SHARE

WordPressでLP作りたい人

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

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

前の記事

【正体不明】ビットコインの創設者「サトシ・ナカモト」を徹底解説…

次の記事

【無料】コインチェックで新規口座開設する方法【最短5分】
【無料】コインチェックで新規口座開設する方法【最短5分】