トップページのデザイン作成からWPへの実装を行いました。
期間
2023年3月〜2023年3月
お仕事概要
トップページのデザインリニューアルということで、
figmaでトップページのPC、SPのデザイン作成を行い、WordPress(Affinger)への実装を行いました。
(フッターはリニューアル対象外で、既存のものをそのまま使用)
- figma
- WordPress
- Affingerカスタマイズ
- ACF
- テンプレートカスタマイズ
- スライダー
- アクセス集計機能
- レスポンシブデザイン
お仕事詳細
トップページのデザインリニューアルということで、
figmaでトップページのPC、SPのデザイン作成を行い、WordPress(Affinger)への実装を行いました。
下の画像は対応前のページになります。Affingerの機能で記事一覧を表示する形でした。
今回はこのトップページを固定ページに変更しました。
対応前のトップページ
トップページの実装方法はテンプレートファイルを作成し、固定ページの記事編集画面から表示内容を指定できる形としました。
指定方法はACFで設定したカスタムフィールドで、画像や表示する記事、記事数、見出しテキストなどが設定できるように実装しています。
PC
デザインデータ(figma)
実際のページ
SP
デザインデータ(figma)
実際のページ
※納品から数日経過していること、デザイン変更があったことからデザインデータと異なる部分があります。
※ブラウザのスクリーンショットの画像のため実際の表示と異なる部分があります。
人気のキーワードは、タグをアクセス数の多い順で表示しています。
当初はプラグインでの実装を検討していましたが、余分な機能等が多く、自作する方向となりました。
ACFを利用してアクセス集計機能を実装いたしました。
50行ほどのコード追加で、ページアクセス数が集計でき、管理画面でアクセス数を確認することができます。
※担当したサイトのURL(リンク)を記載させていただいていますが、納品時(当方で制作したもの)と異なる場合がございます。