check-a-tag-has-an-image-or-not1

WORDPRESS投稿内のリンクに独自クラスを付与し、cssでのテキスト装飾やライトボックス系のJSプラグインを扱いやすくする

cssでテキストを装飾したり、ライトボックス系のJSプラグインの設定する方法はいくつかあります。ブログの管理者がある程度ウェブ馴れしているなら、image_send_to_editorフックを用いて記事作成時にクラスを与える(※外部リンク)方法がシンプルでよいと思います。しかし、CMSなどの納品したブログでは、どこからかコピペしてきた謎のHTMLを挿入されてまんまとレイアウト崩れを起こす…なんてこともしばしば。だったらもういっそ、すべての投稿に含まれる画像やリンクにまとめてクラスをつけてしまおうと、そういうわけです。具体的には、the_contentで投稿にフックし、正規表現でその中からリンクを拾い、画像リンクかテキストリンクのどちらなのか、さらにリンク先が画像かどうかを明示するクラスを挿入しています。これならwordpressのエディタを使って書いていない記事にも対応できます。

出力した感じはざっくりとこんなですね。

<p>テキストテキストテキスト。</p>
<p><a class="text-link" href="http://example.com">おすすめのウェブサイトです。</a></p>
<p><a class="image-link" href="http://example.com"><img src="/screenshot.jpg"></a></p>
<p>テキストテキストテキスト。</p>
<p><a class="text-link lightbox" href="/image.jpg">画像を拡大表示します。</a></p>
<p><a class="image-link lightbox" href="/image2.jpg"><img src="/image2s.jpg"></a></p>
<p>テキストテキストテキスト。</p>

 

CODE: Link item CSS class filtering

<?php
//Check the content has an <a> tag with an image or not, and add class to it. 
function linkclass_filter( $content ) {
    global $post;
    preg_match_all('/<a.*?</a>/i', $content, $matches, PREG_SET_ORDER);
    foreach ($matches as $def_link) {
        $link = $def_link[0];
        if ( preg_match('/<a.*?>.*?<img.*?>.*?</a>/i', $link) ) { //画像を含むとき
            $link = preg_replace('/<img(.*?)src=['"]([^'"]+).(bmp|gif|jpeg|jpg|png)['"](.*?)>/i', '<img$1src="$2#p#$3"$4>', $link); //画像srcのエスケープ
            $link = preg_replace('/<img(.*?)class=(.*?)>/i', '<img$1cl#a#ss=$2>', $link); //画像classのエスケープ
            $linkclass = 'image-link'; //画像リンクにつけるクラス
        } else {
            $linkclass = 'text-link'; //テキストリンクにつけるクラス
        }
        if ( preg_match('/<a.*?href=['"]([^'"]+).(bmp|gif|jpeg|jpg|png)['"].*?>/i', $link) ) { //リンク先が画像のとき
            $linkclass .= ' lightbox'; //ライトボックスなどのjs用のクラス
            $linkrel = ' data-group="lightbox-'.$post->ID.'"'; //任意のデータやrelを持たせる処理
        } else {
            $linkrel = '';
        }
        if ( preg_match('/<a.*?class=.*?href=.*?>.*?</a>/i', $link) || preg_match('/<a.*?href=.*?class=.*?>.*?</a>/i', $link) ) {//aタグにclassがあるとき
            $link = preg_replace('/<a(.*?)class="(.*?)"(.*?)>/i', '<a$1class="'.$linkclass.' $2"$3'.$linkrel.'>', $link);  //aタグにclassを追加
        } else {
            $link = preg_replace('/<a(.*?)>/i', '<a class="'.$linkclass.'"$1'.$linkrel.'>', $link); //aタグにclassを付与
        }
        $link = str_replace( array('#p#','#a#'), array('.','a'), $link); //エスケープ解除
        $content = str_replace( $def_link[0], $link, $content );
    }
    return $content;
}
add_filter('the_content','linkclass_filter');
?>

 

設置方法

上記をfunctions.phpに記載します。もう少しスマートにできそうな気もしますが…まあ機能してるしいいんです…。

