PDF Image Generator 使用方法

ダウンロード

① プラグインをインストール・有効化

通常通りプラグインをインストールし、有効化します。

特別な初期設定は不要で、
有効化した時点で機能が有効になります。

② PDFをメディアライブラリにアップロード

投稿画面の「メディアを追加」からPDFをアップロードします。

アップロード時に、以下の処理が自動で行われます。

  • PDFの1ページ目を取得
  • ImageMagick / imagick によるレンダリング
  • サムネイル画像の生成
  • _thumbnail_id に紐付け

つまり、

「PDF → 画像生成 → 紐付け」まで自動処理

されます。

③ 投稿に挿入（自動で画像リンク化）

PDFを投稿に挿入すると、通常のテキストリンクではなく

画像付きリンク（サムネイル）として出力

されます。

■ 出力イメージ

通常：

PDFリンク（テキストのみ）

本プラグイン使用時：

サムネイル画像
↓クリック
PDF表示

この変化により、

  • 視認性
  • UX
  • クリック率

が大きく改善されます。

④ カスタムフィールドで使用（実務重要）

PDFをカスタムフィールドで管理する場合の実装です。

■ 手順

  1. カスタムフィールド（ACF等）でPDFを選択
  2. 返り値を「ID」に設定
  3. テンプレートで出力

■ 実装例

<?php
$pdf_id = get_post_meta($post->ID, 'フィールド名', true);

$thumbnail_id = get_post_meta($pdf_id, '_thumbnail_id', true);

if ($thumbnail_id) {
    $thumb = wp_get_attachment_image_src($thumbnail_id, 'medium');
    $title = get_the_title($pdf_id);

    echo '<a href="' . esc_url(wp_get_attachment_url($pdf_id)) . '" target="_blank">';
    echo '<img src="' . esc_url($thumb[0]) . '" alt="' . esc_attr($title) . '">';
    echo '</a>';
}
?>

■ ポイント

  • _thumbnail_id にサムネイルが格納される
  • サイズは medium / large など変更可能
  • HTML構造は自由に調整可能

⑤ 画像サイズの調整

出力サイズは以下で制御できます。

wp_get_attachment_image_src($thumbnail_id, 'medium');

■ 指定可能サイズ

  • thumbnail
  • medium
  • large
  • カスタムサイズ

⑥ フィルターによるカスタマイズ（Advanced）

本プラグインはフィルターで挙動を拡張できます。

■ リンクHTMLの変更

function pigen_filter_attachment_link ( $html, $attach_id, $attach_url, $attach_output ){
  $attach_title = get_the_title( $attach_id );

  $html = '<a class="link-to-pdf" href="'.$attach_url.'" target="_blank">'
        . $attach_output .
        '</a>';

  return $html;
}
add_filter( 'pigen_filter_attachment_link', 'pigen_filter_attachment_link', 10, 4 );

■ 画像タグの変更

function pigen_filter_attachment_output ( $attach_output, $thumbnail_id, $thumbnail, $size, $align ){

  $attach_output = '<img src="'. $thumbnail[0] .'" 
    alt="'.get_post_meta( $thumbnail_id, '_wp_attachment_image_alt', true ).'" 
    width="'. $thumbnail[1] .'" 
    height="'. $thumbnail[2] .'" />';

  return $attach_output;
}
add_filter( 'pigen_filter_attachment_output', 'pigen_filter_attachment_output', 10, 5 );

■ ImageMagick の変換処理

function pigen_filter_convert_imageMagick( $imageMagick, $before_name, $after_name, $max_width, $max_height ){

  $imageMagick = "convert -density 150 -quality 80 -background black -flatten {$before_name} {$after_name}";

  return $imageMagick;
}
add_filter( 'pigen_filter_convert_imageMagick', 'pigen_filter_convert_imageMagick', 10, 5 );

■ imagick の変換処理

function pigen_filter_convert_imagick( $imagick ){
  $imagick->setImageBackgroundColor( 'black' );
  $imagick->setCompressionQuality( 80 );
  return $imagick;
}
add_filter( 'pigen_filter_convert_imagick', 'pigen_filter_convert_imagick' );

⑦ アイキャッチ画像を自動設定

PDFのサムネイルを自動でアイキャッチに設定できます。

function save_pdf_thumb_as_featuredimage ( $post_id ) { 

    if ( wp_is_post_revision( $post_id ) ) return;
    if ( get_post_type( $post_id ) !== 'post' ) return;
    if ( get_post_meta( $post_id, '_thumbnail_id', true ) ) return;

    $attaches = get_posts(
        'post_parent='.$post_id.
        '&numberposts=-1'.
        '&post_type=attachment'.
        '&post_mime_type=application/pdf'
    );

    if ( $attaches ):
        foreach( $attaches as $attach ):

            if ( $thumb_id = get_post_meta( $attach->ID, '_thumbnail_id', true ) ){
                update_post_meta( $post_id, '_thumbnail_id', $thumb_id );
                break;
            }

        endforeach;
    endif;
}
add_action( 'save_post', 'save_pdf_thumb_as_featuredimage' );

実務での使い方パターン

■ パターン①：本文に直接挿入

→ 最も簡単（非エンジニア向け）

■ パターン②：カスタムフィールド管理

→ 一覧・資料ページに最適

■ パターン③：アイキャッチとして利用

→ PDFを主コンテンツにする場合

⑦ 実務での使い方パターン

実際の案件では、以下の使い方が主流です。

■ パターン①：投稿本文に直接挿入

→ 最も簡単（ノーコード）

■ パターン②：カスタムフィールド管理

→ 一覧ページ・資料一覧に最適

■ パターン③：アイキャッチとして使用

→ PDFをメインコンテンツにす

ダウンロード

関連記事