株式会社CodeUps

Figmaのデザインカンプからのコーディングになります。

実装のポイントですが、
・制作実績、ブログはカスタム投稿タイプを使用。
・動的にしていない画像部分にはwebp画像を使用いたしました。pictureタグを使用し、webp画像に対応していないブラウザにはjpgを表示するようにしました。
・制作実績詳細ページのスライダーはSmart Custom Fieldの繰り返しフィールドを使い更新しやすくしました。
・可能な限りピクセルパーフェクトでのコーディングをいたしました。
・CSS設計手法FLOCSSを用いて保守しやすい設計を意識しました。


今回のコーディングにあたり意識した点ですが、
・gulp、webpackなどの環境を構築する。
・DartSassを取り入れる。
・使いまわせそうなパーツから作成する。(ボタン、カード、列など)
・WordPressの処理の順序などを把握する（コアファイル）

gulp、webpackによる環境構築や、パーツから作成していくことなど新たなことに取り組みましたので環境構築からコーディングまで全体的なスキルアップにつなげることができたと思います。

これまでWordPressのテーマ制作を行なっていて、テンプレートタグを打ち込んだり、WP_Queryオブジェクトから変数を取得するだけの制作に違和感がありました。内部でどのように動いているのかや処理の流れが分からない状態で制作していたからです。ですので、制作途中でコアファイルの中や読み込み順などを書籍で調べました。
ざっくりとした処理の流れやメインクエリを活かすことが必要であることなど把握できた部分もありましたが、PHPの基礎が足りていないことや複雑な関数が読み取れずあまり理解できませんでした。
WordPressで高度なカスタマイズを行なっていくには深い理解が必要な部分もあるので今後に課題を残すことになりました。