generatingPDF

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を記事に挿入するとこんな感じになります。

これはPDFファイルです。

aタグに「link-to-pdf」というクラス名を与えているのでそれでホヴァー時のアクションなどを装飾しています。ちなみに1.4以降、imgタグにも「thumb-of-pdf」というクラスが付与されるようになっています。

<a class="link-to-pdf" title="dummy-item" href="//web.contempo.jp/wp-content/uploads/2014/09/dummy-item.pdf" target="_blank">
<img class="size-medium wp-image-3922 thumb-of-pdf" src="//web.contempo.jp/wp-content/uploads/2014/09/dummy-item-pdf-340x480.jpg" alt="thumbnail-of-dummy-item" width="340" height="480" />
</a>

screenshot-1_jpscreenshot-2_jpscreenshot-3_jpscreenshot-4

 

 

INSTALLATION : 設置方法

プラグインをダウンロードしてインストールして下さい。特に他に設定していただく必要はありません。試しにPDFをアップロードしてみてください。

ご注意:このプラグインを有効化するにはサーバーにImageMagickとGhostScriptがインストールされている必要があります。またphpのexecコマンドが許可されているか、imagick APIがインストールされている必要があります。一般的なレンタルサーバーは割と対応しているようですので、特に何もしていただく必要はないですが、動作しない場合はお使いのサーバーの条件を確認してください。

 

 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);

 

thumbnail of dummy-item

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公開

 

thumbnail-images

自作テーマや管理画面内でもずっと添付画像をループで呼び出してサムネイル表示をしてきていたので、アイキャッチ画像というものを使ってこなかった。最近プラグインやらテーマやらでアイキャッチ画像を利用しているものにちょこちょこ出くわすのと、一枚のサムネイルのためにいちいちループで呼び出すのもいい加減面倒なのとで、いまさらながら導入していこうと思った。

そもそもアイキャッチを使ってこなかったのは、クライアントにいちいちアイキャッチ画像を設定するんですよ、というのは面倒と言うかミスの元だからだ。なので、記事を保存するときにアイキャッチ画像を設定していないときは自動的に添付画像の最初のものをアイキャッチ画像に設定するようにした関数がこちら。

アイキャッチ画像と言ってもIDがカスタムフィールドに登録されるだけなので、どんなオリジナルテーマでも邪魔にならないし、重たくもならない。なので今後のためにもfunctions.phpに入れるだけ入れて裏で走らせておこうかと思っています。

 

// 自動でアイキャッチ画像を設定する

function save_default_thumbnail( $post_id ) { // アイキャッチ画像を自動で設定する 
 if ( wp_is_post_revision( $post_id ) ) return $post_id; 
 $get_captype = get_post_type_object( get_post_type( $post_id ) );
 if ( $get_captype && $get_captype->capability_type == 'post' && $get_captype->public == true ){ 
 // 投稿タイプのキャパビリティがが「post」(ページは含まない)かつ、パブリック投稿タイプであること
 $post_thumb = get_the_post_thumbnail( $post_id );
 if ( empty($post_thumb) ) { // no featured image
 $attaches = get_posts( 'post_parent='.$post_id.'&numberposts=1&post_type=attachment&post_mime_type=image&orderby=menu_order&order=ASC' );
 if ( $attaches ):
 update_post_meta( $post_id, '_thumbnail_id', $attaches[0]->ID );
 endif;
 }
 }
 return $post_id;
}
add_action( 'save_post', 'save_default_thumbnail' );

実際に使う際は、テーマによってカスタムフィールドに入力された画像IDを優先させたり、細かいカスタマイズを行うと良いと思います。
(2016/2.27 一部プラグインとコンフリクトしてる感じだったので、投稿タイプで判別するコードを追加しました。)

sc 2014-10-09 0.09.18
  •  2014/10/10 メディアアップローダーの記述を新しいものに修正、レスポンシブデザインに対応、等々全面的に書き直しました。

ダウンロードattachments-viewer.zip

 

添付画像の一覧表示用メタボックス

