こんにちは、現役フリーランスエンジニア歴6年目のしょーご（@samuraibrass）です。
今回は「WordPressの教科書」という本をレビューしていきます。
この本は、もしあなたが
WordPressメインに、Web制作の受託案件メインで行って、制作会社とも仕事をしたい
こう思っているなら、「絶対にやって欲しい本」になります。
とはいえ、この本は激むずで、私含め多くの初学者の読者を振り落としてきました、そしていくつか案件をこなした後でも学べる部分があるほどの良書です。
そこで今回は「WordPressの教科書」の
- 何が学べるか
- 以前のバージョン（Ver5.X）からの改定場所
- 重点的に理解するべき部分
- 現時点で理解しなくていい部分
- 紹介されているものでなく、別の物を使うべき部分
ここを超具体的に解説していきます。これによって挫折率も下がるはずです。
今回の記事を読んでいただくことで、「WordPressの教科書」をこなす際に、かなり学習しやすくもなります。
「プロとしてのWeb制作者」を名乗る以上、ここのレベルを乗り越えるのは必須になりますので、ぜひ「Web制作を仕事にしたい人」は最後まで御覧ください。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
WordPressの教科書の立ち位置
「WordPressの教科書」はWordPress初学者の人がいきなり挑むにはかなりハードルが高い教材になっています。
なので、私は「WordPress学習のルート」をこのように定めています。
- ProgateのPHPⅠを学ぶ→PHPが全くできないと話にならないため
- Udemyの「ちゃんと学ぶ、WordPress テーマ開発講座」をこなす→ここでWordPress全般の基礎力を身につける
- 「WordPressの教科書」を学ぶ→応用力を育成する
- デザインからのコーディング実践演習【WordPress実案件レベル】をクリアする→実案件レベルに醸成する
- 実案件レベル達成！！
「WordPressの教科書」はまさに「基礎力がある状態で挑んで、実案件レベルに挑戦できるようにする最後の準備」といったレベル感になっています。
- 読了時点で、プライム・ストラテジー社が法人のお客様向けに提供しているサイトレベルのものが完成する。
- マークアップ部分の解説は最小限だが、記述は実務レベルのもの。
- 最初からHTML.CSS,JSが記述されており、それをもとにWordPress化していく流れ。
WordPressの教科書の概観をざっと見る
それでは、「WordPressの教科書」の概観から見てみましょう。以下のような内容になっています。
- 準備編：WordPressが動く環境を構築（Chapter1）
- 基礎編：テーマファイルの分け方、6.X以降の再利用ブロック、Full Site Editing、テンプレートページの作成、投稿うや固定ページの作成、フォーム作成、ユーザビリティ（Chapter2~5）
- 発展編：SEO、SNS、アクセス解析の設置、カスタム投稿、カスタムフィールド（Chapter6~9）
- 応用編：Webサイトの公開とプラスa（Chapter10）
作成するサイトのサイトマップは以下です。
トップページは以下のようになっています。
それでは、ここから簡単に中身を解説していくので、もう一度全体感を復習しておいてください。
- 準備編：WordPressが動く環境を構築（Chapter1）
- 基礎編：テーマファイルの分け方、6.X以降の再利用ブロック、Full Site Editing、テンプレートページの作成、投稿うや固定ページの作成、フォーム作成、ユーザビリティ（Chapter2~5）
- 発展編：SEO、SNS、アクセス解析の設置、カスタム投稿、カスタムフィールド（Chapter6~9）
- 応用編：Webサイトの公開とプラスa（Chapter10）
準備編：開発環境の準備（Chapter1）
- ローカル開発環境の準備
WordPressの開発環境を用意できるようになる
学習のポイント：XAMPPを使用になっているが…
WordPressの環境構築が「XAMPP」となっていますが、個人的に「Local」でいいのかなと思っています。
Localの方が圧倒的に簡単に構築できますし、複数サイトの管理やPHP、MySQLの設定も簡単なので、ここは「Local」を使えばいいかなと思います。
Localの使い方を徹底解説していますので、こちらで構築しておきましょう！！
VSCodeの準備
ここでは基本的なVSCodeの準備がありますが、実は本書の最後の方に「WordPress開発で役立つ拡張機能」を紹介しており、
明らかに最初から入れていたほうが得なので、この開発環境準備の段階で取り入れていいかなと思います。
以下２つは私も実務でお世話になっているので、まだ入れてなければこのタイミングで導入しておくといいかなと思います。
基礎編：ビジネスサイトを構築、Gutenberg（Chapter2~5）
- HTMLサイトをWordPress環境で表示できるようにする
- ファイルの分割
- ブロックエディタの概要とFull Site Editing
- カスタムメニュー
- 投稿・固定ページの作成とループ
- お問い合わせフォームの設置
- サイト内検索などアクセシビリティ関連
基本的なWordPressサイトの制作ができるようになる
ファイルの分割
ファイルの分割に関しては、WordPressではサイトを複数毎のページファイルで構成するのが一般的なので、header.php、single.php、footer.phpなどに分けていきます。
例えば以下は記事ページですが、4つのファイルで構成されています。
全体はsingle.phpというファイルがあり、その中でheader.php、content-single.php、footer.phpというふうに分けています。
こうしてパーツに分けることで、簡単に他のページでも使い回せるわけですね。
カスタムメニュー
カスタムメニューに関しては、例えば以下のグローバルナビゲーションを管理画面から設定できるようにします。
更に具体例を出すと、例えば以下は私のブログ記事のグローバルナビゲーションですが、
管理画面の「メニュー」からここのナビゲーションを変更することができます。
メインループとサブループについて
ループというのは「投稿した記事を表示する仕組み」です。
例えば、私のブログだとトップページには3つのループが存在します。
- メインループは基本的な記事一覧
- サブループは「人気記事一覧」「特定カテゴリの記事一覧」
など役割が異なったりします。
「WordPressの教科書」で作るサイトで言うと、例えば以下は「newsカテゴリの記事3つをサブループ」で回して、ニュースリリース記事を3つ表示させています。
以下の店舗情報一覧もループにより表示されています。
ポイントとなるのが、今回のサイトでは「複数の記事一覧」が存在しています。
この複雑さがビジネスサイト特有の難しさですね。
- ニュースリリース一覧
- 企業情報一覧
- 店舗情報一覧
- 地域貢献活動一覧
こういった「複数種類の一覧がほしいとき」はメインループとサブループ２つの知識が必要になり、「WordPressの教科書」ではたっぷり練習することができます。
<!-- メインループ処理(例) -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- ループ処理(例) -->
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
<?php endwhile; endif; ?><!-- サブループ処理(例) -->
<?php
$my_query = new WP_Query();
$args = array(
'post_type' => 'news',
);
$my_query->query( $args ); //データ取得
?>
<?php if( $my_query->have_posts() ): while( $my_query->have_posts() ) : $my_query->the_post();?>
//サブループ処理
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
<?php endwhile; endif; wp_reset_postdata(); ?>
ループはWordPressのコア機能の最も重要な部分です。しっかり理解しておきましょう。
お問い合わせフォームの設置
WordPressサイトのお問い合わせフォームの大半がプラグインを使った実装になります。
ここではContact Fotm7を使って実装していきます。
その他アクセシビリティ関連
- パンくず
- ページャー
- サイト内検索
パンくずは読者が現在位置を知るために必ず必要なものですが、これはプラグインで実装します。
また、ページャーに関しても「記事一覧ページ」があるなら必ず必要になる機能で、これもプラグインで実装します。
また、「サイト内検索」に関してはコードを書いて実装していきます。
注意点：全てを理解する必要は無いが、工程を飛ばさない
この「WordPressの教科書」の一番重い部分は実はこの「基礎編」のパートになります。ここをクリアしたら8割終了したようなものです。
ループやフックの解説はよくわからない部分もあるかもしれません。正直一旦理解を諦め飛ばしてもいいかなと思っています。
ただ、写経でもいいので「途中の工程は飛ばさないように」してください。
特に「何回も出てきそうな処理は関数にまとめて再利用できるようにする」機会がかなりありますが、これはかなり重要な考え方なので、なるべく吸収できるようにしたいです。
ここまでで基本的なWordPressサイトは制作できるようになりました！
発展編：SEO,SNS,アクセス解析,SSL（Chapter6~9）
- SEOプラグインの設定
- サイトマップの作成と送信
- SNS連携
- Google Analyticsとの連携
- カスタム投稿・カスタムタクソノミー・カスタムフィールド
サイト制作後の運用に必要なツールの設置ができるようになる
発展編とはいえ、実務で頻繁に使う機能が紹介されています。
SEOプラグインの設定とサイトマップの送信
「WordPressの教科書」では「All-in-One-SEO」を使うことになっています。
ただこのプラグイン、使わない機能がたくさんあるうえにサイトが重くなったりセキュリティ面で怪しい話をよく聞くので、今なら「SEO SIMPLE PACK」が良いのではと思っています。
Google Analyticsとの連携
Webサイトを作るなら、基本的に「Google Analytics」も設置するのが一般的です。じゃないとほとんど分析ができないですからね。
「WordPressの教科書」では「Site Kit by Google」というプラグインを使用して、「WordPressの管理画面内で分析結果を確認」できるようにしていきます。
実務でこのプラグインを使う機会はそこまで多くないので、ここでは「Site Kit by Google」を学習しなくても良いかなと思っています。
ただ、Google Analyticsは導入できるようにしておいたほうがいいかなと思います。
補足：自分のブログ・ポートフォリオサイトで練習するのがいいかも？
ここで紹介している「アクセス解析の準備」ですが、個人的には本で作る練習用サイトよりも、
自分がオリジナルで作って運用する予定のサイト
ここに導入したほうがPDCAを回しやすくていいかなと思っています。
私はWeb制作をされる方にはよく「WordPressブログを運用すること」を「強く」おすすめしています。
- Web制作の運用部分の練習ができる
- クライアントにも、制作以外を提案しやすくなる
- 意外にお金にもなる
事実、私もこのブログを運営する上で、多くの知識を見につけました。
最近は他社さんのメディア制作だけでなく、メディア運用までサポートさせていただく機会ができたのも、確実にブログ運営をしていたからです。
特に「Google Analytics」「Search Console」はWeb制作では必ず使うサービスになるので、ぜひ飛ばさず練習しておきましょう。
カスタム投稿・カスタムフィールド・カスタムタクソノミー
カスタム投稿：デフォルトの投稿で足りない場合に使用（例：デフォルトの投稿が「お知らせ」、カスタム投稿で「製品一覧」「お客様の声」など）
カスタムタクソノミー：カスタム投稿のカテゴリやタグ
カスタムフィールド：管理画面から簡単にテキストや画像を変更可能にする機能
Custom Post Type UIでカスタム投稿.カスタムタクソノミーを利用する
「地域貢献活動」の部分がカスタム投稿になります。
Advanced Custom Fieldsでカスタムフィールドを利用する
カスタムフィールドを利用して、画像やテキストを管理画面から簡単に変更可能にしていきます。
なんで管理画面から変更できるようにするのかと言うと、企業のWeb担当者はHTMLとか触れないので、納品後クライアント自身で簡単に更新できるようにするために、管理画面から更新できるようにしているのです。
例えば以下の部分を簡単に更新できるようにします。
応用編：さらなる機能（Chapter10）
- ローカル開発環境で作成したサイトを本番環境に公開
WordPressサイトをレンタルサーバーにアップロードできるようになる
必ず経験してほしい「手動での移行体験」
WordPressサイトを新規制作する際に、最近は移行には「All-in-One WP Migration」を使うことが多いです。
しかし！これだと以下のような緊急事態の場合に何もできなくなります。
- プラグインを使った移行が失敗し、サイトが真っ白になった
- 勝手にプラグインを本番環境に追加できない状態
- 一部の記事データだけを移行したいのに、プラグインで全部移行しか知らないから、パニクる
こういった問題、実は私も周りの多くのフリーランスも大体一回は経験しています。
なので、私は一回は「All-in-One WP Migration」を使わない移行も経験するべきだと思っているのですが、この「WordPressの教科書」では嬉しいことに、手動での移行方法を解説してくれています。
- phpMyAdminでDBからSQLファイルをエクスポート
- レンタルサーバーのMySQLにアップロード
- FTPを利用して、テーマファイル、プラグイン、画像ファイルを本番環境に移行
これを行うことで、「WordPressのファイルやデータベースがどこにあって、どういう仕組で動いているのか理解しやすくなる」ので、ぜひやってみてほしいと思っています。
WordPressの教科書Ver6.Xの感想
❶この本は実案件レベルである
今回「WordPressの教科書」がVer6.Xになったということで久しぶりに本書を開いてみましたが、やはり「Web制作の実案件レベル」であるなと思いました。
- とにかく関数化して再利用できるようにする
- 固定ページ内での親子関係など、サイトの階層関係がいい感じに複雑
- カスタムタクソノミーなどにも触れている
特に、「共通化したい要素はとにかく関数化する」という思考は「WordPressの教科書」を通じてかなり鍛えられると思います。
最初の頃は
なんでわざわざ処理を別のファイルに切り分けるの？
と思うかもしれませんが、WordPressサイトはコードの量が膨大になったり、プログラミングの暗黙の了解として、「同じ処理を何度も書かない」というものがあります。
特に独学の方はここの思考が身につきにくいです。
「WordPressの教科書」を通して「共通化したい要素はとにかく関数化する」感覚を鍛えてもらえれば、良きWeb制作者になれるかと思います。
❷Gutenbergの新機能は解説が浅い
出たばかりの機能なので仕方ないと思いますが、
WordPressのブロック開発・Full Site Editing
これに関しての解説は浅いかなと思いました。
ブロック開発のノウハウを求めている中上級者以上の開発者には合わないかもしれません。
ただ、本書全般でのPHPのコードの書き方自体はかなり参考になる部分が多いので、眺めてみると新たな発見があるかと思います。
WordPressの教科書の理解の目安
さて、この「WordPressの教科書」ですが、取り組んだ人全員が共通して持つ悩みがあります。
とりあえずなんとなく一周したけど、分からない部分もたくさんありました。これで先に進んでも大丈夫なんでしょうか、不安…
結論としては、半分ぐらい理解できていれば、とりあえずOKです。
正直な話をすると、私も全てを理解したのは数年経った後でした。
とりあえず一周して、開発における全体像が分かれば、特に問題ないです。
実務に関しては、デザインカンプから完全に0からコーディングする訓練が必要なんですが、そのレベル感の人に、ちょうどよい課題を準備しています！
ぜひこの先は実践レベルのWordPress課題を！
「WordPressの教科書」が終了したら、ぜひ弊課題の「【上級】デザインカンプからのコーディング実践演習【WordPress実案件レベル】」に挑戦してみてください。
この課題では「WordPressの教科書」で練習した様々な機能を実装することになるので、良い復習になります。
また、「二回の表示確認レビュー」をつけており、実務とほぼ同じ流れを経験することができます。
WordPressは写経するだけでは身につかないので、最後に0から構築する経験を積んでから、実務に望みましょう！
「【上級】デザインカンプからのコーディング実践演習【WordPress実案件レベル】」
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
これを解説している私はWordPressサイトのオリジナルテーマの新規制作案件を30件以上こなしてきました。