WordPress3.5でもCustom Field GUI Utility3の画像アップロードを使う

投稿日 2013年1月12日
更新日 2013年2月27日
著者キタジマタカシ
カテゴリー WordPress

WordPress3.5になってからメディアアップローダーが大幅に変更された。その影響で、メディアアップローダーを使うプラグイン「Custom Field GUI Utility3」にも不具合が発生した。

Custom Field GUI Utility3の画像アップロードフィールドは、旧型メディアアップローダーに対して「カスタムフィールドに挿入」ボタンを追加する仕組みになっているため、新型メディアアップローダーが表示されても「カスタムフィールドに挿入」ボタンが表示されず、入力ができないのだ。そのため、Custom Field GUI Utility3の画像アップロードフィールドから画像をアップロードするときには、旧型メディアアップローダーが表示されるように修正する必要がある。

修正内容

cfg-utility.php

画像アップロードフィールドのアップロードボタンの表示は、WordPressの標準のメディアアップローダーを呼び出し利用する仕組みになっている。WordPress3.5においては標準のメディアアップローダー=新型メディアアップローダーとなるので、標準ではなく、オリジナルのボタンを表示させるように修正する必要がある。

そこで、次に挙げる2つの関数（insert_head、make_textform）を修正する。ここでは「画像アップロード」という太字文字列を表示させ、それをボタンとして利用するようにしている（合わせてCSSも修正し、それっぽいボタンにしたほうが良いかも）。

元のコード

/* 管理画面のhead要素でCSSとJavaScriptファイルの読み込み */
function insert_head () {
    $plugin_url = get_bloginfo('wpurl') . '/wp-content/plugins/custom-field-gui-utility/';
    $head = <<< EOD
    <link rel="stylesheet" href="{$plugin_url}facebox/facebox.css" type="text/css" media="all" />
    <link rel="stylesheet" href="{$plugin_url}cfg-utility.css" type="text/css" media="all" />
    <link rel="stylesheet" href="{$plugin_url}exValidation/css/exvalidation.css" type="text/css" />
    <script type="text/javascript" src="{$plugin_url}facebox/facebox.js"></script>
    <script type="text/javascript" src="{$plugin_url}exValidation/js/exvalidation.js"></script>
    <script type="text/javascript" src="{$plugin_url}exValidation/js/exchecker-ja.js"></script>
    <script type="text/javascript" src="{$plugin_url}cfg-utility.js"></script>
    <script type="text/javascript">
    jQuery(function($){
        $("form#post").exValidation();
    });
    </script>
EOD;
    echo $head;
}

変更後のコード

/* 管理画面のhead要素でCSSとJavaScriptファイルの読み込み */
function insert_head () {
    $plugin_url = get_bloginfo('wpurl') . '/wp-content/plugins/custom-field-gui-utility/';
    $admin_url = admin_url();
    $head = <<< EOD
    <link rel="stylesheet" href="{$plugin_url}facebox/facebox.css" type="text/css" media="all" />
    <link rel="stylesheet" href="{$plugin_url}cfg-utility.css" type="text/css" media="all" />
    <link rel="stylesheet" href="{$plugin_url}exValidation/css/exvalidation.css" type="text/css" />
    <script type="text/javascript" src="{$plugin_url}facebox/facebox.js"></script>
    <script type="text/javascript" src="{$plugin_url}exValidation/js/exvalidation.js"></script>
    <script type="text/javascript" src="{$plugin_url}exValidation/js/exchecker-ja.js"></script>
    <script type="text/javascript" src="{$plugin_url}cfg-utility.js"></script>
    <script type="text/javascript">
    jQuery(function($){
        $("form#post").exValidation();
        if ( $( 'b.add_image' ).length ) {
                $('b.add_image').live('click', function(){
                    // show the thickbox
                    tb_show( 'ファイルをアップロード', '{$admin_url}media-upload.php?post_id=&TB_iframe=1' );
                    return false;
                });
        }
    });
    </script>
EOD;
    echo $head;
}

元のコード

