WordPressでPDF・動画を一元管理：カスタム投稿＋ACFで実装する資料ギャラリー

弊社のコーポレートサイトには、販売商品の取扱説明書を一覧掲載しているページがあります。

現在は資料がただ羅列されているだけで、今後さらに件数が増えるとユーザーが目的の資料を探しにくくなる懸念がありました。

そこで、「PDF資料と動画を一元管理できるギャラリーページをWordPressで作ってほしい」という依頼を受け、以下のような設計で構築を進めました。

要件と設計方針

• 管理画面から投稿するだけで完結できるよう、カスタム投稿タイプ＋ACF（Advanced Custom Fields）を使用
• 動画URL（YouTube）とPDFファイルをACFで管理
• カテゴリー（用途など）による絞り込みフィルター機能を実装（JavaScript使用）
• Ajaxは使わず、JavaScriptだけで動作する構成
• 現在は簡易デザインで構築中（CSSは今後調整予定）

実現した仕様

以下のような構成でギャラリーを構築しました。

• WordPressのカスタム投稿タイプで「資料」を定義
• カスタムタクソノミーでカテゴリ分け（例：「マニュアル」「ガイドライン」など）
• 各投稿に「PDFファイル」または「動画URL」をACFで登録
• フロントではカテゴリボタンをクリックすることで、JavaScriptで即時に資料が絞り込まれるUI
• PDFと動画はアイコンや埋め込み方法を変えて視覚的に区別

Ajaxを使わずJavaScriptだけで実装した理由

今回は表示対象の資料数がそれほど多くないため、Ajaxを使って非同期で取得・表示する必要性は低いと判断しました。

• 表示が速く、読み込みが軽い
• コードがシンプルで保守しやすい
• 非エンジニアでも扱いやすい構成になる

これにより、後述の「投稿だけでページ更新」との相性も良くなりました。

実装の流れ

1. カスタム投稿タイプとタクソノミーの登録

register_post_type('material', [
  'label' => '資料',
  'public' => true,
  'supports' => ['title'],
  'has_archive' => true,
]);

register_taxonomy('material_category', 'material', [
  'label' => 'カテゴリ',
  'hierarchical' => false,
  'public' => true,
]);

2. ACFの設定

ACFで以下のカスタムフィールドを用意：

• PDFファイル（pdf_file）→ ファイル型
• 動画URL（video_url）→ URL型

どちらか1つが入っていれば表示される設計にしています。

3. フロント側の構成（HTML出力）

カテゴリボタン（タクソノミーから出力）

<?php
$terms = get_terms(['taxonomy' => 'material_category']);
foreach ($terms as $term):
?>
  <button class="filter-btn" data-category="<?= esc_attr($term->slug); ?>">
    <?= esc_html($term->name); ?>
  </button>
<?php endforeach; ?>

<?php
$posts = get_posts(['post_type' => 'material', 'numberposts' => -1]);
foreach ($posts as $post):
  $terms = get_the_terms($post->ID, 'material_category');
  $slug = $terms[0]->slug ?? '';
?>
  <div class="material-item" data-category="<?= esc_attr($slug); ?>">
    <h3><?= get_the_title($post); ?></h3>
    <?php if ($pdf = get_field('pdf_file', $post->ID)): ?>
      <a href="<?= esc_url($pdf['url']); ?>" target="_blank">PDFを見る</a>
    <?php elseif ($video = get_field('video_url', $post->ID)): ?>
      <div class="video-wrapper">
        <iframe src="<?= esc_url($video); ?>" frameborder="0" allowfullscreen></iframe>
      </div>
    <?php endif; ?>
  </div>
<?php endforeach; ?>

4. フィルター処理（jQuery）

$('.filter-btn').on('click', function () {
  const cat = $(this).data('category');
  $('.material-item').hide().filter(`[data-category="${cat}"]`).fadeIn();
});

運用面で工夫したポイント

自分が不在の期間中にページ更新が発生する可能性が高かったため、以下のような設計にしました。

• 新しい資料をWordPress管理画面から投稿するだけで自動で一覧に反映
• タグ付けとファイル添付（または動画URLの入力）だけで完結
• ACFとカスタム投稿を使うことで、コードやテンプレートを触らず更新が可能

これにより、エンジニアでなくてもページ更新が可能となり、保守性・属人性の低下にもつながりました。

実装してよかった点

• 非エンジニアでも簡単に更新できる設計になった
• PDFと動画を1つの一覧でまとめて管理できる
• Ajaxを使わず、処理も速く保守も簡単
• 管理画面投稿だけでページ内容が変わるため、運用コストが低い

まとめ

現在はまだテスト環境で構築中ではありますが、「更新のしやすさとユーザー視点のUI」を両立する方向性は見えてきました。

また、社内メンバーが今後運用する前提で、WordPressの管理画面から投稿するだけでページ内容が更新できる設計にしたことで、属人化せずにまわせそうな手応えも得られています。

今後はCSS・デザイン面の調整や、モバイル対応・UI微調整などを行いながら、本番反映に向けて引き続きブラッシュアップしていく予定です。