メディア・ブログ型サイト
ビジネスオウンドメディアのデモ。TOP・記事一覧・記事詳細の3画面を1ファイルで切り替え表示。
【実装概要】
メディアサイトに必要なTOP(特集カード・新着記事グリッド)・記事一覧(2カラム+サイドバー)・記事詳細(目次・エディタスタイル・関連記事)の3画面を1デモに凝縮。
WordPressで実装する際のテンプレート設計・タクソノミー構成・ページネーション実装をコメントで明示。
記事内CTA(ACFで差し替え可能)も実装済みです。
【実装キーワード】
3画面デモ切り替え/記事内目次(h2/h3連動)/エディタスタイル整備/タクソノミー設計/ページネーション/パンくず構造化データ/サイドバー設計
対応できる案件
3画面切り替えデモ(TOP・一覧・詳細)
→ デモ切り替えスイッチャーでTOP/記事一覧/記事詳細の3画面を1ファイルで切り替え。ディレクターがページ遷移なしにすべての画面を確認できる構成。
記事内目次(h2/h3対応)
→ 記事詳細ページにh2/h3見出しと連動した目次ボックスを実装。デモでは固定HTML、WordPressではJS・querySelectorAllでh2/h3を取得し自動生成。TOCプラグインとの代替実装も対応可能。
エディタスタイル整備
→ entry-content内のh2/h3/blockquote/table/吹き出しのスタイルをCSS設計。WPのadd_editor_style()で同じスタイルをエディタにも適用する前提の設計。
カテゴリフィルタータブ
→ TOPページにカテゴリフィルタータブを実装。タブクリックで記事カードをフィルタリング。GTMでdata-cat属性を使った計測も対応。
記事内CTAバナー(ACF差し替え対応)
→ 記事本文内と記事下に設置するCTAバナーをACFで管理する設計をコメントで明示。キャンペーン期間中のバナー差し替えがコード修正なしで対応可能。
ページネーション・パンくず
→ 記事が増えたときに困らないよう、ページネーションとパンくずはWP_Queryベースで最初から組んでいます。
記事管理
WP標準投稿で記事を管理。カテゴリ・タグのタクソノミーで絞り込み。アーカイブページはcategory.php/taxonomy.phpで自動生成
目次
JSまたはTOCプラグインで自動生成。h2/h3を対象に番号付きの目次ボックスをサイドバーに固定表示
記事内CTA
ACFで記事中・記事下のCTAバナーを管理。「表示期間」「リンク先URL」「バナー画像」を管理画面から設定。コード修正なしでキャンペーン対応
ページネーション
paginate_links()でページネーションを生成。posts_per_pageで1ページの件数を管理画面から設定可能
サイドバー
register_sidebar()でウィジェットエリアを登録。人気記事・カテゴリ・CTAバナーを管理画面から並び替え可能