WordPressサイトで「HTMLを触らずに管理画面からPDFカタログのリストを簡単に追加・更新したい」という運用ニーズは非常に多いです。
この記事では、WordPressの定番機能であるカスタム投稿タイプとプラグインAdvanced Custom Fields (ACF)を連携させてPDFリストの管理機能を構築し、最終的にショートコードで任意のページにPDFカタログの一覧を自動で表示させる手順を解説します。
この仕組みを導入すれば、ブログ投稿と同じ感覚でPDFファイルや関連情報（サムネイル、サイズなど）を登録できて、ショートコードを用いて、好きなページにPDF一覧を表示させられるようになります。
PDFリスト作成までの3ステップ
PDF一覧をショートコードで表示させるまでの作業は、主に以下の3つのステップで構成されます。
- カスタム投稿タイプ（CPT）の作成：PDFカタログ情報を管理するための専用の投稿タイプ（例：「カタログメイン」）を作成します。
- ACFでカスタムフィールドの設定：CPTに、PDFファイルやサムネイル画像などを登録するための入力欄を追加します。
- ショートコードの作成と表示確認：登録されたカタログ情報を一覧表示するためのPHPコードを記述し、ショートコードとして登録・設置します。
1. カスタム投稿タイプ (CPT) の作成
まずは、PDFカタログ情報を登録するための「器」となるカスタム投稿タイプを作成します。ここでは、投稿タイプ名を catalog_main とします。
テーマファイルの functions.php に以下のコードを追記してください。
/*
* カスタム投稿タイプ「カタログメイン」を登録
*/
add_action( 'init', 'create_post_type' );
function create_post_type() {
register_post_type( 'catalog_main', // カスタム投稿タイプ名を指定
array(
'labels' => array(
'name' => __( 'カタログメイン' ), // 管理画面での表示名
'singular_name' => __( 'catalog_main' )
),
'public' => true, // 公開する
'has_archive' => true, // アーカイブページを有効にする
'supports' => array( 'title' ), // タイトルのみをサポート（エディタは不要な場合）
'menu_position' => 5, // 管理画面メニューの表示位置
)
);
}コードを保存すると、WordPressの管理画面のサイドバーに「カタログメイン」という専用メニューが追加されます。
2. Advanced Custom Fields (ACF) でのカスタムフィールド設定
次に、ACFプラグイン（事前にインストール・有効化が必要です）を使って、手順1で作成した「カタログメイン」に専用の入力欄を追加します。
- ACFプラグインの準備：こちらからプラグインをインストールし、有効化します。
- フィールドグループの作成：管理画面の「カスタムフィールド」→「新規追加」をクリックします。
- フィールドの追加：以下のように、PDFの管理に必要なフィールドを作成します。
・カタログの画像（フィールドタイプ：画像、戻り値：画像URL）・PDFファイル（フィールドタイプ：ファイル、戻り値：ファイルURL）・pdfのサイズ（フィールドタイプ：テキスト または 数値）
- 場所（表示ルール）の設定：このフィールドグループをどの投稿タイプで表示するかを設定します。「投稿タイプ」が「catalog_main」と等しい場合に、このフィールドを表示するように設定します。
設定が完了したら、「カタログメイン」→「新規追加」を開いてみてください。先ほど設定した「カタログの画像」「PDFファイル」「pdfのサイズ」の入力欄が表示されているはずです。
テスト用に、いくつかのカタログ情報（PDFや画像）を登録しておきましょう。
3. ショートコードの作成と表示確認
最後に、登録したカタログ情報を一覧で表示するためのショートコード [post_list] を作成します。このショートコードを固定ページや投稿に貼り付けるだけで、一覧が表示されるようになります。
再び functions.php に、以下のコードを追記します。
/*
* カタログ一覧表示用ショートコード [post_list]
*/
function shortcode_post_list() {
global $post;
// 取得する投稿の条件
$args = array(
'posts_per_page' => -1, // 表示件数 (-1で全件取得)
'post_type' => 'catalog_main', // カスタム投稿タイプ名
'post_status' => 'publish', // 公開済みの投稿のみ
'order' => 'ASC', // 昇順
'orderby' => 'date' // 日付順（'title'でタイトル順なども可能）
);
$posts_array = get_posts($args); // 投稿データを取得
// 投稿がない場合の処理
if (empty($posts_array)) {
return '<p>登録されているカタログはありません。</p>';
}
// HTMLの組み立て開始
$html = '<ul class="catalog-list">'; // お好みでCSS用のクラス名を付与
foreach ($posts_array as $post):
setup_postdata($post); // 投稿データをセットアップ
// ACFからフィールド値を取得
// ※ACFのフィールド設定で「戻り値」を「URL」に設定している前提です
$catalog_image_url = get_field("カタログの画像");
$catalog_pdf_url = get_field("PDFファイル");
$pdf_size = get_field("pdfのサイズ");
$title = get_the_title();
$html .= '<li>';
// 1. 画像の出力
if ($catalog_image_url) {
// alt属性にタイトルを指定し、セキュリティも考慮
$html .= '<img src="' . esc_url($catalog_image_url) . '" alt="' . esc_attr($title) . '">';
} else {
// 代替画像
$html .= '<img src="/wp-content/uploads/2020/09/catalog-main-noimage.jpg" alt="CATALOG IMAGE">';
}
// 2. タイトルの出力
$html .= '<p>' . esc_html($title) . '</p>';
// 3. PDFリンクの出力
if ($catalog_pdf_url) {
$html .= '<a href="' . esc_url($catalog_pdf_url) . '" target="_blank" rel="noopener noreferrer">';
$html .= 'PDF';
if ($pdf_size) {
// サイズ情報があれば追記
$html .= ' : ' . esc_html($pdf_size) . 'MB';
}
$html .= '</a>';
} else {
$html .= '<p>（PDFファイルが設定されていません）</p>';
}
$html .= '</li>';
endforeach;
$html .= '</ul>';
wp_reset_postdata(); // 投稿データのリセット
return $html; // 組み立てたHTMLを返す
}
add_shortcode('post_list', 'shortcode_post_list'); // [post_list] という名前でショートコードを登録ショートコードの設置
コードを保存したら、カタログ一覧を表示したい固定ページ（または投稿）の編集画面を開き、本文の任意の場所に以下のショートコードを記述します。
[post_list]ページを保存し公開すると、その場所に「カタログメイン」に登録したPDFの一覧がリスト形式で自動的に表示されます。あとは、catalog-list クラスに対してCSSでデザインを整えれば完成です。
まとめ
今回は、カスタム投稿タイプとACF、ショートコードを組み合わせて、管理しやすいPDFカタログリストを作成する方法を紹介しました。
この方法を応用すれば、PDFだけでなく「導入事例」や「お知らせ」など、Webサイトの運用で頻繁に更新が必要なあらゆるコンテンツに応用できます。ぜひ試してみてください。
よくある質問（FAQ）
Q1: なぜ「Custom Post Type UI」のようなプラグインを使わずに、functions.php に書くのですか？
A1: プラグインでカスタム投稿タイプを作成することももちろん可能です。しかし、 functions.php に記述する方法には「使用するプラグインを最小限に抑えられる」「テーマの機能として管理できるため、テーマ移行時や別の担当者への引き継ぎがしやすい」といったメリットがあります。どちらが良いかは、プロジェクトの要件や運用方針によります。
Q2: ACFのフィールドタイプと「戻り値」の設定がよく分かりません。
A2: 今回のコード例では、ACFの各フィールドは以下のように設定されていることを前提としています。
- 「カタログの画像」：フィールドタイプは「画像」、戻り値（返り値）は「画像URL」を選択します。これにより
get_field()で画像のURLを直接取得できます。 - 「PDFファイル」：フィールドタイプは「ファイル」、戻り値は「ファイルURL」を選択します。
- 「pdfのサイズ」：フィールドタイプは「テキスト」または「数値」で問題ありません。
もし戻り値を「画像ID」や「ファイルID」に設定した場合は、 get_field() で取得したIDを基に wp_get_attachment_image_src() や get_attachment_url() などの関数を使ってURLを取得し直す必要があります。
Q3: ショートコードを貼り付けましたが、何も表示されません。
A3: いくつかの原因が考えられます。
functions.phpに記述したショートコードの関数名（shortcode_post_list）と、add_shortcodeで登録した名前（post_list）が正しいか確認してください。- カスタム投稿タイプ「catalog_main」に、投稿が1件以上「公開」ステータスで登録されているか確認してください。
- ACFのフィールド名（
カタログの画像,PDFファイルなど）が、ショートコード内のget_field()で指定している文字列と完全に一致しているか（大文字・小文字・全角・半角）確認してください。 functions.phpに文法エラー（閉じ忘れなど）がないか確認してください。
Q4: ACFの「戻り値（返り値）」はどのように設定すべきですか？
A4: 今回のコード例は、ACFの各フィールドで以下の設定（戻り値：URL）を前提としています。
| フィールド名 | フィールドタイプ | 戻り値（返り値） |
|---|---|---|
カタログの画像 |
画像 | 画像URL |
PDFファイル |
ファイル | ファイルURL |
pdfのサイズ |
テキスト/数値 | 値 |
もし「カタログの画像」フィールドの戻り値を「画像ID」や「画像オブジェクト」に設定した場合は、 get_field() で取得したIDや配列を基に、 wp_get_attachment_image_src() などの関数を使ってURLを取得し直す必要があります。特に画像のalt属性なども使いたい場合は、「画像オブジェクト」での取得が推奨されます。