「Custom Field GUI Utility 3.2」の「imagefield」をWordPress 3.5に対応させる方法

Published:2013.03.07Last updated:2016.11.11

以前の記事で「『Custom Field GUI Utility 3.2』使うの止めて『Advanced Custom Fields』使うことにしました」みたいなことを言いましたがそんなことを言いつつもやっぱり「Custom Field GUI Utility 3.2」も使ったりします。
ただ、そのままでは「imagefield」が動作しなかったのでちょっとプラグインをいじってみました。

WordPress3.5から導入された新しいメディアアップローダーが原因のようです。
ですので、プラグインを直接編集して旧メディアアップローダーを呼び出すよう修正します。

cfg-utility.phpの修正

まずはcfg-utility.phpの57行目あたり。

/* 管理画面の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 ( $( 'a.add_image' ).length ) {
            $('a.add_image').live('click', function(){
                tb_show('ファイルをアップロード', '{$admin_url}media-upload.php?post_id=&TB_iframe=1');
                return false;
            });
        }
    });
    </script>
EOD;
    echo $head;
}

そして、283行目辺りの、

$media_buttons = '';
ob_start();
do_action('media_buttons');
$media_buttons = ob_get_contents();
ob_end_clean();

となっている部分を、

$media_buttons = '<a class="add_image button">画像アップロード</a>';
/*
ob_start();
do_action('media_buttons');
$media_buttons = ob_get_contents();
ob_end_clean();
*/

と修正します。以上でcfg-utility.phpの修正は完了。
次はcfg-utility.jsを修正します。

cfg-utility.jsの修正

次はcfg-utility.jsの178行目辺り、

// アップロードボタンを調整 [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(){
    var self = $(this);

    // アップローダーをクリック(clc)したイメージフィールドのidをcookieに保存
    var clc_id = self.closest('div.imagefield').attr('id');
    setCookie('imf_clc_id',clc_id);
});
// イメージフィールド・ファイルフィールド周りのliveイベントを設定 [end]

となっている部分を以下のように修正。

// アップロードボタンを調整 [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(){
$('a.add_image').on('click', function(){
    var self = $(this);

    // アップローダーをクリック(clc)したイメージフィールドのidをcookieに保存
    var clc_id = self.closest('div.imagefield').attr('id');
    setCookie('imf_clc_id',clc_id);
});
// イメージフィールド・ファイルフィールド周りのliveイベントを設定 [end]

以上で完了です。
例のごとくプラグインを直接編集する力技ですので、自己責任でご対応下さい。

ではでは。

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

最新の記事

お知らせ