WORPRESSのポストにアップロードした画像が表示されるメタボックスです。削除したり、追加したりするとリアルタイムで表示されます。それだけです。添付画像を自動で張り込むようなポートフォリオを作る場合など、アイキャッチ画像では不十分なことが多く、一覧で添付画像が確認できる方が重宝します。シンプルなビューアなので、DBを書き換えることもありません。

 

CODE : Display all attachements in admin post-php

<?php

/*
* plugin name: Attachments Viewer
* Plugin URI: //web.contempo.jp/weblog/tips/p669
* description: Adding viewer of attachments in post-php pages for wp4.0
* author: Mizuho Ogino
* author URI: //web.contempo.jp/
* version: 1.2.2
* license: //www.gnu.org/licenses/gpl.html GPL v2 or later
*/

/////////////////////// メタボックスの追加と保存 /////////////////////// 

add_action( "admin_init", "attachments_viewer_init" );
function attachments_viewer_init(){
    add_meta_box( 'attachments-viewer', '添付画像一覧', 'display_attachments', 'post', 'advanced', 'high'); // 指定した投稿タイプにメタボックスを追加
    // $post_types = get_post_types( '', 'names' ); // すべての投稿タイプにメタボックスを追加
    // foreach ( $post_types as $post_type ): add_meta_box( 'attachments-viewer', '添付画像一覧', 'display_attachments', $post_type, 'advanced', 'high'); endforeach; 
}


/////////////////////// メタボックスの設定(添付画像一覧表示) ///////////////////////

