ど素人から毛を生やす。<延>

管理画面にメディアアップローダーを追加、絶対パスをルート相対パスに変更、画像のリアルタイム表示

Web > WordPress 2016年2月19日(最終更新:8年前)

2016年2月19日に作成されたページです。
情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。

どもです。
管理画面に独自の設定ページ、そこにメディアアップローダーを設置――という作業は、
結構前に、テンプレート商品を作るのにやってたのですが…。不備はないのですが、なんか使いづらかったので、この機に改善しようと思いました。

希望の完成形はこんな感じ。
・画像を挿入すると絶対パスになるので、ルート相対パスにしたい。(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で行われることを再認識。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった (0)
  • (`・ω・´) 役に立った (0)
  • (・∀・) 参考になった (1)