18
1月
2013

WordPress3.5でCustom Field GUI Utility3の画像アップロードが使えない

WordPress3.5にバージョンアップした途端にCustom Field GUI Utility3画像アップロードが使えなくなりました。
新しいメディアアップローダーではカスタムフィールドに挿入が出来ないんですね。

これ、作者様がすぐに対応してくれるだろうと油断していたら
今はほとんどWordPressに関わっていないらしく対応未定。。。
臭いものに蓋をするが如くそのまま年が明けたわけですが、
ふと調べてみたら対応方法を考えてくれた方がおりました!

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

せっかくなのでやってみます!
修正が必要になるのは下記の2ファイル。
新メディアアップローダーではなく、旧アップローダーを表示させるようにします。

  1. cfg-utility.php
  2. cfg-utility.js

cfg-utility.php

修正するのは2箇所。
「画像アップロード」という文字列を表示してボタンとして利用する方法なんですが、
上記ブログでも述べられているようにカーソルも矢印のままだし、マウスオーバー効果も無いので
なにかしら分かるようにスタイルシートなりで変更した方が良いと思います。
私は自分用のサイトなので適当にカーソルをポインターに変更するだけにしました。

元コード

/* 管理画面の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();
		$('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)) {
        $value = esc_attr($meta_value);
    } elseif (!empty($default)) {
        $value = esc_attr($default);
    } else {
        $value = '';
    }
    $input = make_input ($name, $value, $size, $default, 'text', $placeholder, $validation);
    if ($type == 'textfield') {
        $inside = <<< EOF
        <p class='cfg_input'>$input</p>
EOF;

修正後

/* 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" style="cursor:pointer">画像アップロード - Click me!</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;

上記では、カーソルをポインターに変更して『click me!』としてみました。
自分用とはいえ、しばらく触らないと忘れそうなので。
クライアント向けであれば、旧アップローダーのようなアイコンかボタンにした方が無難です。

cfg-utility.js

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(){
        var self = $(this);

        // アップローダーをクリック(clc)したイメージフィールドのidをcookieに保存
        var clc_id = self.closest('div.imagefield').attr('id');
        setCookie('imf_clc_id',clc_id);
    });

修正後

    // アップロードボタンを調整 [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(){
	    var self = $(this);

        // アップローダーをクリック(clc)したイメージフィールドのidをcookieに保存
        var clc_id = self.closest('div.imagefield').attr('id');
        setCookie('imf_clc_id',clc_id);
    });

上記適用後は以下の通り。

130118-01

ちょっとダサいですが、まぁ機能してるので問題はありません。
気になる方はスタイルシートでゴニョゴニョしましょう。
クリックすると見慣れた画面になって一安心(笑)

130118-02

12
1月
2013

[javascript]セレクトメニューを小綺麗にカスタマイズする方法

いつも味気ないセレクトメニューで飽き飽きな方にオススメ。

スマホとも相性の良さそうなjs、『dropkick.jp』をご紹介します。

img_130112-01

セレクトメニューは普通こんな感じ。

img_130112-02

dropkick.jsはそれを簡単に、そしてスタイリッシュにしてくれます。

実装方法は実に簡単で、上記リンク先よりDLしたファイル内にある

dropkick.css
jquery.dropkick-1.0.0.js

とjquery、あとは下記をhead内に記述します。


<script type="text/javascript" charset="utf-8">
 $(function () {
$('.default').dropkick();
 });
 </script>

後は、selectにclass追加(この場合は『.dafault』)すれば完了です。
このサイトのお問い合わせフォームにも実装してみましたので良かったらご覧ください。こちら

ちなみにcontact form 7でdropkick.js使う場合は、
[select **** class:default~
みたいな感じでclassを付加すればOKです。

10
1月
2013

ウェブ制作でちょっと便利なツール

他ブログでも紹介されてるので知ってる人も多いはず。ウェブ制作で便利なツール『cacoo』のご紹介です。
いきなりPhotoShopやIllustrator、FireWorksでデザイン起こそうとしてイメージ湧かなかったり、
思うように進まない、クライアントにザックリしたイメージだけ掲示したい、、といった時に最適。
新しい機能としてGoogleDriveとの連携が出来るようになるなど、クラウドでの作業が好きな人にも最適(笑)

cacoo  →  https://cacoo.com/

cacoo

登録は無料で、facebookやtwitterのアカウントでも利用できます。

cacoo2
まっさらなワークエリアに適当にパーツ組み合わせていくだけでフレームワークが出来上がります。
これは本当に簡単。
クラウドなのでPCとネット環境さえあれば使えますし、
その場でデザイナーとやり取りして修正、、なんて事もできそうです。

こんな感じなので簡単に作れます。

フレームワーク作ってしまうとその後のデザインも作りやすくなるのでオススメです。
ちなみに、テンプレートやパーツは『cacoo store』で購入でき、無料のパーツもここにたくさんあります。

PDFで保存したり、作成できるシートが大量になる場合は有料プランですが、
ちょっと使う分には無料でも十分な機能だと思います。

cacoo  →  https://cacoo.com/

05
1月
2013

IE8でlightboxで真っ黒になる場合

ちょっと前の話、lightboxを何となく使っていてIE8で真っ黒になる場合。
環境によっては再現出来ない(正常表示になる)ケースもあるのでわかりにくいですが、
その場合の対処など。

  • 対処法1:slimboxなど類似プラグインに差し替えてみる
  • 対処法2:IEのレンダリングモードを切り替える
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

とか、

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

とかって感じ。

プラグイン差し替えるのも場合によっては修正範囲広くて対応しきれない事もあるので
こんなやり方もありますよ~的な感じですが。

02
1月
2013

サイトリリース!

何とか正月中に当サイトをリリースできました。

まだまだとりあえず感が拭えませんが、あとはボチボチ直して参ります。

まずは2013年始動です!

01
1月
2013

Morning Glory サイトオープン

旧『春工房』は業務拡大、今後の事業展開に備え『Morning Glory』へと名称を変更し2013年より再始動します。

Web企画・デザイン・制作、WordPressサイト構築、Webコンサルティング、広告デザイン等を中心にお客様のご予算とニーズに合わせたご提案をして参ります。

サイト構築やリニューアルをご検討中の企業様から、安価で良質、コンパクトなWebサービスやデザイン制作をご希望の広告代理店まで幅広くご対応しております。

まずはお気軽に問い合わせフォームよりお問い合わせください。