どもです。
管理画面に独自の設定ページ、そこにメディアアップローダーを設置――という作業は、
結構前に、テンプレート商品を作るのにやってたのですが…。不備はないのですが、なんか使いづらかったので、この機に改善しようと思いました。
希望の完成形はこんな感じ。
・画像を挿入すると絶対パスになるので、ルート相対パスにしたい。（CPIサーバーでの運用のため）
・入力した画像が逐次表示されるようにしたい。
さて、やってみます。
基本：アップローダーの設置
【technopolis】管理画面にメディアアップローダを組み込む
こちらのサイト様を参考にしましょう。
function load_admin_things() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_enqueue_style('thickbox');
}
add_action( 'admin_enqueue_scripts', 'load_admin_things' );
アップローダーを使うには、以上をfunctionsで設定する必要があります。
<div>
<h4>サイトロゴ</h4>
<input type="text" id="image" name="image" class="image_url" value="<?php echo get_option('image'); ?>" />
<a class="media-upload" href="JavaScript:void(0);" rel="image">画像を変更する</a>
</div>
HTML部の表示はこんな感じです。
get_option('image')で表示。
管理画面に独自のページを作成し、入力したデータを保存する手法については、今回の主題でないので省略です。
ここにアップローダーを起動・データ保存場所を選択するjQueryを入れればクリアなのですが、ここが今回のメインになります。
ルート相対パスにして、画像を逐次表示
<script type="text/javascript">
jQuery('document').ready(function(){
//aタグクリックでメディアアップローダーの起動と保存位置の設定
jQuery('.media-upload').each(function(){
var rel = jQuery(this).attr("rel");
jQuery(this).click(function(){
window.send_to_editor = function(html) {
html = '<a>' + html + '</a>';
imgurl = jQuery('img', html).attr('src');
jQuery('#'+rel).val(imgurl);
imageUrlChange(imgurl,rel)
tb_remove();
}
formfield = jQuery('#'+rel).attr('name');
tb_show(null, 'media-upload.php?post_id=0&type=image&TB_iframe=true');
return false;
});
});
//テキストボックスの方を直接編集したときの処理
jQuery('.image_url').change(function(){
var value = jQuery(this).val();
imageUrlChange(value,jQuery(this).attr('name'));
});
//絶対パスをルート相対パスに
function imageUrlChange(value,rel){
var httpDomain = location.href.match(/^https?://[^/]+/);
value = value.replace(httpDomain,"");
jQuery('input[name="'+rel+'"]').val(value);
imageUrlDisplay(value,rel);
};
//変更されたURLに従い、画像を表示する
function imageUrlDisplay(value,rel){
if(value){
if(jQuery('.'+rel+'_display').length){
var src = jQuery('.'+rel+'_display img').attr('src');
if(src != value){
jQuery('.'+rel+'_display img').attr('src',value)
jQuery('.'+rel+'_display p span').text(value)
}
}else{
var display = '<div class="'+rel+'_display media-upload-dislpay"><img src="'+value+'"><p>選択中のURL：<span>'+value+'</span></p></div>'
jQuery('input[name="'+rel+'"]').parent().append(display);
}
}else{
jQuery('.'+rel+'_display').remove();
}
};
//ページ読み込み時の処理
jQuery('.image_url').map(function(){
imageUrlDisplay(jQuery(this).val(),jQuery(this).attr('name'));
});
});
</script>
a.media-uploadをクリックでテキストボックスにデータ入力後、
またはinput.image_urlを直接編集したとき、imageUrlChangeを起動。
imageUrlChangeの終了時、またはページ読み込み時にinput.image_urlごとにimageUrlDisplayを起動。
今回の改善では、変更したのはjQueryだけとなりました。
WordPressなので何か変えるならPHPと思いがちですが、リアルタイムの処理は基本的にjsで行われることを再認識。