Webプログラミング初心者がWordPressの自作テーマを作るべき理由
Webサイトを作成したり、Wordpressのテーマなどを作成しています。当ブログのWordpressのテーマも自作です。
Twitterを見ていると、プログラミングを最近始めた方がWordpressのオリジナルテーマを作成しているのを見受けられます。
マナブさん(@manabubannai )のロードマップ進捗
自作テーマ完成しました。その名も「Every」
これから、配布の準備を始めていきます。
もちろん自分のブログにも使用します。このフェーズがひと段落すれば、次はそろそろ案件取りに行きたいな。 pic.twitter.com/z80oQupPYY
— 杉山翔平 (@shohei_sugi) 2019年4月4日
杉山さん（@shohei_sugi）という方はマナブさん（@manabubannai）という方のプログラミング教材を購入し、そのカリキュラムの中でWordpressのオリジナルテーマを作成したそうです。
ぶっちゃけ、僕がプログラミングを始めた頃なんて専門学校に通っているくせに、JavaとJavascriptが親戚と思っていたくらいなので、最近の勉強している人は成長度合いがすごいですね。
ただ、なぜプログラミングを始めたばかりの方がWordpressのテーマを自作する必要があるのか。それは、合理的な理由があります。
スポンサードサーチ
WordPressのオリジナルテーマ作成にはサイト作成の基礎が詰まっている
WordPressと一言で片付けていますが、この中には通常のWebサイトを作成する構築する手順までのニュアンスが入っています。
- HTMLとCSSを使用して画面をコーディング
- PHPとMySQLを使用してWebページを動的に動かす
- SEOなど利用したサイト運用を考慮する
つまり、《Wordpressのオリジナルテーマを作る = Webサイトを作る》ということになります。
HTMLとCSSを使用して画面をコーディング
通常のWebサイトを作成するときにまずやる事は、画面を作成する事。
ここでの工程は、プログラミングではなく「マークアップ」という工程になります。
この工程で、HTMLやCSSを必ず使用します。場合によってはJavascriptを利用して、Webページに動きを付けたりしてユーザーのUXを向上させたりします。
Web系のプログラミング初心者は基本的には、最初はプログラミングを学ぶというよりは画面作成の基礎であるマークアップを学びます。
なぜマークアップを1番最初に学ぶ必要があるのか
Webシステムを開発していても、ユーザーがちゃんと使えるように画面を作成する必要があります。
会社で働いていれば基本的には、画面を作成してくれる「コーダー」と呼ばれる人や「フロントエンジニア」がいますが個人では《０》から作成するしかないので、まずはHTMLやCSSなど勉強して軽いWebページなら作成できる必要があります。
HTMLやCSSを学ぶだけでも楽ではない
現在、Webを見る人の6-7割はスマホです。そのため、PCだけで見られるデザインというのはGoogleからも一般企業からももう求めらていません。
PCとスマホ両方で見られるサイト（レスポンシブデザイン）を作成する事が今は求められている
そのため、PCとスマホ両方で見られるために作成する必要があります。
PCとスマホで見られるWebサイトの画面のみを作成できるようになったら、仕事を受注したり自分専用のWebサイトを作成出来たり幅が広がります。
PHPとMySQLを使用してWebページを動的に動かす
HTMLやCSSでマークアップを学んだ後は、内部処理を作成しWebページを動的に動かす必要があります。
普段使用しているWebサービス（Twitterや食べログとか）は内部処理があって情報が更新されたり、作成されたりしています。
使用されている言語は様々ですが、WordpressではPHPとMySQLという言語が使用されて、内部処理が動き、記事の作成が出来たり、更新が出来ます。
本来のWebサービスを作成する際にはやる事が多いですが、Wordpressでは難しい設定やコーディングが特に必要がありません。
基本的には、記事を取得して表示したり、関連する記事を紐付けて表示したりするだけ。ただ、ここにWebサイト作成の基礎が詰まっています。
Webサイトの処理作成を学べる
ざっくばらんに言ってしまえばWebサイトの動きはこんな感じ
1: DBに情報を登録 2: DBから情報を取得 3: DBから得た情報を画面に沿った形にする 4: 画面上に表示する
これを全て《0》からPHPで書こうとすると難しいですが、Wordpressではこの一連の流れが便利な関数が用意されています。
例えば、全ての投稿とした記事を取得するだけであれば以下の2行のみで書けます。実際にはこの関数の中では「MySQLとPHPが使用されて情報を取得する」という一連の処理が行われています。
<?php while ( have_posts() ) : the_post(); ?>
// この中で記事のタイトルやリンクを取得する
<?php endwhile; ?>ここからリンクを取得したり、タイトルを取得したりする必要がありますが、投稿した記事を取得するだけであればこの数行で終了です。
こう言った関数を使用しながら、実際にWebサイトがどのように動いているのか理解しながら進める事で「イメージ」が出来ると思います。
最初はこの「イメージ」を持ちつつ、一連の作成が行えるようになると、実際にWebサイトを作成する際にも役立ちます。
WordPressのPHPはちょっと特殊だから注意
注意なのが、Wordpressの内部処理を書く際に確かに『PHP』を使用したプログラミングは行いますが、通常のPHPと比べて異なります。
上記で紹介したプログラムはWordpress内で動く特殊な関数です。なので通常のWebサイト作成では用いることは出来ません。
あくまで、Wordpressのプログラミング はWordpress内で完結するもの。『Webサイトの作り方は大体こうなっていて、表示方法はこうするんだなー』くらいに思っておくのが吉。
ちゃんとしたPHPを学びたいと人はオンライン学習サービスがオススメ。
SEOなど利用したサイト運用を考慮する
自分、もしくは仕事でWebサイトを作成するときには動けば終わりではなく、運用やPRを前提に作成する必要があります。
それは『SEO』というものを利用して、 Webサイトの集客を行う技法ですが、これがないとサイトにユーザーを呼び込む事が出来ません。
なのでSEOの知識を取り入れつつ、どういった構造で作成すればSEOの効果が上がるのかということを勉強する上ではWordpressdのオリジナルテーマ作成は最適と言えます。
（例） ✅H1タグは見やすくするためにフォントサイズやデザインを変更する ✅descriptionやkeywordを埋め込めるように設計する ✅Twitter cardsを埋め込んでSNSでShareしやすい設計にする
オリジナルのWordpressテーマはポートフォリオ代わりにもなる
・これからエンジニアとして働きたいなー
・ある程度HTMLやCSSは出来るけど何作ったらいいか分からない
これから「IT業界に転職しようと考えている人」や「ポートフォリオで何を作ればいいか分からない」といった人はWordpressで作成したWebサイトを提出すると企業から印象が上がりますよ。
- スキルの証明
- プライベートでも勉強するやる気
- プログラミングを学ぶ姿勢
上記でも述べている通りですが、Wordpressは1個のWebサイトです。基本的なHTMLやCSSやPHPがある程度理解していないと作成できません。
なのでポートフォリオを持っておくだけで色々証明できて、就職や転職が圧倒的に有利になります。
スポンサードサーチ
WordPressのオリジナルテーマの作成方法
レンタルサーバーなし、環境構築なしでWordpressのオリジナルテーマの作成ロードマップを当ブログで紹介しています。
僕が実際にオリジナルテーマをどうやって作成したのか。何を参考にしたのか書いているのでこれから作る人にとっては役に立つと思います。
オリジナルテーマを作って自分のサイトを運用するも良し、売ってお金を稼ぐも良し、ポートフォリオ代わりに作成するも良しです。
作ってみると結構楽しいですよ。