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