【告知】ノマドエンジニア養成ブートキャンプ

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

 

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制作で稼げることを願っています。諦めずに、毎日コツコツ勉強していきましょう。

 

アディオス。