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

2020/05/16 0:54

[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をコンパイルする為の設定方法

http://phper.pro/359

 

 

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

 

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

 

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

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

 

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

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

 

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

http://phper.pro/471

 

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

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

 

 

⑤Wordpressの知識

 

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

 

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

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

 

 

⑥自作用テーマの準備

 

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

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

 

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

https://phper.pro/365

 

ファイルをダウンロードしてローカルの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のコードについてググりながら、ひたすらコーディングしていく事ができるはずです。

 

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

 

 

 

この記事の続きからは「WPの自作テーマ作成をやってみたい」という初心者向けの内容となってます。

①の準備編にも書いてますが、まずはこちらのファイル一式の中身に沿った指南書となりますので、下記ファイルをダウンロードしてお使いください。

 

テンプレファイル一式 : ダウンロード

 

 

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

 

現場から以上です!

 

 

 

もしテーマを使うなら

 

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

 

 

【オススメのテーマ】

 

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エンジニアを多数輩出しているプログラミングスクール

 

917

PICK UP