ヘビ牧場

ヘビ牧場
  • Gulp
  • WordPress
  • PHP
  • JavaScript
  • CSS・Sass

爬虫類の飼育・繁殖について執筆していた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連携を実施。

  • レンタルサーバー