【はじめての方はこちらをクリック!】《独学応援ブログ》では、Web制作の独学・営業・案件の進め方などのお悩み解決につながる記事を書いています。

WordPress化は3日で学べます【初心者向けの勉強手順まとめ】

WordPress化は3日で学べます。【開発環境の準備からSSL化まで】のサムネイル
平均読了時間→ 2

WordPress化ってPHPとか色々あって難しそう…

その疑問、この記事で解決しましょう!

本記事の内容

  • PHPが使えなくても大丈夫
  • おすすめの動画
  • 3日間集中勉強法
  • おすすめの本とその読み方
  • デバック方法

今回は多くのWeb制作初心者がビビっているであろう「WordPress化」が、実はそんなに難しくないという話。

僕は独学開始からちょうど3ヶ月くらいの頃に、そのとき制作中だった友達のホームページを勝手にWordPress化しました(もちろん友人の使い勝手を考慮してのことですが)

ここではその話を中心に、PHPをマスターしてなくても静的サイトさえ作れていれば、難なくできてしまうということをお伝えできればと思います。

Web制作で稼ぎたいなら決して無視できないのがWordPress案件ですが、苦手意識を取り除いて、1件10万円以上の高単価かつクライアントにとって管理しやすいサイト制作ができるようになりましょう!

はじめる前に

SEO-bro

実際の学習をはじめる前に、ここでWordPress化がどれくらい単純かという話をしておきましょう。

ポイントは4つだけ。

  • PHPそのものを覚えてなくても大丈夫
  • 各ページに対応したテーマファイルを用意する
  • ヘッダーや投稿記事を呼び出す独自コードを使う
  • 記事一覧を取得するためのモジュールを使う

PHPそのものを覚えてなくても大丈夫

WordPressには独自のコードがあるので、それらを適切な場所に記述するだけで、テーマ編集くらいならしっかりできます。

なので、PHPを事前に深く学んでいなくても大丈夫。

むしろ、HTML&CSSやjQueryを使ってLPを作れるくらいの知識の方が大切だと思います。

各ページに対応したテーマファイルを用意する

この概念図がまさに答えなのですが、表示させたいページに必要なファイルを用意して、そこにHTMLとWordPressのコードを書いていけば、テーマファイルの完成です。

もちろんこれを暗記しなくても大丈夫ですから、実際にWordPress化を行う際に必要なものをひとつずつ確認して進めましょう。

ヘッダーや投稿記事を呼び出す独自コードを使う

各ページに共通しているヘッダーやフッター、投稿記事や固定ページの雛形はそれだけのファイルを作成して、トップページなどを作る際にはそれらをパーツのように組み合わせていきます。

そのパーツを呼び出すための独自コードが用意されているので、それを利用していくというわけです。

また、このように細かく分割しておくことでメンテナンスも楽になるというわけですね。

記事一覧を取得するためのモジュールを使う

記事タイトルやカテゴリーなどといった投稿ページの情報を取得し、それらを一覧表示させるには、PHPで書かれたモジュールを使用します。

つまり、ブログ記事一覧を表示させる決り文句があって、それを正しく書いておけば大丈夫ってことですね。

これもPHPで書くとはいえ、書くものは決まっているので、お手本を見ながら学んでいきましょう。

WordPress化って意外と単純。

これら、たった4つのポイントを押さえておけば、HTMLなどで書かれたファイルをちょちょいとイジるだけで、1日~2日もあればWordPress化できちゃいます。

僕が過去に取り掛かったWordPress案件では、jQueryが色々と使われているWEBサイトをWordPress化するというものがありました。

結果的にそれも基本的な部分をWordPressのコードに置き換えて、jQueryで実装されていた部分はWordPressのプラグインで再現できたのですが、そのときの僕はProgateでPHPをひととおり勉強した程度でした(笑)

ということで前置きが長くなりましたが、ここから僕がWordPress化を勉強したときの手順をまとめていきます。

いつもどおりYouTubeと本を使ってゆるーく、でも着実に学んでいく短期集中型です。

ひとりでも多くの方に参考にしていただけると幸いです。

それで行ってみましょう!

WordPress化は3日で学べます:1日目

初日はYouTubeで軽く勉強しましょう。

当サイトではおなじみのたにぐちまこと先生のとことん優しい解説シリーズから「WordPress開発講座 」をおすすめ。

集中して聞くために、1.5倍速再生を推奨しています。

全部で11本ありまして、もちろん全部有料級の素晴らしいコンテンツですが、超初心者のあなたに限っては3本目まででも構いません。

ここでの目的はあくまでも「どんな感じでWordPressのテンプレートを作るのか」という大まかな流れを掴むだけであって、この動画で完璧にマスターしようというわけではないからです。

むしろ、すべてを観るのはWordPressでブログを書いたり、テストサイトを作ったあとの方が懸命でしょう。

WordPressについてほぼ無知の段階で「カスタム投稿タイプ」の話を聞いても混乱するだけでしょうから。

動画としては相変わらず安定の有益っぷりなので、下手に初心者向けの技術書を買わなくてもいいんじゃないかと思います。

Progateは1周で卒業した僕ですが、この動画は何周も繰り返し観て、模写して、WordPressを学びました。

本当に便利な時代になったものです。

WordPress化は3日で学べます:2日目

初日の動画でなんとなく雰囲気は掴めましたか?

ここからは本を参考にしながら実際に静的サイトをWordPress化していきます。

というこでまずは参考図書をご紹介。

ビジネスサイトを作って学ぶWordPressの教科書 Ver.5x対応版

WordPressを解説している本は非常にたくさん出版されていますが、WordPress化について細かく解説している本って案外少なかったり、情報が古かったりします。

