「WordPressのおすすめ勉強法は？」←短期間で身に付ける方法がある
ワードプレスを勉強しろ！って言うけどどうやって学べばいいのかよく分からない、とりあえずローカル環境を構築して管理画面からカスタマイズはできた、といっても本やサイト通りにやっただけなんだけどね(;^ω^)
こんなニーズに答える記事になります。
WordPressの学び方（勉強手順）が分からない方に向けて書きました、私自身も仕事でワードプレスをカスタマイズして使う機会があるので、割と有益な情報を提供できるのかなと思います。
本気でWordPressを学びたい人だけ読んでください、私も本気で解説させていただきます。
本記事で解説している事をそのまま実践すれば、短期間でWordPressの基礎以上は理解できるかと思います。
あると便利なスキル・環境
- HTML/CSSの基礎
- PHPの基礎
- WordPressのローカル環境
上記はあると良いだけで必須ではないのでご安心ください、勉強過程で身に付ける事ができます。
それではみてきましょう。
最初に：WordPressを勉強する目的を明確にする
WordPressを勉強する前にその目的は明確にしておきましょう。
ブログを開設したいから
WEB制作の勉強の一環として
WordPressのおすすめ勉強法「テーマの自作」
※WordPress導入時に「Twenty Fifteen」を含む３つのテーマがインストールされているはずです（管理画面から、「外観→テーマ」で確認できます）
実は、今回私がおすすめする勉強法は、テーマを自作することにあります。
いきなりテーマの自作なんて無理でしょ？
可能です。テーマの自作自体はそれほど難しくありません、テーマを作ることはサイトを作ることと同義です、がゆえに「テーマを自作する」のはハードルが高いと勘違いされる方も多いんですが、やってみれば意外と簡単だったりします。
これについては後述しますので、とりあえず読み進めてください。
テーマを自作する事で得られるもの
なぜテーマを自作するのか。それはWordPressにおいて必須レベルで理解しておきたい点が網羅的に学べるからです。
投稿した記事の表示、パーツ分け、各テンプレートファイルの役割や使い方など、WordPressでWEB制作をするなら必ず知っておきたいことが学べます。
配布テーマはダメなの？
確かに配布テーマを使って勉強することもできますが、管理画面でのカスタマイズ方法を学べる程度です、おそらくファイルを直接編集するには中がコードだらけでハードルが高く挫折する可能性大。
配布テーマは必要なテンプレートファイルが揃っている分、それがなぜ必要なのか感覚的に分かりづらいという面もあります（勉強に不向き）
テーマを自作すれば必要なファイルを足していく過程が勉強になり、その役割を理解しやすくなるので勉強に向いているというのが私の見解です。
「テーマ自作」勉強法を４ステップで解説
WordPressの勉強方法として「テーマの自作」をおすすめする理由を理解した上で、学習手順について紹介しておきます。
手順を全て解説するとなると膨大な量になるので、スタートから走り出すまでの手順を４ステップで簡単に解説させていただこうかなと思います、以下の通りです。
- テーマディレクトリとファイル作成
- デバッグから学ぶ「急がば回れ」
- １で作ったファイルにマークアップ
- パーツ化してテンプレートの理解
- まとめ：後は欲しい機能を足していくだけ
WordPressをローカル環境に用意し、それを参考にそれぞれ解説します。
ローカル環境？WordPressってどうやって用意するの？
次にローカル環境を構築しますXAMPPダウンロードからお使いのPCに合わせてインストールしてください。
最後に設定をすればローカル環境の完成です、設定方法についてはXAMPPを使ってローカル環境にWordPressをインストールする方法を参考にしてください、詳しく解説されています。
ステップ１：テーマディレクトリとファイル作成
WordPressの管理画面にログインできるという前提で話を進めさせて頂きます。
まず、最初にテーマディレクトリとファイルを一つだけ用意しましょう、これが自作テーマの第一歩となります。
テーマディレクトリの作成
テーマディレクトリは[xampp/htdocs/wordpress/wp-content/themes/]に好きな名前で作成してください（上記参照、パスが分かりにくいという方は「XAMPP」の保存先から辿ってみてください、必ずあります。）
[xampp/htdocs/wordpress/wp-content/themes/sample]となります。テーマ内にファイルを一つだけ作る
テーマディレクトリを作成したら、その中に[index.php]というファイルを作成しましょう、ファイルの中には「hello, world」と書いておくと幸せになれるかも（書かなくてもいい）
ステップ２：デバッグから学ぶ「急がば回れ」
テーマディレクトリとファイルを用意出来たら次は管理画面から[外観→テーマ]に移動してください。
ここで先ほど作ったテーマが表示されていればOK（ここでは「sample」）
見当たらない、、、代わりに変なメッセージがある。
嫌な感じの文面ですがご安心ください、これが良い勉強になります。
以下のテーマはインストール済みですが、足りない部分があります。
sample スタイルシートが見つかりません。
先に答えを言うと、[style.css]というファイルがテーマディレクトリ「sample」に足らないということです、先ほど作成した[index.php]と同じ場所に作っておきましょう。
テーマにstyle.cssを追加し更新すると、、、
エラーが消えてテーマとして認識されていることがわかります、ついでにテーマを有効化しておきましょう（[index.php]ファイル内に何も書いていなければ真っ白なサイトが表示されていると思います、書いていればその内容が表示されているはず）
表示されたことを喜ぶ前にインプットしたことを整理しましょう、でないと勉強になりません。
WordPressについて分かったこと（勉強になったこと）
- テーマは
[themes]の中に格納されている - 独自テーマの名前は自由に付けていい
- テーマには
index.phpとstyle.cssが必須
これって当たり前のことなんですが、配布されているテーマを使っていると意識することがありません、自作するからこそ分かることです（テーマ自作で勉強する利点）
勉強する際のポイントについても触れておきます。
「トライアル・アンド・エラー」
これが基本です。
ステップ３：①で作ったファイルにマークアップ
ステップ１で作成した[index.php]の中に簡単にマークアップしてみましょう、HTMLが全く分からないという方はドットインストール「HTML入門」で基礎だけでも勉強してきてください。
ここではファイル編集に専用エディタを使う様にしましょう、私は「Atom」を使用しています、他だと「SublimeText」「Brackets」なんかが人気ですね。
分からないことが分からない、、、
そんなこともあろうかとコピペ用のコードを用意してあります、index.phpに下記のコードをコピペしてください。
index.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
<style media="screen">
header {
background-color: red;
}
.content {
background-color: yellow;
}
footer {
background-color: blue;
}
</style>
</head>
<body>
<!-- ヘッダー -->
<header>ここがヘッダー</header>
<!-- コンテンツ -->
<div class="content">ここがコンテンツ</div>
<!-- フッター -->
<footer>ここがフッター</footer>
</body>
</html>上記をコピペして保存すると、真っ白なサイトからちょっとだけ変わると思います。
HTMLに理解がある方はしっかり作りこんで頂いてOKです。
ステップ４：パーツ化してテンプレートの理解
ここからちょっとだけプログラミングの部分に触れますがご安心ください、基本的にはコピペするだけで大丈夫です。
WordPressでサイトを構築するには先ほど作成したファイルだけでは足りません、テンプレートファイルと呼ばれるものを用意し再構築する必要があります。
これについては説明するより作りながらの方が分かりやすいかと思います。
先ほど作成したindex.phpは３つのパーツに分けることが可能
index.phpはヘッダー、コンテンツ、フッターの３つの要素に分解することができます。
テンプレートファイルに置き換えると[header.php（ヘッダー）]、[index.php（コンテンツ）]、[footer.php（フッター）]ですね。
実際に分解してみます、まずindex.phpと同じ場所に[header.php]と[footer.php]を作成しましょう。
作成したら各ファイルにコードをコピペして保存してください。
header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
<style media="screen">
header {
background-color: red;
}
.content {
background-color: yellow;
}
footer {
background-color: blue;
}
</style>
<?php wp_head(); ?>
</head>
<body>
<!-- ヘッダー -->
<header>ここがヘッダー</header>index.php
※index.phpに関しては、先ほどコピペしたものは全て消した上で下記のコードをコピペしてください。
<!-- header.phpを読み込んでいる -->
<?php get_header(); ?>
<!-- コンテンツ -->
<div class="content">ここがコンテンツ</div>
<!-- footer.phpを読み込んでいる -->
<?php get_footer(); ?>footer.php
<!-- フッター -->
<footer>ここがフッター</footer>
<?php wp_footer(); ?>
</body>
</html>[get_header()]や[get_footer()]などの見慣れないコードについてはコメントアウトで説明している通りです。
全て用意できたらサイトを確認してみましょう、先ほどと変わってないはずです。
変わってないならやる意味なくない？
やる意味は大いにありです。
その理由としては、パーツ化することでメンテナンスしやすくなるからです。
ヘッダーファイルを修正する場合、各ファイルに同じコードを記述しているとその数だけ修正する必要がありますが、ヘッダー用のファイルとして分けておけば一回の修正だけで済みます。
フッターでも同じことが言えますね。
まとめ：後は欲しい機能を足していくだけ
色々と解説してきましたが、とりあえず本記事で解説できることはここまでです。
ここから何をすればいい？
サイトを作ってみてください。
進めていくと画像を読み込ませる事もあるでしょう、そんな時にどうやって画像パスを指定すればいいのか、その都度調べて学んでください。
記事ページを作っていると「アーカイブページが必要だな」「個別記事ページも必要だ」「ここにはサイドバーが欲しいな」なんてことが出てくると思います。
どのテンプレートファイルを作ればいいか、どうやって読み込ませるのか考えてみてください、ネットに欲しい情報は必ず落ちています。
一つのサイトが完成する時、WEB制作に必要なWordPressの知識は身に付いているはずです。
是非挑戦してみてください。
終わりに：ググる力を身に付けろ！
いかがでしたでしょうか。
少し難しそうだなと思った方もいるかもしれませんが、やる気さえあればWordPressはすぐに理解できます、スクールに通う必要は一切ありません、必要な情報は全てネットに落ちています。
重要なのは実際に取り組むこと、分からないことは「調べて試す」、これを繰り返しましょう。最初はうまくいかない事も多いかと思いますが、コツさえ掴めばすぐに上達します。
慣れた頃には欲しい情報を素早く見つける「ググる力」も身に付いているはず。
以上になります。
飲食→派遣→IT系ベンチャーに転職。
本業をベーシックインカムとし、やりたい事に挑戦するWebエンジニア。