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″]
以下のコードはモンキーレンチさんのサイトから引用させていただきました。
プラグインの3つのファイルを修正する。
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系のメディアアップローダーに正式対応となりました。