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

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

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

このページは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)
  • (`・ω・´) 役に立った (0)