トップページ
Webデザイン情報
WordPress Tips
やっと解決しました！WordPress 3.5でカスタムフィールドに画像を追加する方法！

やっと解決しました！WordPress 3.5でカスタムフィールドに画像を追加する方法！

2013.01.22
WordPress Tips

Sponserd link

以前「カスタムフィールドへの画像追加をするならWordPress 3.5へのアップグレードは避けたほうがいいかも？？」という記事を書いたんですが、この解決方法を公開されている方がいらっしゃいましたので覚書をかねてシェアします。

この方はカスタムフィールドプラグインの「Custom Field GUI Utility3」を使用されているようなんですが、僕もよく使っており、龍弥デザインのウェブサイトでもこのプラグインを使っているので、この方法がそのまま使えました。

WordPress3.5でもCustom Field GUI Utility3の画像アップロードを使う | モンキーレンチ

解決法はこうです。

WordPress 3.5では画像などのアップロードの際に新しいメディアアップローダーが使われるため、「カスタムフィールドに挿入」のボタンが存在せず、フィールドに値を反映することが出来ません。

そのためWordPress3.4まで使われていたメディアアップローダーを呼び出して使用できるように変更する必要があり、プラグイン内のファイルを修正処理してあげます。

修正するファイルは。プラグインディレクトリ「/wp-content/plugins/custom-field-gui-utility/」内の「cfg-utility.php」と「cfg-utility.js」、そして「cfg-utility.css」です。

まず、cfg-utility.phpの57行目～75行目（修正前の行数です）くらいにある、

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

また、250行目～308行目（修正前の行数です）くらいにある、

/* 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の178行目～183行目（修正前の行数です）くらいにある、

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

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

上記のコードを以下のコードと差し替えます。

     // アップロードボタンを調整 
     // $('p.cfg_add_media_pointer a.add_media').addClass('cfg_add_media_clone').removeAttr('id');
     // アップロードボタンを調整
     // イメージフィールド・ファイルフィールド周りのliveイベントを設定
     // $('a.cfg_add_media_clone').on('click', function(){ $('b.add_image').on('click', function(){

これだけでアップロードして画像をフィールドへ挿入することは可能です。

この時点では画像を追加するフィールドには「画像アップロード」という太字テキストが表示されていて、それをクリックすると画像のアップローダーが表示されるようになります。

このままでもいいんですが、ボタンとして見せないとクライアントさんはわかりづらいですよね。

そこでcfg-utility.cssの調整。
今回は修正ではなく、cssに追加するだけでオッケーです。

ボタンテキストのclassは「b.add_image」が指定されていますので、ここにスタイルを指定します。

b.add_image {
  display: inline-block;
  padding: 2px 10px;
  color: #333;
  background: -webkit-linear-gradient(top,#fff 0%, #f3f3f3 50%, #f0f0f0 100%);
  background:    -moz-linear-gradient(top,#fff 0%, #f3f3f3 50%, #f0f0f0 100%);
  background:         linear-gradient(top,#fff 0%, #f3f3f3 50%, #f0f0f0 100%);
  border: 1px solid #999;
  border-radius: 3px;
  box-shadow: 0 1px 0 0 rgba(255,255,255,1) inset;
  cursor: pointer;
}

これでボタンらしくなりましたね。

このエントリーを公開してくださったブログの著者様には大感謝です！！

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

やっと解決しました！WordPress 3.5でカスタムフィールドに画像を追加する方法！

関連記事

けっこう需要があります！WordPressでカテゴリーやアー・・・続きを読む

[WordPress]条件分岐まとめ（随時更新）

[WordPress]ループ外でカスタムフィールドの値を取得・・・続きを読む

[WordPress]カテゴリ名とそのスラッグを取得・出力す・・・続きを読む

カスタムフィールドへの画像追加をするならWordPress ・・・続きを読む

WordPressのログインID・パスワードが分からない！ダ・・・続きを読む