escaping

Advanced Custom Fieldsの便利さを享受しながら、クローズド化の罠を回避する

Advanced Custom Fields(以下ACF)が世に出てから4年は経つでしょうか。いくつかスマートげなプラグインも出たものの、いまだにシェアは圧倒的。今ひとつよくわからん機能があっても、管理・入力補助にすぐれ、結局クラインアントワークでは欠かせないんですよね。

しかし出力に独特の癖があるACF。この先、プラグインの乗り換えを検討する時が来るかもしれません。カスタムフィールドはWPで今後も利用されていくでしょうが、ACFに依存するテーブルデータや出力関数があるせいでプラグインやテーマを互換性がないなんて、オープンプラットフォームを使っている意味がないと言っても過言じゃない。そこで独自関数やテーブルを利用しないで済ませる方策を考えていきます。

カスタムフィールドの値はできるだけIDを持たせるようにする

ファイルやページなどをカスタムフィールドに登録する場合は、URLやオブジェクトを指定するとファイルやページに変更があったときに支障が出ます。そもそも、wordpressのデフォルト関数などでは保持される値はそのほとんどがIDか単純な文字列です。直感的に分かりやすいとメンテナンス性も上がりますし、汎用性を考えてもファイルや関連記事などの返り値はなるべくIDにしておく方がいいでしょう。

sc 2016-06-14 17.08.55

チェックボックスなど複数の値を持つvalueを出力する

WPでは同じキーを持つカスタムフィールドを複数登録できますが、ACFはチェックボックスやセレクトボックス、関連記事などのフィールドは複数の値を配列のままストアされます。プラグインが配布された当初から指摘されていたように、ACFのシリアライズされた値の保持方法はmeta queryや検索との相性がよくありません。しかしqueryに載せるならwp3.0以降はカスタムタクソノミーが設定できますし、その方がパフォーマンスもいいですので、シリアライズされることの一番の問題は抽出方法ということになるかと思います。(余談ですが、WP自体はカスタムフィールドに文字列以外が入ることも想定した設計になっていますし、配列を持たせることで判定と出力がシンプルにできるので、一概にダメな設計ではないように思います。)

さてさて、この複数値を出力する方法としては、ほとんどのサイトが独自関数get_field(またはthe_field)を使うように案内しています。

// 従来のACFの配列を出力するコード
$fields = get_field('field');
if($fields): foreach($fields as $val): 
   echo $val; 
endforeach; endif

…でもなんのことはない、値が配列になっているだけなので、以下のようにすれば出力ます。これによってテンプレートはユニバーサルな状態に保っておくことができます。

get_post_metaを使って配列を出力する

$fields = get_post_meta( $post->ID, 'field', true );
if ( $fields ): foreach( $fields as $key => $val ):
 echo $val;
endforeach; endif;

 

Repeater fieldを独自関数を使わずにアウトプットする

初めて有料で購入したWPのプラグイン拡張だった様な気がします。25$。これは買ってください。

sc 2016-06-14 8.33.26

相当数の人が使用していると思われるリピーターフィールドですが、これも出力方法に癖があります。公式に案内されているのは、次のような感じです。ゴリゴリのプラグイン依存ですね。

// 従来のrepeater fieldを出力するループ関数
if( have_rows('field') ): while( have_rows('field') ): the_row();

  $subfield = get_sub_field('subfield'); 
  // do something with subfield

endwhile; endif;

これは以下のようにPHPとget_post_metaで表現することが出来ます。こうすればデータベースに値があれば、 ACFなしで動作します。何を求めているコードなのかPHP的に一目瞭然なのが精神衛生上いいですね。

get_post_metaとforループで配列を出力する

$n = get_post_meta( $post->ID, 'field', true);
if ($n): for ($i = 0; $i < $n; $i++ ):
  $subfield = get_post_meta( $post->ID, 'field_'.$i. '_subfield', true );
  // do something with subfield

endfor; endif;

実地に合わせるとこんな感じに落ち着きます。

$n = get_post_meta( $post->ID, 'item', true);
if ($n): for ($i = 0; $i < $n; $i++ ):
  $image = get_post_meta( $post->ID, 'item_'.$i. '_image', true );
  if ( $image ) {
    echo '<div class="image">'.wp_get_attachment_image ( $image, 'medium' ).'</div>'."n";
  } 
  $text = get_post_meta( $post->ID, 'item_'.$i. '_text', true ); 
  if ( $text ) {
    echo '<div class="text">'.wpautop( $text ).'</div>'."n";
  }
endfor; endif;

カテゴリのカスタムフィールドをwp term meta対応にする

