爬虫類についての記事を書いていたWordPressブログサイトをオリジナルテーマでフルリニューアルしました。
Gulp
- MAMP PRO環境（SSL化・バーチャルホストを設定）とのホットローディング連携
- scssのコンパイル
- jsファイルの圧縮
- 画像の圧縮、png・jpg画像のWebP変換（ソースコード側の画像）
WordPress・PHP
機能面
実装した機能の抜粋となります。
- カスタム投稿タイプで記事を分類
- カスタムタクソノミーでタグ機能を実装
- トップページKV部分におすすめ記事5件を表示
- トップページに各投稿タイプを更新日順に2件ずつ表示
- sitemap.xmlの自動生成処理を実装
- ページネーションの実装
- 各記事の目次を自動生成
- 各記事のパンくず・パンくずのJSON Schemaを自動生成
- 検索機能の実装（全体検索・カスタム投稿ごとの検索）
- ACFのカスタムフィールドと連携して投稿エディターと各種SEO系タグを実装
- ACFのオリジナルwysiwygエディターの作成
- TinyMCEプラグインを作成し、wysiwygエディターにオリジナルボタンを追加
- Gutenbergエディターの制御・機能制限（一部の固定ページのみ利用）
- Contact Form 7を使用して問い合わせフォームを実装
セキュリティ対策
実装した機能の抜粋となります。
- API機能によるユーザー名露呈防止
- 投稿者アーカイブによるユーザー名の露呈防止
- WordPressバージョンの露呈防止
- ログインURLの変更
- WordPressとプラグインの自動更新停止
- その他不要機能の停止
使用プラグイン
なるべく各種機能を自分で実装するため最低限の利用としました。
Advanced Custom Fields PRO
- Flexible Content（柔軟コンテンツ）をメインエディターとして採用（一部固定ページのみGutenbergを使用）
- フロント側は別途カスタマイズ
ACF: Better Search
- ACFで作成した投稿は「wp_posts」ではなく「wp_postmeta」テーブルにデータが格納されるため、投稿データを検索結果に含めるために利用
Contact Form 7
- フォーム機能の実装に利用
- スタイリングやバリデーションは別途カスタマイズ
JavaScript
- Vanilla JSで作成（脱jQuery）
- スライダーはSplideを使用（Vanilla JSの軽量ライブラリ）
- 各種スクロールアニメーション処理
- 検索フォームのバリデーションを実装
- 各種リサイズ時の処理
- Contact form 7と連携した問い合わせフォームバリデーションの実装
- Contact form 7と連携したサンクスページへのリダイレクト処理
- Gulpにてファイルを圧縮
Sass
- css設計はBEMを採用
- スマホ画面は各種デバイスに対応するため「vw」を利用し、リキッドレイアウトでコーディング（scssのfunctionにてpxをvwに変換）
- PC〜タブレット画面はコンテンツ幅のみ「vw」を利用し、他はソリッドレイアウトでコーディング
- Gulpでコンパイル
- 役割ごとにscssディレクトリを設計
その他
- htaccessによる旧URLから新URLへの301リダイレクト
- htaccessによるURL正規化（www有無・http→httpsへのリダイレクト等）
- Google Tag Managerによるタグ配信・トリガー設定
- Google Analytics4によるアクセス解析
- Google Search Consoleによる検索パフォーマンス解析
- Microsoft Clarity（ヒートマップツール）による解析
- editorconfigを使ったフォーマット管理
- Gitでのバージョン（管理テーマディレクトリ、Gulpでコンパイルするソースファイルなど）