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!
