07-03 / LEVEL 03
JUNKBRANDING
Headless WordPress
スクールの学習用デモ作品です。実在の受注実績を表すものではありません。
記事・特集・研究を読むデザイン・技術メディア。WordPressで管理した内容をREST APIで取得し、独立した公開画面に表示します。
作品情報
- 想定業種
- デザイン・技術メディア
- 技術スタック
- WordPress / REST API / JavaScript
- デザインコンセプト
- 記事・特集・研究を、余白とタイポグラフィ、編集された図版で読み分けるデザインメディア。
- アニメーション
- ページ遷移と図版の表示演出。動きを減らす設定に対応。
主な実装機能
- WordPress REST APIと独立したフロントエンド
- 記事・特集・研究・著者のコンテンツ管理
- カテゴリー絞り込みと検索、研究グラフの切り替え
- 公開・非公開の変更を次の取得へ反映
学習できる内容
- 記事・特集・研究・著者をWordPressで管理し、公開画面がAPIから受け取る情報を設計する。
- REST APIから本文・画像・独自項目を取得し、一覧と詳細ページを作る。
- 検索・カテゴリー絞り込み・研究グラフの切り替えをJavaScriptで実装する。
- APIの読み込み中・取得失敗・記事なしを表示し、再読み込みできるようにする。
- 公開・更新・非公開の反映を確認し、下書きとパスワード保護記事を公開画面から除外する。
ソースコードについて
提供されたフロントエンドとCMSプラグインを接続し、独立した初期HTML配信、編集項目、公開APIの保護、スマートフォン表示を整えています。記事・著者・研究データは架空、提供画像は生成画像です。
ポートフォリオ制作のポイント
- CMSと表示を分離するヘッドレス構成
- URLで共有できる検索・表示切り替え
- API取得失敗時の案内と再試行
この制作例から学ぶ
デモを操作した後は、使われている技術と課題のつながりを確認できます。