みなさま、お疲れ様です。
フリーランスWEBデザイナーのnonです。
本日は、HTMLサイトのWordPress化の流れについてのお話です。

Word Press化に挑戦した経緯

以前からWordPressでテーマを自作することに興味を持ち、昨年の9〜10月頃、自身のサイトを自作テーマにリニューアルしようと計画していましたが、その頃私自身色々あり、結局自身のサイトは有料テーマのSWELLで整え直したため、すっかり自作テーマへの興味が薄れていました。
2024年に入り、一緒に切磋琢磨しているお仲間からWordPressについての相談を受けたことで再度自作テーマへチャレンジしてみようと思い、デザインカンプから制作してみました。
今回は技術的な部分はなしで、大まかにどんな流れで進めていったのか記載しておこうと思います。

私が行ったHTMLサイトのWordPress化の流れ

1. Figmaでデザインカンプを制作
   後から応用が効くように架空の企業を想定したシンプルなデザインを5ページ制作しました。(SP版、PC版)
   次の工程でBootstrapを用いてコーディングするので、12カラムを意識したデザインにしています。
   

2. Bootstrapでコーディング
   時間短縮とメンテナンスの簡素化のためにBootstrapでコーディングしました。
   WordPressのテーマの中にはBotstrapベースのものがあって、相性もいいのでは？と思いました。
   

3. UdemyでWordPress化の講座を受講
   PHPはほんの少しだけ知識がありましたが、条件分岐でコケていたので初心者と言っていいレベルです。そのためまずはUdemyで学習。
   講座の手順に沿って自分のコードも修正していきました。
   今回受講したのはコチラのはしもとよしみつ先生の講座です。他の講座に比べて時間が短かいのでまずは手を止めて受講し、二巡目は手を動かしながら受講しました。
   https://www.udemy.com/share/10azZY3@SYz9SDtGUDwFpqShdMw6E7Xv1IGoKvd5PZxkB4CmYgUfain_3byZVwyUXMlOdX6-Jw==/
   はしもと先生、分かりやすい講座をありがとうございます。
   

4. ブログ記事を参考
   講座で触れられなかった部分に関してはじゅんぺい様のブログ記事を参考にさせていただきました。
   https://junpei-sugiyama.com/wordpress-original-theme-1/
   じゅんぺい様、大変参考になりました！ありがとうございます。
   

5. ググる
   ここまででうまく動かなかった部分はGoogle検索でなんとか正解に辿り着きました。
   特に、記事一覧ページの記事表示件数をデバイスによって切り替えるコードがうまく動かず苦戦しましたが、無事に解決しました。
   

以上、私がHTMLサイトをWordPress化した際の流れです。
主に夜間の2〜3時間の作業で、毎日はできませんでしたが2ヶ月ちょっとで完成したので、自分ではスムーズだったと思います。
今後お仕事の幅を広げていくことも視野に入れた挑戦でしたが、まだまだ理解が浅いと感じましたのでまたチャレンジしてみようと思います。

私自身の備忘録だけでなく、どなたかの参考になれば幸いです。