tips

投稿記事編集画面に添付画像一覧ビューアを設置する。

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

Your Comment

コードの記述は<pre>または<code>タグで括って下さい。自動的にエスケープされます。

 

右の文字を入力して下さい captcha