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を使えば、ローカル環境でテストできます。
いきなりアップロードでも問題ないですが、不安な方はいったんローカル環境で確認してみるのもアリですね。
下記で実装方法を解説していますので、どうぞ。

それでも、挫折しそうな方へ
挫折は、最高の友達です。
僕も、独学でけっこう苦労してきました。
プログラミング=挫折って、ありがちですよね。
そもそも、ハナから諦めている人も多い。
でも、この記事を読んでいる方は素晴らしいです。
プログラミングに挑戦していますし、尚且つ、壁を乗り越えようとしているからです。
壁を突破した時に成長があります。
ググりまくって、ようやく解決できた時に達成感があります。
コーディングレベルまでは身に付けましたが
PHPとなると敷居がガクッと高くなりますよね。
でも、そこで完全に挫けてしまったら
ちょっともったいないと思います。
もう少しで、稼げるレベルなのですから。
とりま一眠りでもして
また明日から挑戦するかくらいでちょうどいい。
というのも、スキルは一朝一夕で身につきません。
僕も、WEB制作で稼ぐのに半年以上かかりました。
しかし、地道に毎日コツコツ勉強してアウトプットしていったら、自然とできるようになりました。
何が言いたいのかというと、、、
挫折が最強の武器になるということ。
そもそも、何かに挑戦すらしなかったら挫折もしないということ。
それで、周りから笑われるなら
いつしか見返して腹パンでもしてやればいいです(ミカサ風w)
僕も、WEB制作の領域にはコミットし続けます。
オワコンといわれようが、リモートで稼げるので
人生にとってのメリットがかなり大きいのは事実です。
だって、通勤を排除できますからね。
控えめにいって、サイコーです。
僕にとってプログラミングは
あくまでも人生のツールです。
稼ぐための
人生を豊かにしてくれるための「道具」。
スマホだって毎日触っているから使いこなせる。
だから、初心者ほど毎日勉強しましょう。
長くなりましたが
WEB制作で稼げることを願っています。
諦めずに、毎日コツコツ勉強していきましょう。