آموزش استفاده از media uploader وردپرس در تنظیمات پلاگین

به هنگام ایجاد یک افزونه یا پوسته برای وردپرس یکی از بزرگترین سوالاتی که برایتان پیش می آید ممکن است این باشد که چگونه باید فایل مورد نیاز مثلا لوگو یا هر تصویر یا فایل دیگری را برای افزونه یا پوسته ی شما آپلود نماید ؟

در پاسخ به این سوال ممکن است افراد راه های مختلفی در پیش بگیرند مانند نوشتن یک اسکریپت آپلودر و یا نوشتن توضیح برای کاربر که به کتابخانه وردپرس برود و فایلل خود را آپلود نماید.

اما وردپرس خود یک مدیا آپلودر حرفه ای دارد که به سادگی می توانید از آن در صفحه تنظیمات افزونه یا پوسته ی خود استفاده نمایید.

در این مطلب آموزش استفاده از media uploader وردپرس در تنظیمات پلاگین تان را برای شما توضیح خواهیم داد.

نکته : در این آموزش فرض شده شما به نحوه ایجاد صفحه تنظیمات و منو در وردپرس آشنایید و قبلا آنهارا ایجاد کرده اید.

ابتدا تابع زیر را در فایل functions.php و یا در فایل اصلی پلاگینتان قرار دهید:

 

function pg_enqueue_mediauploader(){
	wp_enqueue_script('jquery');
	
	if ( $_GET['page'] == 'my_page_id' ){
		wp_enqueue_media();
		wp_enqueue_script( 'afc_mediauploader_js', plugin_dir_url(__FILE__) . 'js/mediauploader.js' );
		wp_enqueue_style( 'حل_mediauploader_style', plugin_dir_url(__FILE__) . 'css/admin-style.css' );
	}
}

add_action( 'admin_enqueue_scripts', 'pg_enqueue_mediauploader' );

در این کد ابتدا تابع را تعریف کرده ایم .

پس از آن با قرار دادن یک شرط اعلام کرده ایم که محتوای متغییر get را با ای دی صفحه ادمین ما بررسی کن و تنها در صورت برابری آنها فایل های استایل و جاوااسکریپت ما را بارگزاری کن.
در تابع بالا فرض شده فایل جاوای ما در پوشه ی js و فایل استایل در پوشه ی css که در پوشه ی پلاگین قرار دارند ، می باشند. اگر شما قبلا فایل استایلی فراخوانی کرده اید ، می توانید فراخوانی استایل را حذف نمایید.
نکته: منظور از ای دی صفحه همان ای دی ای است که شما به هنگام ایجاد صفحه ی منو ، به آن صفحه داده اید.
پس از تابع هم توسط هوک به admin_enqueue_scripts وردپرس را مطلع کرده ایم که در چه زمانی این تابع را فراخوانی نماید.

حالا فرض کنید شما در کدهای html صفحه تان یک فیلد و یک دکمه دارید و می خواهید پس از آپلود فایل توسط کاربر لینک فایل مورد نظر در فیلد شما قرار گیرد، پس کد زیر را به قسمت html صفحه تان بیافزایید:

	<input id="myfield_unique_id" name="myfield" type="text" />
	<input id="myfield_unique_id_button" class="button" name="myfield_unique_id_button" type="text" value="Upload" />

در کد بالا دو اینپوت مشاهده می نمایید که اولی خالی می ماند تا زمانی که کاربر فایلی انتخاب نماید ، سپس لینک فایل در آن قرار خواهد گرفت.
با توجه به این که اینپوت دوم دارای کلاس button می باشد وردپرس آن را به طور خودکار استایل دهی کرده و به دکمه تبدیل می نماید.

حالا نوبت به کد جاوااسکریپت می رسد فایل mediauploader.js را باز کرده و کدهای زیر را در آن قرار دهید:

jQuery(document).ready(function($){ // motmaen besho ke safe kamelan load shodeh ast
	$('#myfield_unique_id_button').click(function(e){ //yek tabe be rokhdade click bar rooye dokmeye khod bind mikonim
			e.preventDefault(); //mane az amalkard haye pishfarz mishavim
			var image = wp.media({ yek mojoodiat az noe media uploadere wordpress ijad mikonim
			title: 'Upload Image',
			multiple: false // be media uploader migooyim emkane entekhab chand file vojood nadarad
		}).open()
		.on('select', function(e){
			var uploaded_image = image.state().get('selection').first(); //entekhabe file va zakhireye an.
			console.log(uploaded_image);
			var image_url = uploaded_image.toJSON().url; // link be file upload shode
			$('#myfield_unique_id').val(image_url); //darje link dar input dovom
		});
	});
});

کار تمام شده است !. اگر به صفحه ی تنظیماتتان مراجعه نمایید باید یک فیلد و یک دکمه مشاهده نمایید و با کلید بر روی دکمه باید مدیا آپلودر برایتان باز شود.

امیدوارم موفق باشید.

اگر مفید بود به اشتراک بگذارید ! کلوب فیس نما گوگل پلاس

۴ نظر

  1. با عرض سلام
    من خیلی دنبال این آموزش بودم ولی هیچ جا پیدا نکردم و ممنونم از آموزش خوبتون
    من یک پنل تنظیمات درست کردم و برای بخش بنرهای تصویری ، اسلایدر و … نیاز دارم تا دکمه آپلود رو قرار بدم، که این آموزشتون خیلی به من کمک میکنه ، فقط چند تا سوال دارم که اگر میشه راهنمایی کنید:
    اول اینکه فایل media uploder رو از کجا دانلود کنم ؟
    دوم اینکه من یک فایل دارم که پیوست ها و اسکریپت ها رو در اون قرار میدم و اسمش رو گذاشتم admin-helper.php ، آیا باید دستور فانکشنی که شما نوشیتید رو در این فایل قرار بدم و اینکه این خط رو if ( $_GET[‘page’] == ‘my_page_id’ ){ همینطور باید وارد کنم و نیاز به تغییرات نیست؟

    • سلام. خوشحالم که این مطلب بهتون کمک کرد.
      ببینید مدیا آپلودر یک کتابخانه ی جاوااسکریپت هست که خود وردپرس از اون استفاده می کنه به همین خاطر همیشه توی صفحه لود شده و آماده هست. اون تابعی که می بینید من نوشتم برای این هست که ما فایل های خودمون رو لود کنیم. یعنی فرض کردم یک فایل استایل و یک فایل اسکریپت داریم و این کدهایی که توی اموزش می بینید رو باید بزاریم توی اونها. که در مورد مشکل شما اگر قبلا اون فایل اسکریپت هاتون رو لود کردین که این کد جاوا اسکریپت رو هم به اون اضافه کنید و اگر لود نکردین به همین روشی که گفتم لود کنید.
      منظور از فایل فانکشن فایل فانکشن پوسته هست فایلی که در روت پوسته قرار می گیره و وردپرس اول اون رو لود میکنه. از اونجایی که این فایل همه جا لود میشه پس توی ادمین هم لود میشه. ولی حالا اگر شما فایل admin-helper تون رو توی اون فایل اینکلود کردین برای جدا بودن و تمیز بودن کدها میتونید تابع رو بزارید اونجا.
      موفق باشید.

  2. سلام . خیلی ممنون از پاسختون
    متوجه شدم فقط فایل mediauploader.js رو که فرمودید یک تکه کد جاوا اسکریپت در اون قرار بدیم رو از کجا بیارم ؟

جوابی بنویسید

ایمیل شما نشر نخواهد شدخانه های ضروری نشانه گذاری شده است. *

*