メディアリニューアルした話
-- Views
December 23, 25
スライド概要
WordPressの既存テーマで作成されていたメディアを独自テーマでリニューアルした話
関連スライド
各ページのテキスト
メディアリニューアルした話
初期(2019)
リニューアル１回目(2020)
リニューアル２回目(2021)
リニューアル３回目(2022)←今回の話
限られた時間の中で効率よく実装する
開発の背景 • 元々、既存のWrodPressのテーマをカスタマイズして使っていた • 表示速度が遅い • カスタマイズ性が乏しい（デザインや機能がテンプレートに依存する） →いちからサイトを作り直そう！
制作期間 • 3ヶ月くらい • 2022年3月 だらだら環境構築 • 2022年4月 ほぼ何もしてない • 2022年5月29日 本格スタート！ • 2022年8月1日 リリース！
技術検討の話 • 使った技術 • HTML・CSS・SCSS・JavaScript・WordPress（PHP）、webpack、Docker • ReactやVueを使ったヘッドレスCMSも検討したが、今の段階ではオー バースペックと判断 • 予期せぬ落とし穴もありそう →今後拡張もしやすいWordPressを使ったベーシックな形で実装
開発の流れ • 環境構築（Docker、webpack） • コーディング（HTML・CSS・SCSS・JavaScript）1,5ヶ月 • CMS化（WordPress）1ヶ月
工夫したこと１ • SPAではないけど、できるだけ表示速度を速くする！ 具体例） • CSS・JavaScriptの圧縮→webpack • スライダーの軽量化→keen slider • 遅延ロード
工夫したこと2 • SEO対策 https://www.notion.so/SEO-092ef291c38748fd90c775b598bc31ad
工夫したこと3 • 既存のテーマでできたことは、できるようにした 具体例） • 目次機能 • PV計測・ランキング機能 • CV計測機能 • クイックタグ （マーカー、プロフィール、ボタンなど）
意外と苦労したこと • メニューや検索窓など地味に作るのに時間がかかった • 既存のテーマの仕様に引っ張られて表示がおかしいものの調整 - 既存のテーマで出力されていたHTML要素が想定と違った - 使われていたショートコードのカバー • 全体的に既存のテーマで当たり前にできていたことが、自作するとできな くなることが多かった - 画像表示系など
今後やりたいこと • ヘッドレスCMSに挑戦 • ToBメディアでよくある資料請求の機能を作る