function display_attachments(){
    global $post; 
    $images_list = "n";
    $args = array( 
        'post_parent' => $post->ID,
        'numberposts' => -1,
        'post_type' => 'attachment',
        'orderby' => array( 'menu_order' => 'ASC', 'post_date' => 'DESC' )
    );
    $attaches = get_posts ( $args );
    if ($attaches): foreach ($attaches as $attach):
        $thumb = wp_get_attachment_image_src ( $attach->ID, 'medium' );
        if ( $thumb ){
            $mimeclass = 'thumbnail';
            $thumb = $thumb[0]; 
        } else {
            $mimeclass = 'icon';
            $thumb = wp_mime_type_icon( $attach->ID );
        }
        $images_list .= "tt".'<li class="'.$mimeclass. '" id="img_'.$attach->ID.'"><div class="centered"><img src="' .$thumb. '" /></div></li>'."n"; 
    endforeach; endif;
?> 
    <script type="text/javascript">
    jQuery( function( $ ){
        var ex_ul = $( '#attachments-viewer ul' ), custom_button = $( '#insert-media-button-custom' );
        custom_button.click( function( ){ $( this ).addClass( 'clicked' ); });
        wp.media.view.Modal.prototype.on('ready', function( ){ 
            $( 'select.attachment-filters [value="uploaded"]' ).attr( 'selected', true ).parent().trigger('change'); //「この投稿へのアップロード」をデフォルト表示
            $( '.media-frame-toolbar' ).find( '.media-toolbar-primary' ).append( '<a class="button media-button button-primary button-large media-modal-close" style="width:auto; margin-top:5px; display:none" href="#">アップローダーを閉じる</a>' );
        }).on('open', function( ){ 
            if ( custom_button.hasClass( 'clicked' ) ) {
                $( '.media-frame' ).addClass( 'hide-menu' ).addClass( 'hide-router' );
                $( '.media-button-insert' ).hide().next( 'a' ).show();
            } else {
                $( '.media-frame' ).removeClass( 'hide-menu' ).removeClass( 'hide-router' );
                $( '.media-button-insert' ).show().next( 'a' ).hide();
            }
        }).on('close', function(){ 
            if ( $('select.attachment-filters option:selected').val() !== 'uploaded' ){
                $( 'select.attachment-filters [value="uploaded"]' ).attr( 'selected', true ).parent().trigger('change');    
            }
            var attach_list = $( 'ul.attachments', '.media-frame-content' );
            if ( attach_list.length ) {
                ex_ul.children().remove( ); 
                attach_list.children( 'li' ).each( function( ){ //「この投稿へのアップロード」内の画像を配列に格納
                    this_src = $( this ).find( 'img' ).attr('src');
                    if ( $( this ).find( 'img' ).hasClass('icon') ) {
                        this_class = 'icon';
                    } else {
                        this_class = 'thumbnail';
                    }
                    ex_ul.append( '<li class="' + this_class + '"><div class="centered"><img src="' + this_src + '" /></div></li>' );
                });
                if ( custom_button.hasClass( 'clicked' ) ) custom_button.removeClass( 'clicked' );
            }
        });
    });
    </script>
    <style type="text/css">
        #attachments-viewer .inside { padding:0px!important; margin:0px!important; }
        #attachments-viewer .frame { clear:both; width:100%; height:auto; overflow:auto; background:#f7f7f7; padding:0; }
        #attachments-viewer .frame-header { padding:8px 9px 0; margin:0; min-height:32px; overflow:hidden; }
        #attachments-viewer .frame-header .wp-media-buttons { display:block; margin:0!important; }
        #attachments-viewer ul { clear:both; list-style:none; display:block; padding:2px 5px; margin:0!important; }
        #attachments-viewer ul li { list-style:none; display:block; margin:0 3px 6px 3px; background:#fff; border:solid 1px #ddd; float:left; height:140px; width:auto; min-width:100px; }
        #attachments-viewer ul li .centered { overflow:hidden; text-align:center; width:100%; height:100%; }
        #attachments-viewer ul li .centered img { padding:0; margin:auto; height:150px; width:auto; }
        #attachments-viewer ul li.icon .centered { line-height:150px; height:150px; display:inline-block; }
        #attachments-viewer ul li.icon .centered img { vertical-align:middle; height:80px; }
        @media screen and (min-width : 851px){
            #side-sortables #attachments-viewer ul li { height:126px; width:126px; }
            #side-sortables #attachments-viewer ul li.icon .centered { line-height:126px; height:126px; display:inline-block; }
            #side-sortables #attachments-viewer ul li.icon .centered img { vertical-align:middle; height:80px; }
            #side-sortables #attachments-viewer ul li.thumbnail .centered { position:relative; height:100%; }
            #side-sortables #attachments-viewer ul li.thumbnail .centered img { display:block; position:absolute; left:-100%; right:-100%; top:-100%; bottom:-100%; margin:auto; height:auto; width:auto; max-width:200%; max-height:200%; min-height:100%; min-width:100%; }
        }
    </style>
    <div class="frame">
        <div class="frame-header">
            <div class="wp-media-buttons">
                <a href="#" id="insert-media-button-custom" class="button insert-media add_media" data-editor="content" title="メディアを追加"><span class="wp-media-buttons-icon"></span> メディアの追加/変更</a>
            </div>
        </div>
        <ul><?php echo $images_list; ?></ul>
        <br clear="both"/>
    </div>
<?php 
} // end display_attachments function 
?>

 

設置方法

これらの関数群をfuncitons.phpに直接書き込むか、別名でphpを作ってfunctions.phpからrequireします。プラグインとしてzipごとアップロードしていただいてもOKです。

<?php require('適当な名前.php'); ?>

 

おまけ: 添付画像の出力方法

テーマ内のループ中からget_postとかget_childrenを使ってテンプレートから呼び出して下さい。menu_orderを有効にしておくと、メディアアップローダー上での並べ替えが反映されるので、ポートフォリオサイト制作に便利です。post内に通常の画像とポートフォリオ用の画像が混在する場合などは、カスタムフィールドに画像のIDを書き込む方が分かりやすいでしょう。(→「投稿画面にメディアアップローダー付きのカスタムフィールドを設置する」

<?php
$images = get_children( '&post_type=attachment&order=ASC&orderby=menu_order&numberposts=-1&post_mime_type=image&post_parent='.$post->ID );
if( $images ) {
    foreach ( $images as $image ) {
        $src = wp_get_attachment_image_src ($image->ID,'medium');
        echo '<img src="'.$src[0].'" width="'.$src[1].'" height="'.$src[2].'"/>'."n";
    }
}
?>