見積依頼 >
ポートフォリオ top> コーポレート> C4 メディア・ブログ型サイト

メディア・ブログ型サイト

ビジネスオウンドメディアのデモ。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ベースで最初から組んでいます。

このジャンルでよくある実装留意点
管理画面のエディタと実際の表示が合っていないことがよくあります。add_editor_style()でエディタにも同じスタイルを当てて、書いた通りに見える状態を前提にしています。
WordPress・CMS設計(運用イメージ))
詳細を見る

記事管理

WP標準投稿で記事を管理。カテゴリ・タグのタクソノミーで絞り込み。アーカイブページはcategory.php/taxonomy.phpで自動生成

目次

JSまたはTOCプラグインで自動生成。h2/h3を対象に番号付きの目次ボックスをサイドバーに固定表示

記事内CTA

ACFで記事中・記事下のCTAバナーを管理。「表示期間」「リンク先URL」「バナー画像」を管理画面から設定。コード修正なしでキャンペーン対応

ページネーション

paginate_links()でページネーションを生成。posts_per_pageで1ページの件数を管理画面から設定可能

サイドバー

register_sidebar()でウィジェットエリアを登録。人気記事・カテゴリ・CTAバナーを管理画面から並び替え可能

計測・品質設計
詳細を見る

パンくず

BreadcrumbList構造化データ(JSON-LD)を実装

SNSシェア

Twitter/Facebook/LINE/URLコピーボタンを記事下に設置。OGP設定と連動

SP最適化

サイドバーはSP非表示。記事グリッドは1カラムに切り替え

GTM計測

記事内CTAクリック・シェアボタン・カテゴリタブ切り替えを計測コメントで明示