WP_DEBUGをオンにすると、akismetによって大量のスパムコメントチェックなどがdebug.logに記載されていく。もうログ自体がスパムみたいになってますよ。1年ほど前にakismetのプラグインにフィルターが付加されていたことに最近気がつきました。これでakismetだけログへの書き込みをオフに出来ます。

add_filter( 'akismet_debug_log', '__return_false' );

プラグインの機能拡張に伴い自動的に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
        )
)

sc 2015-05-12 19.19.04

ちゃんとcsvダウンロードして、手元で売上げやら何やら管理してれば割とどうでも良いかもですが…、やっぱりウェブ上でも見れた方が良いよね! …というときに。

以下の関数をfunctions.phpに記述します。アンチョコはusceshop.class.php より、get_order_num() & get_order_amount() の両関数。usces_action_admintop_box2にフックしています。「受注数・金額」と「商品登録情報」の間に表示したい場合は、usces_action_admintop_box1にフックして下さいな。

(言うまでもありませんが、画像の数字はダミーです。)

 

code: transition of amount of 12 months


/////////////////////// 受注金額リスト /////////////////////// 

add_action( 'usces_action_admintop_box2', 'amount_of_12_months', 10 );
function amount_of_12_months (){
    global $wpdb;
    $datestr = substr(get_date_from_gmt(gmdate('Y-m-d H:i:s', time())), 0, 10);
    $yearstr = substr($datestr, 0, 4);
    $monthstr = substr($datestr, 5, 2);
    $daystr = substr($datestr, 8, 2);
?>
<h4>過去の受注数・金額</h4>
<div class="usces_box">
<table class="dashboard">
<tr>
<th><?php _e('Currency','usces'); ?> : <?php usces_crcode(); ?></th><th><?php _e('number of order', 'usces'); ?></th><th><?php _e('amount of order', 'usces'); ?></th>
</tr>
<?php 
    
    for ($num = 0; $num < 12; $num++){
        $date = date('Y年n月', mktime(0, 0, 0, (int)$monthstr+$num, 1, (int)$yearstr-1));
        $startdate = date('Y-m-01 00:00:00', mktime(0, 0, 0, (int)$monthstr+$num, 1, (int)$yearstr-1));
        $enddate = date('Y-m-d 23:59:59', mktime(0, 0, 0, (int)$monthstr+1+$num, 0, (int)$yearstr-1));
        $table_name = $wpdb->prefix . 'usces_order';    
        $query = $wpdb->prepare("SELECT COUNT(ID) AS ct FROM $table_name WHERE order_date >= %s AND order_date <= %s AND 0 = LOCATE(%s, order_status) AND 0 = LOCATE(%s, order_status)", $startdate, $enddate, 'cancel', 'estimate');
        $number = $wpdb->get_var($query);

        $query = $wpdb->prepare("SELECT SUM(order_item_total_price) AS price, SUM(order_usedpoint) AS point, SUM(order_discount) AS discount, SUM(order_shipping_charge) AS shipping, SUM(order_cod_fee) AS cod, SUM(order_tax) AS tax 
                                 FROM $table_name WHERE order_date >= %s AND order_date <= %s AND 0 = LOCATE(%s, order_status) AND 0 = LOCATE(%s, order_status)", $startdate, $enddate, 'cancel', 'estimate');
        $res = $wpdb->get_row($query, ARRAY_A);
        if( $res !== NULL ){
            $amount = $res['price'] - $res['point'] + $res['discount'] + $res['shipping'] + $res['cod'] + $res['tax'];
            echo '<tr><td>'.$date.' : </td><td class="bignum">' .number_format($number). '</td><td class="bignum">'.usces_crform( $amount, true, false, 'return' ). '</td></tr>'."n";
        }
    }
?>
</table>
</div>
<?php 
}

sc-2015-01-25-13.23.51

投稿画面のカテゴリやタグのメタボックスを使いやすくするあれこれ

先日、wordpressの管理画面でのタグクラウドをデフォルトで表示する方法を書きましたが、同じくカテゴリーやカスタムタクソノミノーの表示をあれこれ変更する方法を書いておきます。CMSで納品するときなどには大事な心遣いだと思います。カスタムタクソノミに適用するときは、「category」となっているところをすべてタクソノミ名に変換します。

 

「よく使うもの」リンクとタブを消す。

よく使う項目を表示とか余計なお世話、というときは消してしまう。

div#category-pop, ul#category-tabs { display:none; }

「+ 新規カテゴリーを追加」リンクを消す

同じく、カテゴリを追加ボタンも投稿画面から触ってほしくないときは消してしまう。

div#category-adder { display:none; }

カテゴリメタボックスのmax-heightを解除

デフォルトのカテゴリメタボックスが高さが200pxを超えるとスクロール表示される。視認性を確保したいときはこの設定を消してしまう。

div#category-all { max-height:none; }

カテゴリのチェックボックスをラジオボタンに変換

var checklist = $( '#categorychecklist' );
checklist.each( function(){
    $( this ).find( 'input' ).attr( 'type', 'radio' );
    if ( $( this ).find( 'input' ).is(':checked') === false ) $( this ).children( 'li:first' ).find( 'input' ).prop('checked', true);
});

カテゴリをひとつしか選んでほしくないときは、jQueryでラジオボタンに変換します。

カテゴリのチェックボックスをセレクトボックスに変換

カテゴリの項目が多いときは、jQueryでセレクトボックスに変換して省スペース化を計るととても使いやすいです。

var options=[]; 
$( "#categorychecklist label" ).each(function(){ 
    options.push( '<option value="' + $(this).children("input").val()+ '">' + $(this).html().replace(/<input[^>]+>/g, '') + '</option>' ); 
});
$( "#categorychecklist" ).replaceWith( '<select id="categorychecklist" name="tax_input[category][]" style="width:100%; margin:10px 0; ">' + options.join( '' ) + '</select>' );

チェックボックスを並び替えないようにする

ついでに並び順のデフォルトが、チェックが入っているボックスが一番上にくるようになっていますので、それも外してみます。これはフックで。

add_filter( 'wp_terms_checklist_args', 'stop_checked_ontop' ,10,2); 
function stop_checked_ontop( $args, $post_id ){ 
    $args['checked_ontop'] = false; 
    return $args; //チェックボックスの並び替え停止
}

 

CODE : Hook to admin_head

タグクラウドのデフォルト表示もまとめたコードです。以下の関数をお好みでカスタマイズしてadmin_headフックしたものをfunctions.phpに記載します。当然ですが、このまま有効にすると、ラジオボタンに変換する関数とセレクトボックスに変換する関数とがコンフリクトします。

<?php
function my_admin_head(){ 
?>
<style type="text/css">
    /*  カテゴリ欄のタブ非表示  */ 
    /*  remove tabs from category metabox  */ 
    div#category-pop, ul#category-tabs { display:none; }

    /*  カテゴリ追加ボタン非表示  */ 
    /*  remove category add button from category metabox  */
    div#category-adder { display:none; }

    /*  カテゴリ欄を最大サイズに変更  */ 
    /*  unset max-height of category metabox  */
    div#category-all { max-height:none; }
</style>
<script type="text/javascript">
jQuery(function( $ ){ 

    /*  チェックボックスをラジオボタンに変換  */
    /*  change category check box into radio button  */
    var checklist = $( '#categorychecklist' );
    checklist.each( function(){
        $( this ).find( 'input' ).attr( 'type', 'radio' );
        if ( $( this ).find( 'input' ).is(':checked') === false ) $( this ).children( 'li:first' ).find( 'input' ).prop('checked', true);
    });

    /*  チェックボックスをセレクトボックスに変換  */
    /*  change category check box into select box  */
    var options=[]; 
    $( "#categorychecklist label" ).each(function(){ 
        options.push( '<option value="' + $(this).children("input").val()+ '">' + $(this).html().replace(/<input[^>]+>/g, '') + '</option>' ); 
    });
    $( "#categorychecklist" ).replaceWith( '<select id="categorychecklist" name="tax_input[category][]" style="width:100%; margin:10px 0; ">' + options.join( '' ) + '</select>' );

    /*  タグクラウドをデフォルトで表示に変更  */
    /*  automatically display the popular tags  */
    $( 'a.tagcloud-link' ).each( function(){ 
        tagBox.get( $(this).attr( 'id' ) ); 
        $(this).html('').unbind().click(function(){ 
            $(this).siblings( '.the-tagcloud' ).toggle(); return false; 
        }); 
        return false; 
    });
});
</script>
<?php 
}
add_filter( 'admin_head', 'my_admin_head' );

function stop_checked_ontop( $args, $post_id ){ 
    if ( $args['checked_ontop'] !== false ) $args['checked_ontop'] = false; 
    return $args; //チェックボックスの並び替え停止
} 
add_filter( 'wp_terms_checklist_args', 'stop_checked_ontop' ,10,2); 
?>

参考

ラジオボタンとチェックボックスのソート解除は以下を参考にしました。あとは見当たらなかったので自作。

Category checkbox list tree changes when editing a post

WordPressのカスタムタクソノミーのチェックボックスをラジオボタンにする方法(クイック編集でもチェックボックスの制限をしたい場合なども参考になります。)

276_k

コメント編集ページに親コメントを設定できるメタボックスを設置する。

コメントの返信先が間違えている、コメントツリーがバラけて読みにくい、なんてことがある。どうでも良いことかもしれないが、私は気になる。要はコメント編集ページに親コメントID(コメントメタ内のcomment_parent)の入力欄を設置すれば良いのですが、それだけでは直感的に分かりにくいので、セレクトボックス化してアシストします。

sc 2014-12-05 23.30.06

 

 CODE: Create a dropdown list of comment_parent in a comment edit page.

作っては見たものの、やはりコメントスレッドが奇麗に並んでないことが気になるごく一部の人を除いて、必要のない機能ですね。レビューなどを活用されているCMSだと使えるかもしれません。
functions.phpに以下のコードを貼付けます。

function comment_parent_metabox(){
    add_meta_box( 'comment_parent', '親コメント', 'comment_parent_select', 'comment', 'normal', 'high' );
}
add_action( 'add_meta_boxes_comment', 'comment_parent_metabox' );
    
function comment_parent_select( $comment ){
    wp_nonce_field( 'comment_parent_update', 'comment_parent_update', false );
    $parent = $comment->comment_parent;
    $self_id = $comment->comment_ID;
    echo '<select id="comment_parent_select" name="comment_parent">'."n";
    $siblings = get_comments( 'post_id='.$comment->comment_post_ID );
    $selected ='';
    if($siblings): 
        if ( empty ( $parent ) ) : $selected = 'selected="selected"'; endif;
        echo '<option value="0" '.$selected.'>親コメントなし</option>'."n";
        foreach( $siblings as $sib ) :
            if ( $parent == $sib->comment_ID ) $selected = 'selected="selected"'; else $selected ='';
            if ( $sib->comment_ID != $self_id ) echo '<option id="comment-id-'.$sib->comment_ID.'" class="comment-parent" value="'.$sib->comment_ID.'" '.$selected.'>'.$sib->comment_author.' (id:'.$sib->comment_ID.' / '.$sib->comment_date.')【'.mb_substr( strip_tags($sib->comment_content), 0, 20). '...】</option>'."n";
        endforeach; 
    endif;
    echo '</select>'."n";
}
 
function comment_parent_edit( $comment_id ){
    if( !isset( $_POST['comment_parent_update'] ) || !wp_verify_nonce( $_POST['comment_parent_update'], 'comment_parent_update' ) ) return;
    if( isset( $_POST['comment_parent'] ) )
        update_comment_meta( $comment_id, 'comment_parent', esc_attr( $_POST['comment_parent'] ) );
}
add_action( 'edit_comment', 'comment_parent_edit' );

 

投稿編集画面のタグクラウドを初期状態から開いたままにする。

要するにページが読み込まれると同時に「よく使われているタグから選択」をクリックした状態にするだけ。探したけどなかったので自作。けっこう重宝します。ちょっと前はsimple tagsプラグインで拡張するのが一般的だったけども、もはやクイックタグボタンいらない気がしますしね。

CODE : Automatically display the popular tags when the admin post-php loads.

function my_admin_head(){
echo
'<script type="text/javascript">
    jQuery(function( $ ){ 
        $("a.tagcloud-link").each( function(){
            tagBox.get( $(this).attr("id") );
            $(this).html("").unbind().click(function(){
                $(this).siblings(".the-tagcloud").toggle();
                return false;
            });
            return false;
        });
    });
</script>';
}
add_action('admin_head', 'my_admin_head');

唐突にtagBoxってなんやねん?って思うでしょうが、tags-box.jsで指定されているタグクラウドをajaxする際のコンテナ名です。当初jQueryでトリガーを試みたものの動かないので、明示的にtags-box.js内のファンクションを動作させるために上記のような不可解なコードになったわけです。
ちなみに、a.tagcloud-linkのところをa#link-(post_tag名)にすることで特定のタグ(カスタムタクソノミ)だけに適用できます。

その他

カテゴリのメタボックスの表示をラジオボタンにしたりセレクトボックスにする方法も併せて書いたのでよければ参考に。クライアントワークの場合、不要なメニューやら入力欄を整理しておくことは大事ですね、ユーザーに熟練してもらう前提で設計できないケースが多いですから。

sc 2014-10-05 22.44.54

メディアアップローダ周りのデフォルト表示設定

メディアの量が増えてくると、いちいちロード時間が重っ苦しい。些細なことだけども、ユーザーにとって小さな親切大きな優しさというもの。

WP3.5からメディアアップローダーが新しくなり、「この投稿へのアップロード」をデフォルト表示を設定するのにjQueryを使ってajaxを検知しアップローダー読み込み後にセレクターを指定する手法が知られてました。(Change the default-view of Media Library in 3.5?)私もずっとそうしていたのだけども、最近、セレクトボックスを他のものに指定して作業しようとすると「この投稿へのアップロード」に戻されてしまうことに気がついた。どうやらajaxが複数回呼ばれるようになったためにjQueryが重複して読み込まれている模様。

※wp4.7.2(4.7.1?)よりprototypeアップローダーを呼び出す際にon(‘ready’,function(){})だとなぜかオーダーが早すぎることになったようです。詳しくは追いかけてませんが、on(‘open’,function(){})に変更したところ、問題なく稼働するようです。以下も修正しておきました。(2017.2.4)

他にwp.mediaのデフォルトのselect拡張自体を上書きする方法もあったのですが、これも最近になってうまく動作していないようでした。自作プラグインで使う必要もあって試行錯誤の末に、ajaxの検知をトリガーにするのをやめてアップローダーに紐づけしなおすことにしました。この機に他のデフォルト設定共々備忘録としてまとめておきます。問題点や不具合があれば教えて下さい。

「この投稿へのアップロード」をデフォルト表示

wp.media.view.Modal.prototype.on( 'open', function( ){ $( 'select.attachment-filters' ).find( '[value="uploaded"]').attr( 'selected', true ).parent().trigger('change'); });

メディアアップローダのデフォルト表示を「全てのメディア」から「この投稿へのアップロード」に変更します。

「この投稿へのアップロード」のみを表示

wp.media.view.Modal.prototype.on( 'open', function( ){ $( 'select.attachment-filters [value="uploaded"]').attr( 'selected', true ).siblings().hide().parent().trigger('change');});

いっそ、メディアアップローダのデフォルト表示を「この投稿へのアップロード」しか表示しないようにします。

「ファイルをアップロード」タブの優先表示

wp.media.controller.Library.prototype.defaults.contentUserSetting=false;

「メディアライブラリ」よりも常に「ファイルをアップロード」タブを優先表示するようにします。

左サイドメニューを非表示に設定

wp.media.view.Modal.prototype.on( 'open', function( ){ $( '.media-frame' ).addClass( 'hide-menu' ).addClass( 'hide-router' ); });

「ギャラリー」などのタブがいらない、という場合は左のナビを丸ごと削除します。
※上記のコードは「ファイルをアップロード」タグも隠すようになっています。ドラッグドロップでアップロード可能ですが、クライアントにとっては明示的で内分不親切かもしれませんので、その場合は上記の” .addClass( ‘hide-router’ ) “となっている箇所を削除してください。

 

CODE: Change the default Media Uploader view in WP4.0

<?php

function media_uploader_default_view() { 
?>
<script type="text/javascript">jQuery(function( $ ){ 
// メディア挿入セレクタのデフォルト表示を「この投稿へのアップロード」に設定
wp.media.view.Modal.prototype.on( 'open', function( ){ $( 'select.attachment-filters' ).find( '[value="uploaded"]').attr( 'selected', true ).parent().trigger('change'); });

// メディア挿入セレクタを「この投稿へのアップロード」のみの表示に設定
wp.media.view.Modal.prototype.on( 'open', function( ){ $( 'select.attachment-filters [value="uploaded"]').attr( 'selected', true ).siblings().hide().parent().trigger('change');});

// 「ファイルをアップロード」タブを優先表示
wp.media.controller.Library.prototype.defaults.contentUserSetting=false;

// 左サイドメニューを非表示に設定 
wp.media.view.Modal.prototype.on( 'open', function( ){ $( '.media-frame' ).addClass( 'hide-menu' ).addClass( 'hide-router' ); });

});
</script>
<?php }
add_action( 'admin_footer-post-new.php', 'media_uploader_default_view' );
add_action( 'admin_footer-post.php', 'media_uploader_default_view' );

?>

以上、必要なスクリプト以外は削除するかコメントアウトしてください。

 

その他のメディア周りで使える便利な設定

メディア表示をアップロードしたユーザーのみに限定する

挿入画像のデフォルト設定の変更(Insert Media – Attachment Display Settings: set a default)

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";
    }
}
?>