[Wordpress自作テーマ②]HTMLとPHPを同時に覚える「初めてのワードプレス」HP作成【準備編】

「HPを作ってみたい！」という方がいましたので、入門編として「Wordpressを使った初めてのマークアップ」というちょっとハードル高めのHP作成記事を書いてみます。

ハッキリ言って初心者には敷居が高いですが、がんばって覚えれば最短でWordpressマスターになれるかと思います。

必要な知識・準備

・レンタルサーバーを借りる

・ドメインを取得

・テキストエディターの導入

・Vagrantの知識とソフトの導入

・Wordpressの知識

・テーマの準備

・HTMLの知識

・CSSの知識

・PHPの知識

・Javascriptの知識

ざっと書いただけでも10項目…

「今からHP作成を始める」という人にとってはかなりハードルの高いものに感じると思います。

でも大丈夫です。

どちらにしろプログラムはそんな簡単にマスターできるものではありません。

どうせなら、最初にガッツリとある程度の知識と努力を経験することによって即戦力になれるくらいの力をつけれますので、「プログラムに興味がある」というその勢いがあるうちに難易度高めのものをクリアして行きましょう。

①レンタルサーバーを借りる

まずはレンタルサーバーを借りる必要があります。

自分の作成したサイトをアップする為のサーバーをレンタルしましょう。

ちなみにWordpressが使えるサーバーでなければいけません。

ちなみに私はLOLIPOPを使ってますが特に理由はありませんので、好みで選んだらいいかと思います。

【レンタルサーバー一覧】

・LOLIPOP

こちらも老舗の大手レンタルサーバー

・さくらサーバー

高速・安定・無料SSL付きの老舗サーバー

・エックスサーバー

高速・高機能・高安定の大手レンタルサーバー

②ドメインを取得

次にドメインです。http://〇〇の部分を自分の好きなものにできます。

ドメイン取得サービスの会社もいろいろありますが、だいたいは「お名前.com」か「ムームードメイン」が多いのではないでしょうか。

ちなみにドメインに関しては後回しでも大丈夫です。

先にローカル環境でHP作成して、完了してサーバーに公開するタイミングで取得しても遅くはありません。

自分を追い込む為にも先に取得してしまうという手もありますが。

【ドメイン取得業者一覧】

・お名前.com

定番のドメイン屋さん

・ムームードメイン

③テキストエディターの導入

テキストエディターというのはプログラム（コード）を書く為のエディターです。

Windowsに付属してる「メモ帳」の進化版みたいなものですね。

別にそのメモ帳を使ってもいいのですが、一度ちゃんとしたエディターを使うとその便利さが分かりますので、ぜひ「Sublime Text」を使ってみてください。

・Sublime Text

※無料でダウンロードできます

さらに「SCSS」という言語をコンパイルできる環境を作る場合は、下記も参考にしてください。

[Windows版]Sublime Text＋CompassでSassをコンパイルする為の設定方法

④Vagrantの知識とソフトの導入

恐らく初心者の方がいきなり挫折する箇所ナンバーワンのVagrant導入です。

Vagrantと言うのは仮想環境を作る便利なソフトウェアの事です。

難しい話は一切しませんが、Wordpressのローカル環境を作るのに利用できます。

一度導入してしまえば後の使い方は簡単ですのでぜひ覚えてください。

下記の記事に導入方法は全て書いてありますので参考までにどうぞ。

[Windows10版]VCCW+VAGRANT+VirtualBox WordPressローカル環境構築【新規作成編】

取り合えず必要なソフトを全部入れてみて、ローカルでブラウザ確認ができるとこまでいけたら最高です。

もう難しいとこはクリアしたも同然でしょう。

⑤Wordpressの知識

今回はいきなりWordpressのテーマから自作で作成してみるという話なので、あえてWordpressの細かい仕様等に触れません。

エラーやつまづきがあってもちょっとググれば解決できる世の中です。

勇気を持って踏み出しましょう。

⑥自作用テーマの準備

自作用のテンプレートを用意しましょう。

以前に書いた記事を参照ください。

[初心者向け]Wordpressの自作テーマ作成方法

ファイルをダウンロードしてローカルのWPフォルダ内の

「wordpress ＞ wp-content ＞ themes ＞ ココ」

ココにフォルダごと突っ込めばOKです。

⑦HTMLの知識

難しい話はしないので、HTMLというのは基本的なプログラム言語の1つだと思ってください。

マークアップと言って、主にテキストや画像を表示させたり配置したりする為の基礎となる言語です。

お作法的な「必ず書いておかなければいけないコーディング」と、「自由に思うがままに表示させていくためのコーディング」の2種類です。

⑧CSSの知識

上記の「HTML」で並べたテキストや画像に対しての「スタイル」というものを付けるものが「CSS」です。

例えばHTMLを使って「Hello World！」と文字を書いて、CSSを使ってその「Hello World！」のテキストを赤くしたり太字にしたり…という使用方法です。

⑨PHPの知識

PHPとは動的にWebページを生成することができるサーバーサイドのスクリプト言語です…と言ってもまた難しい話になるので、これもプログラム言語の1つでちょっとレベル高めのものだ、くらいの感じで覚えておいてください。

HTMLに比べていろんな事ができる！くらいのイメージで大丈夫です。

⑩Javascriptの知識

これもプログラム言語の1つです。

これは不要と言えば不要かもしれませんが、だいたいはみんな使ってる言語なので、要所要所でチョイチョイ使ってくっていうイメージです。

例えばスライダーの実装とかをしようと思ったらだいたい使うハメになります。

環境作りは以上となります

取り合えずこれでざっくりとした説明は終わりとなります。

後はひたすらローカル環境でWordpressファイルを1枚1枚作り上げていき、完成したらサーバーへとアップロードするのみ。

※アップロード方法はVagrant記事の「push」の項目を参照

ここまでの環境を作れた方なら後はHTMLやPHPのコードについてググりながら、ひたすらコーディングしていく事ができるはずです。

ちなみにどういったサイトのデザインにするとかは今回一切触れてませんが、その辺は「自由に・好みで」というコンセプトですのでご了承ください。

では本当にざっくりとなりましたが、今回はこの辺で。

現場から以上です！

もしテーマを使うなら

もし自作を諦めてテーマのテンプレートを使うなら…という事でオススメのテーマを集めてみましたのでご参考にどうぞ。

【オススメのテーマ】

・New Standard Ver3

集客に特化した事業用テーマ

・STREETIST（ストリーティスト）

とにかくオシャレなあなたに

・ザ・トール

SEO・デザイン・機能の3拍子に定評

・Emanon（エマノン）

Web集客に特化したテーマ

・賢威

2万人を超えるユーザーが選んだ大ロングセラー

・オープンケージ

ブロガー向けとして支持されているテーマ

・LIQUID PRESS

プロが選ぶテンプレート

もっとプログラミングを学びたいなら

プログラミング言語の知識を学びたいならスクールも最近はだいぶ格安となってますので、視野に入れてみるのもアリかもしれません。

【オススメのプログラミングスクール】

・TechAcademy

自宅で学べるオンラインのプログラミングスクール

・Tech Boost

プログラミングスクール

・Tech Kids School

サイバーエージェントが運営する小学生向けプログラミングスクール

・CodeCamp

現役エンジニアによるオンラインプログラミングスクール

・DMM WEBCAMP

転職を本気で考えている方向けのプログラミングスクール

・Tech Boost

オンラインプログラミングスクール

・.pro

時代はAI！Python特化型プログラミングスクール

・ポテパンキャンプ

Webエンジニアを多数輩出しているプログラミングスクール