بخش ششم – ساخت افزونه با امکان انتخاب فایل در فرم های پیشخوان وردپرس

پیشخوان وردپرس دارای یک پاپ آپ برای انتخاب تصویر و فایل چندرسانه ای دیگر است، در صفحه اضافه کردن نوشته یا برگه می توان آن را باز کرده و فایل های موجود را انتخاب کرد یا فایل های جدیدی روی سرور بارگذاری کرد. در این آموزش روش استفاده از این پاپ آپ برای انتخاب فایل در صفحات تنظمیات خودمان را نشان خواهیم داد.

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

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

برای ایجاد افزونه پوشه plugin2 را در مسیر wp-content/plugins ایجاد کرده و فایل plugin2.php را داخل آن با محتوای زیر اضافه می کنیم.
<?php
/*
Plugin Name: plugin2
Plugin URI : http://blog.webaca.ir
Description : a new plugin for set name and picture
Version 1.0.1*/?>
سپس دستورات زیر را داخل فایل plugin2.php بعد از توضیحات فوق اضافه می کنیم.
add_action('plugins_loaded' , 'my_init_menu2');
function my_init_menu2()
{
add_action( 'admin_menu', 'my_admin_menu2' );
add_action( 'admin_init', 'my_add_scripts2' );
}
که دستور اول تابع my_init_menu2 را به تابع وردپرسی plugins_loaded قلاب می کند تا هنگام بارگذاری افزونه های وردپرس فراخوانی شود. در داخل این تابع نیز دو تابع دیگر به تابع admin_init وردپرس قلاب شده اند.

تابع my_admin_menu2 برای ثبت آیتم جدید به منوی مدیریت وردپرس و تابع my_add_scripts2 برای بارگذاری فایل های جاوااسکریپت لازم برای این افزونه استفاده خواهند شد.

پیاده سازی تابع my_admin_menu2 بصورت زیر است:
function my_admin_menu2() {
add_menu_page( 'page2','page item2','read','my_page2','my_page_func2' ,'',2 );
}
در این یک گزینه برای منوی پیشخوان وردپرس بنام my_page2 اضافه شده و با کلیک روی آن تابع my_page_func2 فراخوانی خواهد شد. این تابع برای طراحی صفحه تنظیمات و ثبت تغییرات استفاده میشود.

پیاده سازی تابع my_add_scripts2 بصورت زیر است:
function my_add_scripts2() {
wp_register_script( 'my-admin-js', untrailingslashit( plugins_url( '/', __FILE__ ) ) . '/my-admin.js', array( 'jquery' ), $version );
wp_enqueue_script( 'my-admin-js' );}
این تابع فایل جاوااسکریپت به نام my-admin.js را که در داخل پوشه افزونه ما قرار دارد را معرفی می کند تا هنگام اجرای وردپرس در بخش هدر سایت معرفی شود.

پیاده سازی تابع my_page_func2 بصورت زیر است :
function my_page_func2() {
// for support media
wp_enqueue_media();
//Save the field values
if ( isset( $_POST['form_submitted'] ) && $_POST['form_submitted'] == 'submitted' ) {
foreach ( $_POST as $key => $value ) {
if ( get_option( $key ) != $value ) {
update_option( $key, $value );
} else {
add_option( $key, $value, '', 'no' );
}}
}?>
<h2>my page</h2><hr />
<?php if ( isset( $_POST['form_submitted'] ) && $_POST['form_submitted'] == 'submitted' ) { ?>
<div><p>تنظیمات با موفقیت ثبت شد</p></div>
<?php } ?>
<p>
<form method="post" action="" id="factor_settings">
<input type="hidden" name="form_submitted" value="submitted">
نام :
<input type="text" name="my_name2" value="<?php echo stripslashes( get_option( 'my_name2' ) ); ?>" /><br>
تصویر :
<input id="my_pic2" type="text" size="36" name="my_pic2" value="<?php echo get_option( 'my_pic2' ); ?>" />
<input id="upload_logo" type="button" value="بارگذاری تصویر" /><br /><input type="submit" name="Submit" value=" ثبت تغییرات " />
</form>
</p><?php
}
در این تابع ابتدا محتوای فرم در صورت ارسال ذخیره شده و سپس طراحی فرم قرار گرفته است، در این فرم اجزای زیر وجود دارد:

• ورودی مخفی form_submitted – برای تشخیص ارسال فرم
• ورودی متنی my_name2 – برای دریافت نام
• ورودی my_pic2 – برای دریافت آدرس تصویر یا فایل
• دکمه با شناسه upload_logo برای باز کردن پاپ آپ انتخاب فایل وردپرس

فایل my-admin.js حاوی دستوراتی با جی کوئری است که هنگام کلیک روی دکمه ای که برای انتخاب تصویر در فرم قرارداده شده کلیک کنیم، پاپ آپ انتخاب فایل وردپرس را باز می کند و فایل انتخاب شده را در جعبه متن my_pic2 قرار می دهد. این فایل در باید در پوشه افزونه plugin2 وجود داشته باشد. محتوای این فایل به صورت زیر است:
jQuery(document).ready(function($) {
var file_frame;
$('#upload_logo').live('click', function( event ){event.preventDefault();// If the media frame already exists, reopen it.
if ( file_frame ) {
file_frame.open();
return;
}// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
title: jQuery( this ).data( 'uploader_title' ),
button: {
text: jQuery( this ).data( 'uploader_button_text' ),
},
// Set to true to allow multiple files to be selected
multiple: false
});// When an image is selected, run a callback.
file_frame.on( 'select', function() {
// We set multiple to false so only get one image from the uploader
var attachment = file_frame.state().get('selection').first().toJSON();// Send the value of attachment.url back to factor settings form
jQuery('#cn_logo').val(attachment.url);
});// Finally, open the modal
file_frame.open();
});
});
برای استفاده از تنظیمات انجام شده در این آموزش و تصویر انتخاب شده در آن در پوسته وردپرس می توانید دستورات زیر را بکار ببرید:
<h1> name : <?php echo get_option('my_name2'); ?> </h1>
<img src="<?php echo get_option('my_pic2'); ?>" />

در این بخش با روش ایجاد افزونه برای دریافت تنظیمات آشنا شدید که یکی از تنظیمات با انتخاب فایل از پنچره فایل های وردپرس انجام می شود، در ادامه می توانید افزونه آماده شده با این آموزش را دریافت کنید و میتوانید آنرا به وردپرس اضافه کرده و از آن استفاده کنید. نتیجه استفاده از این افزونه را در زیر می بینید:

افزونه اضافه کردن تنظیمات شامل فایل به وردپرس