龍弥デザインブログ

岡山のウェブサイト&ホームページ制作 龍弥デザインのブログです。日々の業務やWordPressやHTML・CSSのカスタマイズなどのウェブデザインの情報を更新していこうと思います。よろしければ見てくださいね。

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

Sponserd link

以前「カスタムフィールドへの画像追加をするならWordPress 3.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;
}

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

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

Sponserd link

一覧に戻る

岡山 ホームページ制作龍弥デザイン

〒700-0953
岡山県岡山市南区西市668-20

閉じる