ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

WordPress:アップロードしたPDFのサムネイル画像を生成する方法

WordPressにPDFをアップロードした際に、PDFの画像も生成する方法をご案内します。さらにACFを利用してPDFのサムネイルをクリックするとダウンロードされるようにしてみます。

アップロードしたPDFのサムネイル画像が生成されない場合はサーバーのソフトウェア、プラグインを利用してPDFのサムネイル画像を自動的に生成することができます。

wordpressでpdfのサムネイル画像を生成

PDFのサムネイル生成に必要なサーバー環境

PDFのサムネイルを生成するにはいくつかの条件があります。

サーバーにImageMagickがインストールされているか?

サーバーの画像処理ライブラリとしてImageMagickまたはGDが利用されます。

エックスサーバーなど一般的なサーバーではどちらかのソフトウェアがイントールされています。VPSサーバーの場合はImageMagickとImagickをインストールします。

サーバーにImageMagickやGDがインストールされているかをphpinfoで確認してみます。

下記を記述した「phpinfo.php」をサーバーにアップして、アクセスします。

phpinfo.php
<?php
  phpinfo();
?>

phpinfoにImageMagickの記述があればインストールされています。

ついでにGDについても確認してみましょう。「enabled(有効)」となっていればGDを利用できます。

phpinfoの確認点GD

サーバーにGhostscriptがインストールされているか?

Ghostscriptが必要になるサーバーもあります。
ImageMagickをインストールしているのにサムネイルが生成されない場合は、Ghostscriptのインストールをお試しください。

pleskの場合、下記のコマンドでインストールできます。

sudo dnf install ghostscript

下記のコマンドでインストールされたかを確認して、バージョンなどが表示されればインストールされています。

gs -v

サーバーによってはさらにGhostscriptのインストールも必要になります。

サーバー環境だけでアップロードされたPDFのサムネイルが生成され無い場合は、次のプラグインをお試しください。

PDFのサムネイル生成のプラグイン

サーバー環境に加えて、プラグインを導入することで生成される場合もあります。まずは下記のプラグインから順番にお試しください。

PDF Thumbnail Generator

PDF Thumbnail Generator

PDFのサムネイル生成をアシストしてくれるプラグインです。
生成されるサムネイル画像の種類(jpg、png)や、サイズなどを指定できます。

便利なフックも複数用意されており、指定したページのサムネイル生成や、透かしを追加することなどもできます。

PDFをアップロードして、下図のようにサムネイルが生成されれば成功しています。

PDFのサムネイル表示

ACFでPDFの画像をクリックするとPDFがダウンロードする方法

ACF(Advanced Custom Fields)のファイルアップロードのカスタムフィールドを利用してサムネイルをクリックするとPDFがダウンロードできるようにしてみます。

前提としてカスタムフィールド名は「cf_download_pdf」
返り値は「ファイルのURL」にします。

ACFのPDFサムネイル表示ダウンロード

サムネイルを表示させるコードは下記になります。

<?php
  $file_url = get_field('cf_download_pdf');
  if ($file_url) {
    $attachment_id = attachment_url_to_postid(esc_url($file_url));
    $thumb_url = wp_get_attachment_image($attachment_id, 'thumbnail');
    echo $thumb_url;
  }
?>

PDFファイルをダウンロードさせるコードは下記になります。
変数$file_urlを利用しています。

<?php echo esc_url($file_url); ?>

2つのコードを組み合わせたコードが下記になり、サムネイルをクリックするとPDFがダウンロードされます。

<a href="<?php echo esc_url($file_url); ?>" download="">
<?php
  $file_url = get_field('cf_download_pdft');
  if ($file_url) {
    $attachment_id = attachment_url_to_postid(esc_url($file_url));
    $thumb_url = wp_get_attachment_image($attachment_id, 'thumbnail');
    echo $thumb_url;
  }
?>
</a>

HTMLタグ「download=""」は、PDFを表示させずに、PDFをダウンロードさせるタグになります。今回は空にしていますがファイル名などを記載しても良いでしょう。

新しい記事

新宿のWEB制作会社イッティ

新宿のWEB制作会社イッティ