カテゴリに画像や注釈を付与するという要件は、CMSではよくある話です。カテゴリのカスタムフィールド設定は、なかなか満足できるプラグインがなくACFを使わざるをえず、ACFの独自データテーブルに依存するのを避けられませんでした。しかしwp4.4から公式にカテゴリやタグなどのタームはデフォルトでメタフィールド(wp term meta)が設置可能になりました。当初すぐにACFもサポートするものだと思っていましたが、半年待っても音沙汰なく、今後対応するかどうかも一切不明。wp term metaに対応すると、ユーザー囲い込みの一端が解けることを嫌ってるんじゃないかとか邪推したくなります。公式の機能からかけ離れていくのもどうかと思うんですけどね。

で、ACFのフォーラムで素晴らしい発案(How to use WP Term Meta, the easy way!)があったので私もそれを採用することにしました。ACF側でタームメタが更新された時に、自動的にwp term metaを上書きするだけです。逆方向はどうするんだとか、疑問はあるかもしれませんが、基本的には、wp term metaにストアさえされていれば、get_fieldを使わずに公式のget_term_metaで出力できまので大抵のテーマでは間に合うでしょう。これでいざACFとの離婚協議が始まっても、優位にたてるというわけです。

以下をfunctions.phpに書き込みます。

Advanced Custom Fieldsのタームメタ変更に合わせてwp_term_metaを上書き

add_filter( 'acf/update_value', 'acf_update_term_meta', 11, 3 );
function acf_update_term_meta($value, $post_id, $field) {
    $term_id = intval(filter_var($post_id, FILTER_SANITIZE_NUMBER_INT));
    if($term_id > 0) update_term_meta($term_id, $field['name'], $value);
    return $value;
}

たとえばカテゴリに画像IDを登録したとして、それをテンプレートから出力する際は、以下様になります。wp_term_metaを呼び出す、つまりwpのデフォルト関数を使うだけ。シンプルですね。

$term_img = get_term_meta( $term_id, 'category_image', true );
if( $term_img ) {
  echo wp_get_attachment_image ( $term_img, 'thumbnail' );
}

 

プラグインの機能拡張に伴い自動的にoptionの値を更新したい、ということがあります。wordpressにはプラグインをアクティベートしたときにフックする [register activation hook] がありますが、アップデート時には起動しません。(昔は動いていたらしい。)しばらく前にinit関数に引っ掛けて云々というのを読んだ記憶もあって、面倒だと思いoptionの値を更新しなくてもすむようにやりくりしてきました。

しかしどうしても避けきれなくなり、今回あらためて調べ直したところ、[upgrader process complete] なるすばらしいフックを発見した次第です。プラグインやテーマ、ワードプレスなどのアップグレードにあわせて作動させることができます。どうやら設置されてすでに3年以上経つらしい。今日まで知らんかった・・・。ということで、日本語の記事も見当たらなかったのでメモしておきます。すでに常識なのかもしれませんが。

add_action( 'upgrader_process_complete', 'my_upgrader_process_complete', 10, 2 );

function my_upgrader_process_complete( $upgrader_object, $options ) {
    $current_plugin_path_name = plugin_basename( __FILE__ );
    if ($options['action'] == 'update' && $options['type'] == 'plugin' ){
        foreach($options['plugins'] as $each_plugin){
            if ($each_plugin == $current_plugin_path_name ){

            // YOUR CODES

            }
        }
    }
}

たとえばマルチバイトパッチと自作プラグインの二つを更新したとします。すると$optionsの返り値は、以下のような感じになります。codexではなぜか[packages]になってましたが代わりに[plugins]というkeyが返って来ました。おそらくこの[plugins]は必ず取得できるわけではなく、themeやwpの更新時にはそれぞれのkeyが適宜追加される仕様になっているような気がしますので、必ず[action]と[type]を取得して条件分岐をする必要がありそうです。

Array
(
    [action] => update
    [type] => plugin
    [bulk] => 1
    [plugins] => Array
        (
            [0] => wp-multibyte-patch/wp-multibyte-patch.php
            [1] => my-plugin/my-plugin.php
        )
)

Jetpackのパブリサイズ共有で記事が全文表示されてしまう。

