PLUGIN : PDF Image Generator
PDF Image Generaterwordpress.orgから最新版をダウンロード
DEMO : PDFのサムネイルを生成&リンクに画像を挿入する
WORDPRESSの記事内にPDFを表示するプラグインとしてはGoogle Docs Viewerを用いた「Embed PDF」「Google Doc Embedder」(GDEは2016年現在開発が継続しています。ちなみにEmbed系のプラグインは大抵当プラグインと共存可能です。)が有名ですが、サイト設計の都合で充分なドキュメント表示スペースがないからPDFを使うケースもあるし、PDFビューアだと読込み時間がかかったりデザインの可塑性にかけたりで用途が限られる。
じゃあ画像をアップして手動でリンクを貼る、というのが従来の手法だけども、非熟練ユーザーにとっては厄介だし、ヘビーユーザーにとっても行程が面倒。
とまあ、その両方が重なる事案があったので、制作したのがこのプラグインです。PDFの1ページ目を画像化して登録・挿入します。実際にPDFを記事に挿入するとこんな感じになります。
aタグに「link-to-pdf」というクラス名を与えているのでそれでホヴァー時のアクションなどを装飾しています。ちなみに1.4以降、imgタグにも「thumb-of-pdf」というクラスが付与されるようになっています。
<a class="link-to-pdf" title="dummy-item" href="//web.contempo.jp/wprs/wp-content/uploads/2014/09/dummy-item.pdf" target="_blank">
<img class="size-medium wp-image-3922 thumb-of-pdf" src="//web.contempo.jp/wprs/wp-content/uploads/2014/09/dummy-item-pdf-340x480.jpg" alt="thumbnail-of-dummy-item" width="340" height="480" />
</a>
INSTALLATION : 設置方法
プラグインをダウンロードしてインストールして下さい。特に他に設定していただく必要はありません。試しにPDFをアップロードしてみてください。
FEATURES : PDF Image Generator 構成内容
1. PDFをアップロードするとサムネイルを自動で生成
PDFのカヴァー画面から「PDFファイル名-pdf.jpg」というファイル名のJPG画像を生成し、PDFファイルのpost thumbnail(アイキャッチ画像)としてそのjpg画像のIDを登録します。たとえば 2014_09.pdfというPDFをアップすると2014_09-pdf.jpgという名前で生成されます。
2. PDFを投稿に挿入するときに自動的にサムネイルを埋込み
「投稿に挿入」すると自動でPDFファイルへのリンク付きサムネイルを挿入します。書き出されるコードはaタグに[link-to-pdf]クラスが付与されていることとtarget=”_blank”が指定されている以外はwordpressのエディターのデフォルトと同じ表記になっています。また、挿入する画像のサイズ(またはURL、タイトル、キャプション)や配置をセレクトボックスで選ぶことができます。(v.1.3.1以降)
3. PDFを削除と同時にサムネイルも自動で削除
メディアファイルを削除するときに、サムネイルだけが取り残されないように、フックしてごにょごにょします。使わないファイルが残るなんて生理的に受け付けません。
※ 設定画面からこの機能をオフにすることができます。
4. 既存のMIMEタイプアイコンをサムネイル画像で置き換え
管理画面で表示されるアイコン(document.png)を生成したサムネイル(←中サイズの画像を使用)で置き換えます。これが意外と大事というか、沢山のPDFファイルを管理するサイトだと、同じアイコンがずらっと並んでるのと個別のサムネイルで表示されるのとではだいぶ視認性が違います。
※ 設定画面からこの機能をオフにすることができます。
5. PDFをアイキャッチ画像として設定可能
プラグインを有効化すると、アイキャッチ画像としてPDFを選択することができるようになります。通常のアイキャッチ画像と同じように、get_the_thumbnail関数でサムネイルを直接呼びだすことができます。(v.1.2以降)
※ 実際に呼び出されるアイキャッチ画像はもちろん「画像」であってPDFではありません。テンプレート内でアイキャッチ画像から逆にPDFを呼び出すにはちょっとしたコードが必要です。(下記「テンプレート内での出力方法」を参照してください。)
6. PDFのidを使って各種関数でサムネイル画像を呼び出せます
プラグインを有効化すると、PDFのidを指定するだけで、他の画像ファイル同様にwp_get_attachment_imageなどの関数群を用いてPDFのサムネイルを出力することができます。(v.1.2以降)
※ ただし、この機能はプラグインに依存するため、プラグイン自体を非有効化すると空を返すようになります。
SETTINGS : PDF Image Generator プラグイン設定画面
プラグインをインストールしたwordpressの管理画面「設定」内の「PDF Image Generator」からプラグインのデフォルト機能の変更を行うことができます。
既存のMIMEタイプアイコンの代わりに作成された画像を表示する
余計なお世話という場合はこの機能をオフにしてください。
PDFのサムネイルをアイキャッチ画像として使用可能にする
この機能をオフにした際にも「作成したサムネイル画像のファイルそれ自体はライブラリ内で非表示にする」オプションをオフにすることで、作成された画像それ自体を選択可能なように設定できます。
作成したサムネイル画像のファイルそれ自体はライブラリ内で非表示にする
作成された画像とPDFが並列で表示されると紛らわしいため、通常はこの機能がオンになっており、サムネイル画像ファイルの存在は隠されています。画像ファイルは画像ファイルとしてPDFとはセパレートして使う場合など、この機能をオフにするとよいでしょう。
作成画像の各種設定カスタマイズ
作成画像のサイズやクオリティを自由に設定することができます。また、出力形式をpng/jpgから選択、背景色の指定(transparentはダイレクトに打ち込みで反映)が可能です。プラグインの動作が重い場合は、この機能をオフにしてみると改善するかもしれません。ちょっとだけですが。
作成したサムネイル画像をプラグインのアンインストール後も保持する
これはプラグインをアンインストールした時に、PDFのサムネイルファイルを削除するかどうかの設定であり、この機能をオフにするとアンインストールとともに画像は全て削除されます。文中や記事のアイキャッチにサムネイルを使用している場合、表示されなくなりますのでご注意ください。(もちろんPDFは削除されません!)
exec関数でimageMagickを実行する / imagick PHP拡張モジュールを使用する
この機能を選択していただく必要は、通常ありません。
アップロード済みのPDFからサムネイルを作成
メディアライブラリ内に存在するすべてのPDFファイルのサムネイルを生成します。「サムネイルがないPDFの画像を作成する」か「すべてのPDFの画像を再作成して置き換える」かを選択できます。
TEMPLATE : テンプレート内での出力方法
カスタムフィールド等を使って登録したPDFをテンプレートファイルの中で読み込みたい場合には、以下のようにします。
<?php
$pdf_id = ‘your pdf post ID’;//サムネイルを表示したいPDFのID
$thumbnail_id = get_post_thumbnail_id( $pdf_id );
if ( $thumbnail_id ) {
$attach_title = get_the_title( $pdf_id );
$attach_image = wp_get_attachment_image ( $thumbnail_id, 'medium' );
echo '<a class="pdf-link image-link" href="'.wp_get_attachment_url( $pdf_id ).'" title="'.esc_html( $attach_title ).'" target="_blank">'. $attach_image .'</a>'."n";
}
?>あるいはもう少しシンプルに、PDFのIDを直接関数にセットしても画像を出力できます。(v.1.2以降、上のプロセスをプラグイン任せにしてるだけですが。)
<?php
$pdf_id = 'your pdf file ID';
$attach_image = wp_get_attachment_image ( $pdf_id, 'medium' );
if ( $attach_image ) {
echo '<a class="pdf-link image-link" href="'.wp_get_attachment_url( $pdf_id ).'" title="'.esc_html( $attach_title ).'" target="_blank">'. $attach_image .'</a>'."n";
}
?>もしPDF(のサムネイル)をアイキャッチ画像に指定していて、そのIDからPDFのリンクを作成したいことがあるかもしれません。そんな時は以下のようにします。
$thumb_id = get_post_thumbnail_id ( $post->ID );
$pdf_id = get_post( $thumb_id )->post_parent;
if ( $pdf_id && get_post_mime_type ( $pdf_id ) === 'application/pdf' ){
$pdf = get_post($pdf_id);
echo '<a class="link-to-pdf" href="'.wp_get_attachment_url($pdf_id).'" title="'.esc_html($pdf->post_title).'" target="_blank">'.get_the_post_thumbnail().'</a>'."n";
}
CAPTION : キャプション内にPDFの各種データを出力する
プラグインでは通常の画像ファイルと同じように「 caption 」ショートコードが使用できます。添付ファイルの形式やサイズ、説明等を出力したい場合、テンプレートを使用するだけでなく「img_caption_shortcode」フィルターをfunctions.phpに設置することで、キャプション内に出力することが可能です。参考コードを書いておきますので、目的に応じてカスタマイズしてご利用ください。
function add_attachment_data_in_caption( $empty, $attr, $content ) {
$attr = shortcode_atts( array( 'id'=>'', 'align'=>'alignnone', 'width'=>'', 'caption'=>'' ), $attr );
if ( 1 > (int) $attr['width'] || empty( $attr['caption'] ) ) return '';
if ( $attr['id'] ) {
$attr['id'] = 'id="' . esc_attr( $attr['id'] ) . '" ';
$attachment_id = explode('_', $attr['id']);
$attachment_id = $attachment_id[1];// get attachment id
if( get_post_mime_type ( $attachment_id ) === 'application/pdf' ){
$attachment = get_post( $attachment_id );
$bytes = filesize( get_attached_file( $attachment->ID ) );
if ($bytes >= 1073741824) $bytes = number_format($bytes / 1073741824, 2). ' GB';
elseif ($bytes >= 1048576) $bytes = number_format($bytes / 1048576, 2). ' MB';
elseif ($bytes >= 1024) $bytes = number_format($bytes / 1024, 2). ' KB';
elseif ($bytes > 1) $bytes = $bytes. ' bytes';
elseif ($bytes == 1) $bytes = $bytes. ' byte';
else $bytes = '0 bytes';
$attr['caption'] =
'title : ' .$attachment->post_title. '<br/>' . // title
'caption : ' .$attr['caption']. '<br/>' .// caption
'size : ' .$bytes. '<br/>' . // file size
'filetype : ' .get_post_mime_type ( $attachment_id ). '<br/>' . // file type
'description : ' .$attachment->post_content. '<br/>'; // description
}
}
return
'<div ' .$attr['id']. 'class="wp-caption ' .esc_attr( $attr['align'] ). '" style="max-width: ' .( 10 + (int) $attr['width'] ). 'px;">' .
do_shortcode( $content ). '<p class="wp-caption-text">' .$attr['caption']. '</p>' .
'</div>';
}
add_filter('img_caption_shortcode', 'add_attachment_data_in_caption', 10, 3);
title : DUMMY PDF
caption : SAMPLE PDF FILE
size : 105.16 KB
filetype : application/pdf
description : This is a sample PDF file.
Advanced Filters : フィルターを使った各種カスタマイズ
もしcropしたりなど、さらに細かいカスタマイズが必要な場合は、下記のコードのようにフィルターをfunctions.phpに設定することでカスタマイズすること可能です。
出力されるアッタチメントリンクの各種属性を変更する
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.'" rel="attachment wp-att-' .esc_attr($attach_id). '" title="'.esc_attr( $attach_title ).'" 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] .'" class="'.( $align ? 'align' .$align. ' ' : '' ). 'size-' .esc_attr( $size ). ' wp-image-'.$thumbnail_id.'" />';
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 {$max_width}x{$max_height} {$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_thumbnail_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; // すでにサムネイルがある場合
$args = array(
'post_parent' => $post_id,
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'orderby' => 'menu_order date',
'order' => 'ASC ASC'
);
$attaches = get_posts($args);
if ( $attaches ): foreach( $attaches as $attach ):
if ( $attach->post_mime_type == 'application/pdf' ){
if ( $thumb_id = get_post_meta( $attach->ID, '_thumbnail_id', true ) ){ // PDFにサムネイルが存在する場合
update_post_meta( $post_id, '_thumbnail_id', $thumb_id );
break;
}
} elseif ( preg_match("/^image//", $attach->post_mime_type ) ) {
update_post_meta( $post_id, '_thumbnail_id', $attach->ID );
break;
}
endforeach; endif;
}
add_action( 'save_post', 'save_thumbnail_as_featuredimage' );
特定のカスタム投稿など、とにかく自動的に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&orderby=menu_order&order=ASC' );
if ( $attaches ): foreach( $attaches as $attach ):
if ( $thumb_id = get_post_meta( $attach->ID, '_thumbnail_id', true ) ){ // PDFにサムネイルが存在する場合
update_post_meta( $post_id, '_thumbnail_id', $thumb_id );
break;
}
endforeach; endif;
}
add_action( 'save_post', 'save_pdf_thumb_as_featuredimage' );Change log
- 1.4.72016/08/28imageMagickのコンバートプロセスでのエラーをWP DEBUGで書き出すように変更。非推奨だったimagick::destroy()を削除
- 1.4.62016/06/28内部で使用していた get_posts をやめてwpdbから直接ファイルを取得するように変更。画像のaltを翻訳対応に。色変換のオーダーなどを変更。旧IMでのアルファチャンネル指定によるエラーを回避。
-
(6/8)imageMagickの脆弱性に関して
ImageTragickと呼ばれるimageMagickの脆弱性は、画像ファイルに偽装したファイルをアップロードした時に任意のコマンドを実行されてしまうというものです。https://imagetragick.com/
wordpressではimagemagickはしばしば画像処理に使われます。しかしwordpressはファイルアップロード時にマジックバイトの検査をしてくれるので、ユーザーを限定した通常のテーマではImageTragickは回避されます。(自動的に外部サイトの画像を拾ってきて処理するテーマとか、不特定多数の外部ユーザにフロントエンドからファイルをアップできるようなフォーラムタイプのウェブサイトテーマなど、コード次第で危険性がないとも言えません。詳細はこちら。)なお、PDF image generatorはwordpressの公式関数によってPDFのアップロード処理を行ったのちに画像化するプロセスを踏んでいますので、通常の使用方法の範囲内ではImageTragickの危険性はないと考えています。 - 1.4.52016/06/05メディアエディターから画像編集をしたあとにjsのコンフリクトがおきる問題を修正。wp_get_attachment_imageで出力されるPDFのサムネイル画像に「thumb-of-pdf」クラスを付与。pdfのmetadataを取得時にサムネイル各サイズの画像データが取得できるようにwp_get_attachment_metadataを上書き。
- 1.4.42016/05/12カラースペースを検知する仕様を追加。CMYKファイルの色再現を改善。
- 1.4.32016/05/11PDF詳細編集ページにサムネイルを表示するメタボックスを追加。ImageMagickのバージョンによるコンバージョンプロセスの分岐仕様を改良。
- 1.4.22016/05/08GlotPressに対応し、旧翻訳ファイルを削除。デフォルト解像度を300dpiに。
- 1.4.12016/04/14ImageMagickのバージョンによってコンバージョンプロセスを分岐する仕様に変更。
- 1.4.02016/4/5オプション画面に「png/jpg」「背景色」「デフォルト挿入サイズ」の各セレクタを追加。GDE (Google Doc Embedder)のフックを上書きする現象を修正。
- 1.3.92016/3/20imagickのflattenImages()をsetImageAlphaChannel()とmergeImageLayers()に変更。メディアリンクのない画像挿入時のエラーを修正。アクティベートのプロセスを変更。
- 1.3.82016/2/12懸案だったメディアライブラリのリスト形式時にサムネイルが表示されてしまう現象を修正。wp.media.view.settingsの動作を修正。オプション画面を整理
- 1.3.72016/2/7アタッチメントリンクにフィルターを設置。ファイルベースのリネーム方式を修正。テキストドメインをスラッグに修正(そういうものらしいので)
- 1.3.62015/12/22管理画面のCSSとアクティベートメッセージを修正。
- 1.3.52015/11/20オプション画面のインプットタイプを数値に限定、サムネイルを隠すオプションの挙動を修正。
- 1.3.42015/10/30作成画像のサイズなどを指定できオプションを追加。既アップロードPDF全ての画像を再作成できるボタンを設置。ほか、デバッグなど。
- 1.3.32015/10/21デバッグ。
- 1.3.22015/10/20imageMagickの使用する関数をセレクトできるオプションを追加。
- 1.3.12015/10/18デバッグ。
- 1.32015/10/171.2以降急激に関数が増えたのでプラグインのコーディングにクラス定義を用いることにしました。PDFをエディタに挿入する際に、画像サイズを指定したり、画像ではなくURLやタイトルの使用を選択できるようにしました。
- 1.2.12015/10/11各種設定をカスタマイズできるプラグイン設定画面を設置しました。既存PDFからサムネイルを作成する場合なども、こちらからコントロールできます。
- 1.22015/10/9サムネイル画像ファイルをメディアライブラリ内で非表示に設定。pdfをアイキャッチ画像として設定できるように変更、設定時は get_the_post_thumbnailで呼び出し可能。pdfのidを使ってwp_get_attachment_image関数にて呼び出し可能に。
- 1.1.52015/5/13ショートコードに対応。
- 1.1.12015/3/14カラースペース・バグへの対処のため、カラースペース変換の行程をまるごと削除。
- 1.12015/2/3imagick APIに対応、wp_optionを追加、uninstall.phpを追加。
- 1.02015/1/12プラグインをwordpress.orgに登録。パブリックリリースにともない、jpg画像を独立した画像ファイルとして登録する構成に変更、大・中・サムネイルのサイズ展開、インポート・エクスポートに対応。*旧verはPDFファイルのメタデータにURLを記録していたため、新プラグイン乗り換えにより旧サムネイルは表示されなくなります。ご注意ください。
- 0.1.22014/11/30imageMagickのコマンドから-alpha offを削除。ない方がレンタルサーバーでの汎用性が高い模様。
- 0.1.12014/10/03他のアプリケーションファイルのアイコンが表示されない問題を修正
- 0.12014/09/26公開
