ACFとElementor ProでPDFの表紙を自動表示する方法　〜手動で画像を用意する手間をなくしてサイト運用を効率化！〜

2025-09-25

Elementor・ACF・Web制作

ACFとElementor ProでPDFの表紙を自動表示する方法　〜手動で画像を用意する手間をなくしてサイト運用を効率化！〜

PDFファイルをブログやポートフォリオに掲載する際、見栄えを良くするために表紙の画像を手動で用意していませんか？この作業、意外と手間がかかるものです。この記事では、Advanced Custom Fields（ACF）とElementorを使い、PDFファイルをアップロードするだけで、その表紙画像を自動で抽出し、Elementorのループに美しく表示させる方法を解説します。一度設定すれば、あとはPDFをアップロードするだけで、サイト運用がぐっと効率的になります。

ステップ1: ACFでフィールドを準備する

まず、WordPressの管理画面から、以下の2つのACFフィールドを作成します。

1. PDFアップロード用フィールド

ユーザーがPDFをアップロードするためのフィールドです。

フィールドタイプ: ファイル
返り値のフォーマット: ファイルID

2. PDF表紙用フィールド

このフィールドは、PHPコードによって自動生成された画像IDを保存するために使います。ユーザーに見せる必要はないので、非表示設定を行います。

フィールド名: pdf_thumbnail
フィールドタイプ: 画像
非表示設定: 条件付きロジックを設定します。通常ではあり得ない条件（例：「PDFアップロード用フィールド」が「〇〇」に等しい）をあえて設定することで、このフィールドをユーザーの画面から見えなくします。

ステップ2: PDFから画像を自動生成するPHPコード

次に、PDFがアップロードされた際に表紙画像を自動で生成し、pdf_thumbnailフィールドに保存するPHPコードを、あなたのテーマの**functions.php**ファイルに追記します。

このコードは、PDFを処理するためにImagickというPHP拡張機能を利用します。お使いのサーバーにImagickがインストールされているか、事前に確認しておきましょう。

function convert_pdf_to_image_on_save($post_id) {
    // あなたの「PDFアップロード用フィールド」のフィールド名を指定します
    $pdf_field_name = 'your_pdf_field_name'; // ここを置き換えてください

    $pdf_id = get_field($pdf_field_name, $post_id, false);

    // PDFがアップロードされ、かつImagickが利用可能か確認
    if ($pdf_id && class_exists('Imagick')) {
        $pdf_path = get_attached_file($pdf_id);

        if ($pdf_path) {
            try {
                // PDFの1ページ目（表紙）を画像に変換
                $imagick = new Imagick();
                $imagick->setResolution(300, 300);
                $imagick->readImage($pdf_path . '[0]');
                $imagick->setImageFormat('jpeg');

                // 一時ファイルに画像を保存
                $temp_image_path = sys_get_temp_dir() . '/' . basename($pdf_path, '.pdf') . '.jpg';
                $imagick->writeImage($temp_image_path);

                // WordPressのメディアライブラリに画像をアップロードし、IDを取得
                $file = array(
                    'name' => basename($temp_image_path),
                    'tmp_name' => $temp_image_path
                );
                $attachment_id = media_handle_sideload($file, $post_id);

                if (!is_wp_error($attachment_id)) {
                    // `pdf_thumbnail`フィールドに画像のIDを保存
                    update_field('pdf_thumbnail', $attachment_id, $post_id);
                }

                // 一時ファイルを削除
                unlink($temp_image_path);

            } catch (ImagickException $e) {
                // エラーが発生した場合の処理
                error_log("PDF to Image conversion failed: " . $e->getMessage());
            }
        }
    }
}
add_action('acf/save_post', 'convert_pdf_to_image_on_save', 20);