2013年3月7日 / 最終更新日時 : 2013年7月20日 YabukiHiroshi wordpress忘備録

Custom Field GUI Utility3のWordPress3.5対応

カスタムフィールドで画像を扱うのにとても便利だったのでCustom Field GUI Utility3を使用していたが、WordPress3.5のバージョンアップに伴い画像アップローダーの仕様変更で「カスタムフィールドに挿入」というボタンが表示されなくなってしまった。
そこでググってみたところ、モンキーレンチさんの記事「WordPress3.5でもCustom Field GUI Utility3の画像アップロードを使う」をみつけた。
その方法はプラグインを直接編集して旧型メディアアップローダーが表示されるように修正するというもの。
[browser-shot url=”https://2inc.org” width=”300″]

以下のコードはモンキーレンチさんのサイトから引用させていただきました。

プラグインの３つのファイルを修正する。

cfg-utility.php

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

そこで、次に挙げる2つの関数（insert_head、make_textform）を修正する。「画像アップロード」というボタンを表示させる。合わせてcfg-utility.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 css_btn_class">画像アップロード</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(){
cfg-utility.css

最後に画像アップロードのボタンかをするためにcfg-utility.cssに下記のCSSを追記した。
ボタンのCSSはCSS Button Generatorで作成した。

/* 画像アップロードボタン */
.css_btn_class {
	font-size:12px;
	font-family:Arial;
	font-weight:normal;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #b8b8b8;
	padding:3px 18px;
	text-decoration:none;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fcf9fc), color-stop(100%, #f0f0f0) );
	background:-moz-linear-gradient( center top, #fcf9fc 5%, #f0f0f0 100% );
	background:-ms-linear-gradient( top, #fcf9fc 5%, #f0f0f0 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcf9fc', endColorstr='#f0f0f0');
	background-color:#fcf9fc;
	color:#0;
	display:inline-block;
	text-shadow:1px 1px 0px #ffffff;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
 	box-shadow:inset 1px 1px 0px 0px #ffffff;
}.css_btn_class:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #f0f0f0), color-stop(100%, #fcf9fc) );
	background:-moz-linear-gradient( center top, #f0f0f0 5%, #fcf9fc 100% );
	background:-ms-linear-gradient( top, #f0f0f0 5%, #fcf9fc 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#fcf9fc');
	background-color:#f0f0f0;
}.css_btn_class:active {
	position:relative;
	top:1px;
}

本家がアップデートして対応していただけるとありがたいが、これでとりあえず3.5にアップデートしてもCustom Field GUI Utility3が使えるようになった。

[browser-shot url=”https://www.tinybeans.net/blog/2013/03/04-120518.html” width=”300″]

[browser-shot url=”https://webcake.no003.info” width=”300″]

2013年3月Custom Field GUI Utility 3.3.0 リリースがリリースされ、WORDPRESS3.5系のメディアアップローダーに正式対応となりました。

Follow me!

カテゴリー
wordpress忘備録
タグ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

wordpress忘備録

前の記事

FancyBox jQueryでiframeをlightbox風に表示
2013年3月5日
未分類

次の記事

WordPressでlightbox系プラグインを使っている場合、jQuery1.8だとIEでバグる。
2013年6月26日