その点、この本は2019年出版ということで解説しているWordPressのバージョン的にも問題ないですし、何より構成が実践的なんです。

目次
  1. 開発環境の構築
  2. 素材のダウンロードと表示
  3. Gutenbergの説明
  4. 基本サイトの構築
  5. ユーザビリティの向上
  6. SEO対策
  7. SNSとの連携
  8. アクセス解析
  9. SSLによるセキュリティ対策
  10. プラグイン作成
  11. パフォーマンス・チューニング

全部読まなくてもいい

ダウンロードした素材を使いながら上記の流れで学び、気がついたときには非常にしっかりとした企業サイトを作り上げられるというかなり実践的な一冊です。

しかし、今回も全部は読みません(笑)

今回は④までです。

⑤からはさっとを目を通して、今のあなたに必要そうなとこだけ読んで真似すれば大丈夫。

バカ正直に全部読んでも覚えられやしませんから、まずはWordPress化を覚えるために絶対に必要な知識にだけ短期集中しましょう。

ちなみに、あえてこの本の難点を挙げるとすれば、誤字脱字の多さ(笑)

これに関しては訂正情報としてまとまっているので、ちょこちょこ確認すれば問題ありませんが、僕も実際に読みながらコードを書いていて、さすがに間違えすぎだろって6回くらい突っ込んでました。

まずは①と②をやってみる

ということで、2日目は①「開発環境の準備」と②「素材のダウンロードと表示」をクリアしましょう。

開発環境の構築なんてはじめての方がほとんどでしょうから、①でつまずくかもしれませんが、ここは今後非常に役立ちますので、頑張りましょう!

また、開発環境の構築方法はこの本で紹介されている以外にもたくさんあります。

先出のたにぐちまこと先生の動画で紹介されている方法やAWSを使う方法など、かなりの選択肢がありますので、気になる方は後日ググってみてください。

PHPの基礎知識に関してはもちろんあった方がいいですが、正直知らなくてもWordPress化はできます。

WordPress独自のタグも多いので、本に書いてあるとおりに進めるだけでも十分学べます。

WordPress化を学ぼうとしているあなたなら、すでにHTML&CSSを理解できているはずですから、それだけの頭脳があればまったく問題ありません。

また、余力のある方は本に載っている企業サイトを作らずに、いきなり自分のポートフォリオをWordPress化してもいいと思います。

WordPress化したついで、ブログもはじめられますしね。

アウトプットの機会が増えるって良いことだと思いますよ。

僕は友人のポートフォリオサイトを作るためにこの本を購入して、読みながら人生初のWordPress化に挑戦しました。

WordPress化は3日で学べます:3日目

最終日の3日目は③と④です。

ただ、③「Gutenbergの使い方」はWordPressでの記事の書き方なので、知ってる方はもちろん飛ばして大丈夫です。

知らない方もサラッと読む程度で理解できるレベルなので、心配はないかと。

問題は④「基本サイトの構築」ですよね。

テンプレートの構造や優先順位を確認しつつ、YouTubeでたにぐちさんがサラッとやっていたことをあなたが実践する番です。

僕の場合は、WordPress化した途端にハンバーガーが効かなくなってしまったことがありましたが、原因はもともと僕が用意していたjQueryとWordPress側のjQueryとで相殺していたからでした。

functions.phpでの読み込む順番を変えたり、すべてのscriptをfunctions.phpにまとめないなど、対応策は色々あるようです。

WordPressでのデバッグ方法

基本的には本に書かれていることを真似するだけなので、トラブルもなく学べるはずですが、困ったときはエラーの原因を追求するなどして、着実に成長していきましょう。

念のため書いておくと、WordPressでのデバッグはwp-config.phpに書かれている

define( 'WP_DEBUG', false );

という記述を、

define( 'WP_DEBUG', true );

に書き換えるだけです。

こうすると、エラーになった際に「どこのファイルの何行目にこんなミスがあるよ」って英語で教えてくれるようになります。

セキュリティ上の観点から基本は”false”になっているようなので、問題が解決したら”false”に戻しておきましょう。

まとめ

実際にチャレンジしてみていかがだったでしょうか?

案外、単純だったと思います。

同じPHPを使った作業でも、自動返信機能付きの問い合わせフォームを実装するのとはわけが違いますからね。

基本的にWordPress独自の構文に慣れてしまえば、オンラインマニュアルを見ながら進められるようになりますし、これで10万円の案件を受注できるようになると考えたら、非常にコスパがいいと思いませんか?

このあとさらに「カスタム3兄弟」の使い方を学べば、本格的なコーポレートサイトも作れるようになり、いよいよ案件ひとつで20~30万円くらいを見積もれるようになります。

がんばる価値のあることだと思いますから、ぜひとも挑戦してみてください。

ちなみに、今回ご紹介した本での学習ですが、僕はKindleで読んでました。

写真にあるとおり、書見台に載せて充電しながら使うのも効率的でしたよ。

それでは、最後に今回の内容をまとめておきましょう。

まとめ
  • まずはYouTubeで雰囲気をつかむ(ハードルの低さを知る)
  • 本を読みながら開発環境を整え、目標物を確認する
  • テンプレートの構造や優先順位を学びながら、WP独自のタグを使って基本サイトを作る
Visited 31 times, 1 visit(s) today
ご感想はぜひツイートお願いします🧑‍💻
ABOUT US
めがねん管理人
Web制作の独学を「ただしく、くわしく、わかりやすく」|フリーランス5年目|Web制作の独学者向けブログ《独学応援ブログ》、無料コミュニティ《独学応援サロン》、個別サポートサービス《独学応援メンター》運営|ガジェット、SF、犬が好き🐶