爬虫類の飼育・繁殖について執筆していたWordPressブログをオリジナルテーマでフルリニューアルしました。
仕様
実装した機能の抜粋となります。※画像クリックで拡大します。
管理画面
- カスタム投稿、カスタムタクソノミーの実装
- ACFのFlexible Contentでオリジナルエディターを作成
- カスタムフィールドにて各種SEO周りのタグを実装
- TinyMCEプラグインを作成し、wysiwygエディターにオリジナルボタンを追加
- Gutenbergエディターの制御・機能制限（一部の固定ページのみ利用）
- セキュリティ対策（API機能によるユーザー名露呈防止、WordPressバージョンの露呈防止、ログインURLの変更等）
- WordPressとプラグインの自動更新停止、不要機能の停止
- sitemap.xmlの自動生成処理を実装
フロント画面
- ページネーションの実装
- 目次を自動生成
- パンくず・パンくずのJSON Schemaを自動生成
- 検索機能の実装
- Contact Form 7を使用して問い合わせフォームを実装
- スライダー、各種アニメーション、フォームバリデーションの実装（脱jQuery）
URL構成
- トップ：/
- 飼育繁殖の記事一覧：/breed/
- 飼育繁殖の記事：/breed/{slug}/
- アニマルスポットの記事一覧：/zoo/
- アニマルスポットの記事：/zoo/{slug}/
- ショップの記事一覧：/shop/
- ショップの記事：/shop/{slug}/
- 昆虫食の記事一覧：/food/
- 昆虫食の記事：/food/{slug}/
- 動物雑学の記事一覧：/trivia/
- 動物雑学の記事：/trivia/{slug}/
- タグ一覧：/tag/
- プライバシーポリシー：/privacy/
- お問い合わせ：/contact/
使用技術
- WordPress
- PHP
- JavaScript（脱jQuery）
- SCSS
- 各種計測ツール
※Google Tag Manager、Google Analytics4、Google Search Console、Microsoft Clarity等 - .htaccess
- Gulp
※ローカル環境（SSL化・バーチャルホストを設定）と連携し、ホットローディング、SCSSのコンパイル、JSの圧縮、画像のWebp化（WPのメディアライブラリ除く）を実施
使用プラグイン
なるべく各種機能を自分で実装するため最低限の利用としました。
Advanced Custom Fields PRO
- Flexible Content（柔軟コンテンツ）をメインエディターとして採用（一部固定ページのみGutenbergを使用）
ACF: Better Search
- 「wp_postmeta」テーブルのデータを検索結果に含めるために利用
Contact Form 7
- フォーム機能の実装に利用
- スタイリングやバリデーションは別途カスタマイズ
デプロイ環境
サーバーにSSH接続してGit連携を実施。
- レンタルサーバー