/* input[type=text]系のカスタムフィールドのボックスの中身を生成する */
function make_textform ($param) {

    $post_id     = $param['post_id'];
    $meta_key    = $param['meta_key'];
    $type        = $param['type'];
    $class       = $param['class'];
    $default     = $param['default'];
    $size        = $param['size'];
    $sample      = $param['sample'];
    $fieldname   = $param['fieldname'];
    $must        = $param['must'];
    $placeholder = $param['placeholder'];
    $validation  = $param['validation'];

    $name = 'cfg_' . sanitize_name($meta_key);
    $meta_value = get_post_meta($post_id, $meta_key, true);
    if (!empty($meta_value) or strval($meta_value) === '0') {
        $value = esc_attr($meta_value);
    } elseif (!empty($default) || $default == 0) {
        $value = esc_attr($default);
    } else {
        $value = '';
    }
    $input = make_input ($name, $value, $size, $default, 'text', $placeholder, $validation);
    $media_buttons = '';
    ob_start();
    do_action('media_buttons');
    $media_buttons = ob_get_contents();
    ob_end_clean();
    if ($type == 'textfield') {
        $inside = <<< EOF
        <p class='cfg_input'>$input</p>
EOF;
        $out = make_element ($name, $type, $class, $inside, $sample, $fieldname, $must);
    } elseif ($type == 'imagefield') {
        $inside = <<< EOF
        <p class="cfg_input">
            $input
            <img class="cancel" src="" width="16" height="16" style="display:none;" />
            <span class="thumb" id="{$name}_thumb">
                <a href="#" class="image" rel="facebox"></a>
            </span>
        </p>
        <p class="cfg_add_media_pointer">{$media_buttons}</P>
EOF;
        $out = make_element ($name, $type, $class, $inside, $sample, $fieldname, $must);
    } elseif ($type == 'filefield') {
        $inside = <<< EOF
        <p class="cfg_input">
            $input
            <img class="cancel" src="" width="16" height="16" style="display:none;" />
        </p>
        <p class="cfg_add_media_pointer">{$media_buttons}</P>
EOF;
        $out = make_element ($name, $type, $class, $inside, $sample, $fieldname, $must);
    }
    return $out;
}

変更後のコード

/* input[type=text]系のカスタムフィールドのボックスの中身を生成する */
function make_textform ($param) {

    $post_id     = $param['post_id'];
    $meta_key    = $param['meta_key'];
    $type        = $param['type'];
    $class       = $param['class'];
    $default     = $param['default'];
    $size        = $param['size'];
    $sample      = $param['sample'];
    $fieldname   = $param['fieldname'];
    $must        = $param['must'];
    $placeholder = $param['placeholder'];
    $validation  = $param['validation'];

    $name = 'cfg_' . sanitize_name($meta_key);
    $meta_value = get_post_meta($post_id, $meta_key, true);
    if (!empty($meta_value) or strval($meta_value) === '0') {
        $value = esc_attr($meta_value);
    } elseif (!empty($default) || $default == 0) {
        $value = esc_attr($default);
    } else {
        $value = '';
    }
    $input = make_input ($name, $value, $size, $default, 'text', $placeholder, $validation);
    $media_buttons = '';
    $media_buttons = '<b class="add_image">画像アップロード</b>';
    /*
    ob_start();
    do_action('media_buttons');
    $media_buttons = ob_get_contents();
    ob_end_clean();
    */
    if ($type == 'textfield') {
        $inside = <<< EOF
        <p class='cfg_input'>$input</p>
EOF;
        $out = make_element ($name, $type, $class, $inside, $sample, $fieldname, $must);
    } elseif ($type == 'imagefield') {
        $inside = <<< EOF
        <p class="cfg_input">
            $input
            <img class="cancel" src="" width="16" height="16" style="display:none;" />
            <span class="thumb" id="{$name}_thumb">
                <a href="#" class="image" rel="facebox"></a>
            </span>
        </p>
        <p class="cfg_add_media_pointer">{$media_buttons}</P>
EOF;
        $out = make_element ($name, $type, $class, $inside, $sample, $fieldname, $must);
    } elseif ($type == 'filefield') {
        $inside = <<< EOF
        <p class="cfg_input">
            $input
            <img class="cancel" src="" width="16" height="16" style="display:none;" />
        </p>
        <p class="cfg_add_media_pointer">{$media_buttons}</P>
EOF;
        $out = make_element ($name, $type, $class, $inside, $sample, $fieldname, $must);
    }
    return $out;
}

cfg-utility.js

PHPファイルを修正し、表示するボタンが変更されたので、JSファイルに書いてある「標準メディアアップローダーのボタンを押したとき」という部分を「オリジナルのメディアアップローダーのボタンを押したとき」に変更する。

元のコード

    // アップロードボタンを調整 [start]
    $('p.cfg_add_media_pointer a.add_media').addClass('cfg_add_media_clone').removeAttr('id');
    // アップロードボタンを調整 [end]

    // イメージフィールド・ファイルフィールド周りのliveイベントを設定 [start]
    $('a.cfg_add_media_clone').on('click', function(){

変更後のコード

    // アップロードボタンを調整 [start]
    // $('p.cfg_add_media_pointer a.add_media').addClass('cfg_add_media_clone').removeAttr('id');
    // アップロードボタンを調整 [end]

    // イメージフィールド・ファイルフィールド周りのliveイベントを設定 [start]
    // $('a.cfg_add_media_clone').on('click', function(){
    $('b.add_image').on('click', function(){

以上でアップロードできるようになる。

Custom Field GUI Utility 3.2 – WordPress プラグイン | かたつむりくんのWWW