Code-Free Creates

Webメディア｜WP管理画面を使わずに記事を投稿・管理できるフロントエンドCMSの構築

linkhttps://kireidelab.com/media/

課題

元々運営していたメディアサイトがあったが、ECサイトと同一のWPにメディア機能を持たせており、ECサイト用に導入したプラグインの影響で記事投稿にHTMLの手書きが必要な状態に陥っていた。

このことから、編集担当者のリテラシーに依存した運用が続いており、担当者交代のたびに引き継ぎコストが発生していた。

解決法

フロントエンドからWYSIWYGエディターを介して記事投稿を行えるカスタム管理画面を設計・実装した。
これにより、プラグインの影響を受けずに記事投稿を行える環境が作れた。

また、記事投稿のみでなく、ターム・監修者情報も全てフロントエンドから管理できる仕組みとし、WP管理画面に触れることなく投稿関連の操作を完結できるようにした。

これら動的機能に必要なタクソノミー設計・フォーム処理設計・フック処理など、WP側の設計はすべてCFCにて行った。

結果

メディア記事の編集担当者がHTMLを書くことなく、簡単に記事投稿を行えるようになった。

これにより記事の投稿ペースが向上し、1週に1本ペースでの記事投稿が実現した。

本案件はElementorを使用した構築ですが、構築した機能はBricksでも同様に動作します。

実装仕様

制作概要
BtoC企業 / 自社メディア
制作規模
固定ページ 2P
アーカイブページ・シングルページテンプレート 各1P
フロントエンド管理画面設計・実装
ECサイトAPI連携
記事移行 約200本
対応スコープ
投稿・タクソノミー設計, フロントエンドCMS仕様策定, 構築
使用ツール
Elementor, JetEngine, JetFormBuilder, JetSmartFilters
制作期間
約4.5ヶ月（設計〜検収完了）
投稿フォーム
  • フロントエンドよりフォームを介して投稿を作成・編集・削除することができる機能を実装。
    フォームの実装にはJetFormBuilderを用いた。
  • フィールドは、タイトル, スラッグ, カテゴリー, タグ, サムネイル, 本文, 公開ステータスのほか、監修者と独自カスタムフィールドまでをカバー。
  • 本文にはWYSIWYGエディターを採用し、クラシックエディターのような操作感で記事執筆・メディアアップロード・テーブル挿入などを行えるようにした。
  • 予約投稿に関してはJetFormBuilder標準機能で対応できないため、カスタムフック処理により独自実装した。
  • カテゴリーは親を選んだ後、その配下の子のみを選択可能にする必要があり、非同期処理で選択可能な子を抽出表示させた。
ターム管理フォーム
  • フロントエンドよりフォームを介してタームを作成・編集・削除することができる機能を実装。
    フォームの実装にはJetFormBuilderを用いた。
  • フィールドは、ターム名, スラッグのほか、独自カスタムフィールドにも対応。
  • タームの削除はJetFormBuilder標準機能で対応できないため、カスタムフック処理により独自実装した。
  • カテゴリーは親子の2層構造となるため、ターム作成・編集時に親を選択する制御も設けた。
  • ECサイトの商品リンクを投稿シングルページに表示させるため、タグにはEC連携用のフィールドを追加。
    ECサイトの商品IDを入力しておくことで、そのタグと関連付けられた投稿ページではAPIにより商品リンクが自動挿入される仕組みとした。
監修者管理
  • 独自コンテンツ「監修者」を実装。
    WPのユーザーではなく、JetEngineのカスタムコンテントタイプ（CCT）機能を用いて、依存関係少なく実装を実現した。
  • 投稿に監修者を表示させるには、JetEngineのRelations機能を用いた。
    作成済みの監修者がフロントエンド投稿フォームにてSelectフィールドに表示され、その中から監修者を選択することによりリレーションが設定され、投稿シングルページに監修者が表示される仕組みとなっている。
  • 監修者の作成・編集・削除はフロントエンドフォームから行えるよう実装。
    フォームの実装はJetFormBuilderにて行った。
管理画面内投稿フィルタリング
  • ローンチ時点で200件超の記事が存在したため、管理画面に記事フィルタリング機能を実装し、過去記事の改稿や未公開記事の抽出表示を行いやすくした。
    フィルタリング機能はJetSmartFiltersを用い、非同期で動作する仕組みにした。
  • フィルタリング項目は、タイトル文字列, 投稿日レンジ, カテゴリー, タグ, 公開ステータスの5軸で、複合絞り込みに対応している。
記事移行

既存サイトから記事 約200本を移行する作業も行った。

元は手書きHTMLで投稿されていた記事群であるため、

  1. CSVで記事一括エクスポート
  2. プログラムによるタギング変更処理
  3. 新タクソノミー設計へのタグ・カテゴリーの再マッピング
  4. CSVで記事一括インポート

という手順により、大量の記事を高効率で新規メディアに移植した。