パブリサイズ共有を行うと、記事全文が表示されていることに気がついた。どうやら気がつくのが遅かったらしく、巷では、ポツポツ話題になっていた模様。(【Jetpackで共有】全文書かれてしまう・・・ / JetpackでFacebookパブリサイズ共有を行った際に記事全文が共有されてしまう問題への暫定対応

jetpackがうまく動作していないのか、単に仕様が変更になったのかよくわからない。調べるのも面倒なので、この期に出力内容をカスタマイズして対応しておくことにしました。

 

publicize_save_metaフィルターで共有時にフックする。

_wpas_messというカスタムフィールドを書き換えることでパブリサイズ共有の出力を変更できます。とりあえず私の管理している範囲では本文を引用する共有対象はfacebookくらいなので、$service_name != ‘facebook’で条件判定しています。(そもそも他のSNSではどのように引用されているんでしょうかね。)最初抜粋を表示する方向で検討していましたが、どうせog:descriptionが表示されるのでバッサリカットしました。すっきり。

(参考:WordPress Jetpackのパブリサイズ共有のメッセージを自動設定

/////////////////////// パブリサイズ共有のコンテンツ設定 /////////////////////// 

function change_publicize_save_meta( $submit_post, $post_id, $service_name, $connection ){
 if ( $service_name != 'facebook' ) return;
 $publicize_custom_message = get_post_meta( $post_id, '_wpas_mess', true );
 if ( !$publicize_custom_message ) {
 $publicize_custom_message = sprintf(
 "記事『%s』を投稿しました。 %s",
 strip_tags( get_the_title($post_id) ),
 wp_get_shortlink( $post_id, 'post' )
 );
 update_post_meta( $post_id, '_wpas_mess', $publicize_custom_message );
 }
}
add_action( 'publicize_save_meta', 'change_publicize_save_meta', 10, 4 );
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公開

 

Image Uploader for Welcart

Image Uploader for Welcart

Image Uploader for Welcartwordpress.orgから最新版をダウンロードしてください。
「Image uploader for Welcart」はコルネ株式会社さんが提供されているプラグイン「Welcart e-commerce」専用のイメージアップローダーです。お使いのwordpressに「Welcart e-commerce」をインストールしてからご利用ください。最新版同士※1でのご使用を推奨しております。なお、不具合等がありましたら、ここのコメント欄かWP公式のサポートスレッドにてご報告※2ください。

※1 WordPress4.5.4からメディアのアップロード時のサニタイズ仕様が変更になりました。Ver4.5.4+で使用する場合は必ずwelcart1.9+ Image Uploader1.4+をご使用ください。
※2 Welcartのフォーラムでは当プラグインに関する質問はお答えできません。

 

Welcart専用の画像アップローダーを商品情報編集ページに設置する

welcartは画像の名前の持ち方が制限があり、[商品コード–.jpg]としなくてはならない。CSVで管理したり一気に流し込むときにはとても便利なのだけど、ちまちま手作業で更新する小規模ウェブショップだとちょっと面倒。ましてCMSとして納品する場合、ウェブショップの運営者が不慣れだったり、担当者が変更になって引き継ぎが上手くいかなかったり…、と言うのはよくある話。何はともあれ、間違いが起きにくいように「画像あげたいな→ボタンがある→こんな感じかな→よしオッケー♪」という流れにしたい。
つまり…

商品情報編集ページから画像をアップロードできるようにする

アップロードした画像のタイトルをwelcart仕様に自動リネームし商品画像として登録する

編集画面上でドラッグで表示順を並べ替えられるようにする

…でも

welcartのメディアライブラリによる一括アップロード&紐付け機能は維持

ということが実現したいわけです。

 

商品情報編集画面でのアップロード&操作方法

rfw-01

設置すると上図のように、デフォルトの商品画像ボックスが削除され新たに専用のメタボックスが表示されます。(メタボックスはサイド表示を想定していますが、ノーマル表示やタブレットなどの小さい画面などwordpressのメタボックスソートやレスポンシブデザインにも対応しています。)

 

rfw-02

画像をアップロードします。

① 画像追加ボタンを押すとアップローダーが立ち上がります。

② 画像をアップロードします。

③ 「商品画像を選択」ボタンを押します。(複数まとめてどうぞ)

④ 選択された画像がメタボックスに表示されます。

 

rfw-03

⑤ サムネイルをドラッグして並べ替えることで、welcartの画像並びに反映されます。一番上に来る画像がメイン画像として設定されます。

⑥ 画像右上のデリートボタンを押すと商品画像の登録を解除できます。
デリートした画像は、投稿に添付された状態でライブラリに残ります。これがけっこうミソで、在庫でバリエーションがあったり無かったりの時に画像をアップロードしたり削除したりしなくても、すぐに元にもどせるようになります。一時的にカラーやサイズのバリエーションなどの写真だけ隠す、というような使い方をするときに便利です。

⑦ 商品を公開/更新します。画像が自動でリネームされ、welcartに登録(または登録解除)されます。メイン画像はアイキャッチ画像にも自動的に登録されます。
上の図では、3つの画像はそれぞれTEST-PRODUCT(一番目のメイン画像), TEST-PRODUCT–1(サブ画像1), TEST-PRODUCT–2(サブ画像2)と自動でリネームされています。自動で設定されるが好ましくない場合は、以下のコードをfunctions.php等に記載することでオート機能をオフにしてください。なお、オート機能をオフにしていても、アイキャッチ画像が選択されていない時は、自動的にトップの画像が設定されます。

add_filter('iu4w_auto_thumbnail', '__return_false');

 

メディアライブラリからまとめてアップロードする

welcartの形式通りアップロードすればwelcartに反映されます

メディアライブラリの画像アップローダーから商品コード名の画像がアップされた場合、商品情報ページを開いたときに自動的に商品投稿をアップロード先として紐付けされます

SKU–数字.jpg形式のものを重複して上げてしまっても個別にインデクスされますので、形式さえ合っていれば適当なナンバリングで問題ありません。(WP4.5.4からファイルのサニタイズ仕様が変更になっているためWP4.5.4+を仕様する場合は必ずwelcart1.9+ Image Uploader1.4+を使用してください。詳細はwelcart公式の案内をご覧ください。)

rfw-04

画像が反映されているはずですので、並べ替えなどを行って更新して下さい。

 

設置方法&出力方法

プラグインとして読み込んで有効化すれば、自動的に設置されます。

画像の呼び出し方はwelcartの機能のままですのでテーマに手を入れる必要はありません。

 

Change log

  • 1.4.12017/02/24レイアウトを改善するとともに代替テキストやキャプションを入力可能に。wp.media.jsで起きていたTypeErrorをfix。
  • 1.4.02016/10/01welcart1.9以降のsubimage_ruleに対応。
  • 1.3.92016/09/19バグフィクス。
  • 1.3.82016/09/11プラグインの記述をクラス対応に変更。
  • 1.3.72016/05/30テキストドメインをglotpress対応に変更。レスポンシブ時のCSSを修正。
    1.3.72016/05/30テキストドメインをglotpress対応に変更。レスポンシブ時のCSSを修正。
  • 1.3.6.12015/11/24商品多数時の保存・並び替えバグをフィクス。
  • 1.3.62015/11/20UIを変更、それに伴いJS等の処理を修正、画像無し保存時のエラーをデバッグ。
  • 1.3.52015/10/17バグフィクス。
  • 1.3.42015/09/12コンフリクト回避のためコードを変更。
  • 1.3.22015/01/18メディアライブラリから一括でアップロードした画像が重複したpost_titleを持つ場合もプラグインが認識して読み込むように変更。
  • 1.32015/01/07正式版1.3としてプラグインをリリース。極力DBを汚さないようにカスタムフィールドを使う仕様をやめました。更新の混乱を避けるためここで公開していたコードは消去。
  • 1.2.12014/12/11画像をセレクト後「商品画像を選択」ボタンを押さずにウィンドウを閉じた場合でも画像をセレクトしてしまう動作を修正。
  • 1.22014/10/08レスポンシブデザイン化。WP4.0のメディアアップローダの仕様に併せて記述変更、アップローダ内での画像削除に対応。※WP3.9以前は旧バージョン1.2をご使用ください。
  • 1.1.12014/05/24wp_update_postで商品の複製ができる問題に対処。画像アップ後にSKUを変更してもリネームされなかった問題に対処。SKU変更に応じて画像も自動リネームされるように。
  • 1.12014/04/25アップローダーの仕様を変更。よりシンプルにしました。
  • 1.02014/04/23公開。
sc-2014-10-02-16.38

PLUGIN : MY UPLOAD IMAGES

My upload imageswordpress.orgから最新版をダウンロードしてください

 

wordpressの投稿画面にメディアアップローダー付きのメタボックスを設置

カスタムフィールドテンプレートなどの便利なプラグインがあるので、画像だけのメタボックスが必要になることは少ないでしょう。しかしシンプルな設計のギャラリーページなどには多機能すぎることもしばしばあります。My upload imagesは機能をシンプルにして画像の並べ替えとIDの取得にのみ特化したプラグインです。

投稿タイプを指定します

メタボックスを表示する投稿タイプを管理画面の「設定」から選択できます。

screenshot-1-jp

カスタムフィールドに画像IDを登録する

オリジナルテンプレートでポートフォリオのような機能を持たせつつ普通のエントリにも添付画像を使いたい、なんてテーマを作るときはギャラリー用のメディアアップローダーを設置してカスタムフィールドにIDを登録したりできると便利です。「画像の追加・削除」ボタンでアップローダーが起ち上がります。get_post_metaで呼び出してforeachすれば画像のIDを取ることができます。(下記参照)

ドラッグで手軽に画像を並べ替える

管理者画面のsortable.jsを流用しています。ドラッグでソートできる他、サムネイルの右上の×印をクリックするとカスタムフィールドからIDを削除できます。

レスポンシブに対応

WPの管理画面のレスポンシブデザインに対応して自由な位置にメタボックスを表示できます。

 

設置&出力方法

プラグインとして読み込み、有効化して下さい。「設定」リンク内にある「マイアップロード画像」より投稿タイプを指定して下さい。

テーマ内で使用するには、ループ中でカスタムフィールドの配列を呼び出します。例えば、下のようになります。

シンプルな出力例

<?php
$my_upload_images = get_post_meta( $post->ID, 'my_upload_images', true );
if ( $my_upload_images ): foreach( $my_upload_images as $img_id ):
 $full_src = wp_get_attachment_image_src ($img_id,'fullsize');
 if ( !$full_src ) continue;
 echo 
 '<a href="'.$full_src[0].'">'.wp_get_attachment_image ($img_id,'thumbnail').'</a>'."n";
endforeach; endif; 
?>

画像に付随する色々なデータを扱う場合の出力例

<?php
$my_upload_images = get_post_meta( $post->ID, 'my_upload_images', true );
$slider = '';
if ( $my_upload_images ): 
 foreach( $my_upload_images as $img_id ):
 $full_src = wp_get_attachment_image_src ($img_id,'fullsize');
 if ( !$full_src ) continue;
 $file = get_post( $img_id );
 $img_title = $file->post_title; // title
 $img_caption = $file->post_excerpt; // caption
 $img_desc = $file->post_content; // desctiprion
 $img_alt = get_post_meta( $img_id, '_wp_attachment_image_alt', true ); // alt
 $thumb_src = wp_get_attachment_image_src ($img_id,'thumbnail');
 $slider .= 
 "t".'<li>'."n".
 "tt".'<a href="'.$full_src[0].'"'.( $img_title ? ' title="'.esc_attr( $img_title ).'"' : '' ).'>'."n".
 "ttt".'<img src="'.$thumb_src[0].'" width="'.$thumb_src[1].'" height="'.$thumb_src[2].'"'.( $img_alt ? ' alt="'.esc_attr( $img_alt ).'"' : '' ).'/>'."n".
 ( $img_title ? "ttt".'<div class="title">'.$img_title.'</div>'."n" : '' ).
 ( $img_desc ? "ttt".'<div class="caption">'.wpautop( $img_caption ).'</div>'."n" : '' ).
 "tt".'</a>'."n".
 "t".'</li>'."n";
 endforeach; 
 echo '<ul class="slider">'."n".$slider.'</ul>'."n";
endif; 
?>

*カスタムフィールドの値が複数なのではなく、一つの値の中で配列にしています。(順序を記録しやすいので。)get_post_metaで呼び出すとき3つ目のパラメータをfalseとやらないようにしてください。

(以前こちらで公開していたコードは、情報が古くなっているため、削除いたしました。ソースはプラグインを参照してください。)

Change log

  • 1.3.72015/11/16編集ボタンを追加、コード内の関数名を変更
  • 1.3.62015/10/18デバッグ
  • 1.3.52015/10/11デバッグ
  • 1.3.42015/09/12サムネイルにキャプションを表示
  • 1.3.32015/06/07メタボックスの位置を指定可能に
  • 1.3.22015/05/10アイキャッチ画像の自動作成に対応
  • 1.3.12015/01/15Javascript デバッグ
  • 1.32015/01/10パブリックバージョンリリース。WP4.1に対応。メディアエディタを呼び出すjQueryを変更しました。wordpressのメディアエディターを利用している都合上、複数サイトでの更新管理が煩雑なのでプラグイン化しました。投稿タイプを選べるように設定画面を追加しました。特にコードに触らないならプラグインでどうぞ。
  • 1.2.12014/12/11画像をセレクト後「画像を選択」ボタンを押さずにウィンドウを閉じた場合でも画像をセレクトしてしまう動作を修正。
  • 1.22014/10/10WPのレスポンシブデザインに対応してjavascriptとCSSを変更。
  • 1.12014/10/3WP4.0にあわせてメディアアップローダー内での画像削除に対応。(3.9以下は旧バージョンを使用して下さい。)
  • 1.02014/04/25イニシャルリリース
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";
    }
}
?>