React・ヘッドレスCMSで構築されたコーポレートサイトのWordPressへの組み込みまでを担当しました。
※画像、テキストはダミーのものです。
| 解析 | 1週間 |
| コーディング | 2週間 |
| WP・PHP化,各ページ作成 | 5日間 |
| 使用ツール | HTML,CSS(scss),JavaScript,PHP,WordPress |
| 対応機種 | PC,SP |
サイトについて
元のサイトはReact・ヘッドレスCMSで構築されたコーポレートサイトを、運営・更新しやすくするためWordPress化したものです。
作業工程について
元サイトの解析
まず手始めとして、元サイトの構造・サイトマップを分析しました。そして、CSS,JSの記述を使用するため、SCSSに逆コンパイルを試みました。しかし、調べたところ現状において逆コンパイルのツールはなかったので最初から作成することにしました。
トップページの作成
元のサイトを参考に一からHTML,CSS,JSでトップページを作成しました。作成するにあたって、元のサイトを完コピするのではなく、セクション,コンテンツの余白や文字の段組みの調整など細かな改善をしました。
WordPressへの移行
作成したトップページをローカル環境にインストールしたWordPressへコピーし、PHPに書き換えました。その後、個別ページを作成し、必要なものはPHPで構築しました。
管理画面のカスタマイズ
WPの管理画面では利用者が、必要な項目だけの入力で管理しやすいようにプラグイン「Advanced Custom Fields」「CPT UI」で目的別のカスタム投稿欄を作成しました。
作業してのコメント
投稿記事の取得やページネーション・パンくずリストの表示などのPHP周りの書き方が今回学べて良かったです。また、全てをコーディングで書くのではなく、状況に応じてWPに元からある機能でページ作っていくなどの使い分けを学べました。