آموزش ساخت افزونه وردپرس قسمت ۱

0 732

در این آموزش، ما فرآیند ساخت افزونه در وردپرس را بررسی خواهیم کرد. همانطور که در مقاله راهنمای انتخاب بهترین افزونه های وردپرس اشاره کردم، افزونه در وردپرس باعث گسترش قابلیت های هسته وردپرس می‌شود. یکی از قابلیت های جالب وردپرس افزونه های آن است که شما می توانید کد یا function ها را در وب به اشتراک بگذارید. مطمئنم بسیاری از شما، تاکنون افزونه ای را در مخزن وردپرس یا سایر مارکت های موجود جستجو کرده اید. وجود افزونه های زیاد وردپرس یکی از دلایلی است که وردپرس بطور گسترده مورد استفاده قرار گرفته است. تا به امروز بیش از ۳۹۰۰۰ افزونه رایگان در دسترس عموم در مخزن وردپرس (WordPress repository) قرار گرفته است که توضیحاتی در اینباره در مقاله وردپرس چیست و چرا باید از آن استفاده کنیم دادم.

چرا باید افزونه بسازیم؟

افزونه ای که ما قصد داریم در این آموزش بسازیم، برخی از معمول ترین کارهایی که توسعه دهندگان در حین ایجاد یک پروژه ی وردپرس جدید انجام می دهند را اتوماتیک می کند. در پایان این آموزش شما می­دانید که چگونه:

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

ممکن است در این فکر باشید که اگر فقط کدها را از آخرین پروژه تان کپی و پیست کنید، خیلی ساده تر و سریعتر است و با این کار حتی خودتان را با نوشتن افزونه های سفارشی به زحمت نیندازید. ولی کاملا در اشتباه هستید. این مثال مزایای ساخت افزونه وردپرس را با حذف موارد تکراری نشان می دهد. تنها کاری که باید انجام بدهید، این است که افزونه تان را اضافه کنید، گزینه ها را تغییر دهید و به کارتان ادامه دهید. نگران فراموش کردن یک تابع یا چیزی نباشید،زیرا خودش شامل تمامی افزونه های جداگانه می باشد. بهترین قسمت در مورد ساخت یک افزونه وردپرس، پیوستن به جامعه اپن سورس (منبع آزاد) می باشد. شما می توانید کارهایتان را به اشتراک بگذارید و از آنها بازخورد بگیرید، آنها را به عنوان یک افزونه برتر بفروشید و آن را در مارکت های وردپرس اضافه کنید.

شروع آموزش ساخت افزونه وردپرس!

آموزش ساخت افزونه وردپرس
تصویر افزونه ای که قرار است بسازیم

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

برخی از کارهایی که می توانیم انجام دهیم در اینجا آمده اند:

  • اضافه کردناندازه های جدید برای تصاویر بصورت پویا
  • ساختنصفحه ورود سفارشی
  • پاک کردن قسمت Head بصورت اختیاری
  • حذف اختیاریCSS تعریف شده برای ابزارک نظرات
  • حذف اختیاریCSS تعریف شدهبرای گالری
  • اضافه کردنPost slug به body class بصورت اختیاری
  • بارگیری اختیاریjQuery از CDN
  • وبسیاری از گزینه های مفید دیگر

بهترین راه برای شروع ساخت یک افزونه جدید وردپرسی، کار کردن بر روی boilerplate مفید افزونه وردپرس است. ممکن است از خودتان بپرسید چرا بجای اینکه از ابتدا بسازید باید از boilerplate استفاده کنید. شما با استفاده از boilerplate سریع بر اساس استانداردها و بصورت سازمان یافته و هدف گرا و کلا هر چیزی که لازم دارید تا از ابتدا شروع کنید، شروع می­کنید. برای شروع، فقط به سازنده boilerplate افزونه ی وردپرس (WordPress Plugin Boilerplate Generator ) بروید و فرم را پر کنید و کلید ساختن را بزنید.

فرم ساخت boilerplate افزونه وردپرس
فرم ساخت boilerplate افزونه وردپرس

شما همین الان boilerplate افزونه ایجاد شده را به عنوان فایل زیپ دانلود کردید. آنرا باز (unzip) کنید و به نصب توسعه وردپرس تان در پوشه plugins اضافه کنید.

ممکن است بخواهید محیطی اختصاصی برای آزمون افزونه های خود داشته باشید. ما توصیه می­کنیم از MAMP یا XAMP یا از LAMP vagrant box استفاده کنید که در مقاله آموزش نصب وردپرس برروی لوکال هاست با استفاده از XAMP آموزش استفاده از آن را به شما آموزش دادم. همچنین باید مطمئن شوید که ویژگی های از بین بردن خطا های وردپرس را با اضافه کردن define(‘WP_DEBUG’, true) به فایل wp-config.php فعال کرده اید. این کار به ما کمک می کند که هرگونه خطایی را در حین برنامه نویسی افزونه مان بررسی کنیم.


define('WP_DEBUG', true);

 

ساختار پوشه افزونه وردپرس

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

ساختار پوشه افزونه وردپرس

فولدر Admin

فولدر admin پوشه ای است که تمامی کد ها شامل CSS, JS و پوشه های تقسیم شده و فایل های دیگر PHP شامل کلاس های admin فایل class-wp-cbf-admin.php در آن وجود دارند.

نکته: wp-cbf همان Plugin Slug است.

فولدر Includes

آنچه در اینجا خواهید یافت:

  • افزونه اصلی پی اچ پی کلاس class-wp-cbf.php که در آن تمام اقدامات و فیلترها را اضافه خواهیم کرد.
  • فایل فعال کننده class-wp-cbf-activator.php.
  • فایل غیر فعال کننده class-wp-cbf-desactivator.php، فایل بین المللی کردن class-wp-cbf-i18n.php
  • فایل loader ، class-wp-cbf-loader.php که در واقع تمام action ما در فایل کلاس اصلی نیاز دارد.
  • پوشه languages که آماده استفاده از فایل .pot است تا افزونه شما را چندزبانه کند.
  • پوشه public همانند پوشه admin مان می باشد به جز مواجهه با عملکردهای عمومی

در اینجا ۴ تا فایل داریم:

  • LICENCE.txt: مجوز GPL-2
  • README.txt: این قسمت شامل نام، نسخه سازگاری و توضیحات می باشد، همانطور که در صفحه افزونه در مخزن وردپرس دیده می شود. این اولین فایلی است که ویرایش خواهیم کرد.
  • uninstall.php: زمانی که کاربر بر روی لینک حذف در افزونه وردپرس کلیک کند این نوشته نمایان می شود.
  • wp-cbf.php: این فایلbootstrap اصلی افزونه است. شما احتمالا این فایل را با شماره نسخه و توضیح مختصری از افزونه تان ویرایش خواهید کرد.

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

تنظیمات صفحه را اضافه کنید و آن را راه اندازی کنید

تنظیمات صفحه را اضافه کنید و آن را راه اندازی کنید

اگر به صفحه افزونه در back-end وردپرس بروید، شما افزونه ی ما را با عنوان، توضیحات و لینک های فعال کردن، ویرایش کردن و حذف کردن اش خواهید دید. اگر بر روی فعال کردن کلیک کنید، با توجه به عملکرد خوب کلاس های فعال و غیر فعال گر در فولدر includes کار خواهد کرد. این خیلی خوبه، اما زمانی که فعال شد، واقعا هیچ اتفاقی نیوفتاده است. ما باید صفحه تنظیماتی که می خواهیم گزینه های افزونه مان را به آنجا اضافه کنیم داشته باشیم و اضافه کنیم. همچنین ممکن است در اینجا به این نکته توجه کرده باشید که در حال حاضر هنوز توضیحات ما بسیار کلی است، بیایید اول آنرا اصلاح کنیم. این توضیحات مختصر در کامنت های گروه افزونه اصلی نوشته شده است: wp-cbf/wp-cbf.php

توضیحات مختصر افزونه

از آنجایی که ما در ابتدای ساخت افزونه مان هستیم، بیایید فایل README.txt را به روز رسانی کنیم. از آنجایی که که وقتی افراد صفحه وب افزونه شما را باز می کنند این اولین توضیحاتی است که می بینند، میخواهیم توضیحات مان کاملا با جزئیات باشد. همچنین به قسمت نصب و سوالات متداول FAQ هم توجه کنید. هرچه شما اینجا را بیشتر پوشش دهید بعدا در حین پشتیبانی دادن، کمتر نیاز به توضیح دادن خواهید داشت.

اگر شما صفحه Admin افزونه را دوباره بارگیری کنید، توضیحات جدید خود را می بینید. در مرحله بعد صفحه تنظیمات را اضافه کنید در این صورت ما می توانیم گزینه های افزونه مان را ویرایش کنیم.

توضیحات مختصر افزونه ساخته شده وردپرس

در پوشه admin فایل class-wp-cbf-admin.php را بازکنید، اینجا سه تابع دارید:

  • __construct با صدا زدن این کلاس به عنوان نمونه ذکر می شود.
  • و جایی که ما بخواهیم CSS و JS مربوط به Admin را اضافه کنیم،enqueueing دو تابع enqueue_styles و enqueue_scripts استفاده می شوند.

بعد از این توابع، ۳ تابع زیر را اضافه کنید. لازم نیست که کامنت زیادی اضافه کنید زیرا آنها فقط برای کمک به شما هستند. بیایید آن سه تابع را مرور کنیم و توضیح دهیم:



/**
*
* admin/class-wp-cbf-admin.php - Don't add this
*
**/

/**
* Register the administration menu for this plugin into the WordPress Dashboard menu.
*
* @since 1.0.0
*/

public function add_plugin_admin_menu() {

/*
* Add a settings page for this plugin to the Settings menu.
*
* NOTE: Alternative menu locations are available via WordPress administration menu functions.
*
* Administration Menus: http://codex.wordpress.org/Administration_Menus
*
*/
add_options_page( 'WP Cleanup and Base Options Functions Setup', 'WP Cleanup', 'manage_options', $this->plugin_name, array($this, 'display_plugin_setup_page')
);
}

/**
* Add settings action link to the plugins page.
*
* @since 1.0.0
*/

public function add_action_links( $links ) {
/*
* Documentation : https://codex.wordpress.org/Plugin_API/Filter_Reference/plugin_action_links_(plugin_file_name)
*/
$settings_link = array(
'<a href="' . admin_url( 'options-general.php?page=' . $this->plugin_name ) . '">' . __('Settings', $this->plugin_name) . '</a>',
);
return array_merge( $settings_link, $links );

}

/**
* Render the settings page for this plugin.
*
* @since 1.0.0
*/

public function display_plugin_setup_page() {
include_once( 'partials/wp-cbf-admin-display.php' );
}

حالا بیاید این ۳ functions رو در ساخت افزونه وردپرس بررسی کنیم:

add_plugin_admin_menu()

add_plugin_admin_menu() ، همانطور که از اسمش پیداست، این تابع ایتم منو را به ایتم های زیر منوی Settings اضافه خواهد کرد. این مورد add_options_page() نامیده می شود. این تابع ۵ پارامتر دارد:

  • عنوان صفحه (The page title): در اینجا پاکسازی WP و راه اندازی توابع گزینه های اصلی را داریم.
  • عنوان منو(The menu title): در اینجا پاکسازی WP را همانطور که ممکن است بخواهید آنرا در یک خط کوتاه نگه دارید، داریم.
  • قابلیت ها(Capabilities): که قادر خواهید بود به آیتم های منو دسترسی داشته باشید (مدیر، ویراستار، و غیره…).
  • منوی slug (The menu slug): اینجا بیشتر از هر چیزی که ما در این افزونه به آن رجوع خواهیم کرد از اسم مختصر افزونه استفاده خواهیم کرد (ما با $this->plugin_name به ان دسترسی پیدا خواهیم کرد).
  • تابع پاسخ (The callback function): اگر شما با دقت به اینجا نگاه کنید، سومین تابع display_plugin_setup_page(). را داریم. این جایی است که گزینه های ما آنجا نمایش داده خواهد شد.

add_action_links()

این تابع زمانی که افزونه ما فعال است، لینک “تنظیمات” را به لیست ویرایش/غیرفعال اضافه می کند. یک ورودی جدید می خواهد تا آرایه $links که می خواهیم را با آرایه لینک جدیدمان ادغام کند.

display_plugin_setup_page()

این تابع اولین تابع در داخل تابع add_plugin_admin_menu() ما نامیده می شود. فقط شامل فایلی جزئی است که ما گزینه هایمان را اضافه خواهیم کرد. بیشتر HTML و کمی PHPخواهد بود.

این ها فوق العاده است، اما اگر شما فقط آن فایل را سیو کنید و به صفحه افزونه تان برگردید، هیچ چیز جدیدی ظاهر نخواهد شد. ما باید اول این توابع را در define_admin_hook. ثبت کنیم.

به فولدر includes بروید و includes/class-wp-cbf.php را باز کنید. ما باید تابع خصوصی define_admin_hooks() را اضافه کنیم تا بتوانیم شروع کنیم:


/**
*
* include/class-wp-cbf.php - Don't add this
*
**/

// Add menu item
$this->loader->add_action( 'admin_menu', $plugin_admin, 'add_plugin_admin_menu' );

// Add Settings link to the plugin
$plugin_basename = plugin_basename( plugin_dir_path( __DIR__ ) . $this->plugin_name . '.php' );
$this->loader->add_filter( 'plugin_action_links_' . $plugin_basename, $plugin_admin, 'add_action_links' );

هر کدام از این خطوط، فایل loader ، actions ، یا filter hooks نامیده می شوند. از فایل includes/wp-cbf-loader.php ، ما می توانیم ورودی هایمان برای مثال برای اولین action پیدا کنیم.

  • $hook (‘admin_menu’)، اینaction/filter hook است که ما تغییرات مان را به آن اضافه خواهیم کرد.
  • $component ($plugin_admin) ، این مورد اشاره ای به object ای از چیزی دارد که بصورت action تعریف شده است، بطور ساده تر اگر ما یک hook درadmin_hooks داشتیم، $plugin_admin در public hooks $plugin_public خواهد بود.
  • $callback (add_plugin_admin_menu)، نام تابع ماست
  • $priority (not set here – default is 10) الویتی که تابع با فرض ده بودن ارسال می شود.
  • $accepted_args (not set here – default is 1) تعداد پارامترهای هایی که به تابع callback ما می­رود.

شما همچنین می توانید ببینید که ما یک متغیر $plugin_basename تنظیم کرده ایم. به ما یک فایل اصلی از افزونه خواهد داد و لازم است که action_links اضافه شود.

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

افزودن منو در افزونه وردپرس

اضافه کردن فیلد ورودی های سفارشی

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

قبل از اینکه بروید و فیلد تمامی گزینه هایتان را اضافه کنید، ممکن است بخواهید تمامی گزینه های افزونه تان را با نوع فیلدی که می خواهید اضافه کنید بر روی کاغذ بنویسید. برای این افزونه خاص، بیشتر این ها چک باکس هایی با قابلیت فعال کردن/غیر فعال کردن، چندتا ورودی متن، انتخاب هایی که در زیر به آنها می پردازیم و برخی فیلدهای خاص دیگر مانند انتخابگر رنگ یا کالر پیکر و بارگذاری عکس که در بخش دوم مقاله آموزش ساخت افزونه وردپرس به آنها خواهیم پرداخت خواهند بود.

ما همچنین استفاده از افزونه سودمند دیگری برای گرفتن تمامی admin-specific markup که بکار خواهیم برد را توصیه می ­کنیم. در مرکز وردپرس در دسترس نیست، بنابراین باید انرا از GitHub WordPress Admin Style بگیرید.

استایل صفحه مدیریت وردپرس

اکنون با لیست فیلدهای مان و برخی markup های مربوط به مدیر، می توانیم ادامه بدهیم و ورودی های اولیه مان را اضافه کنیم. برای شروع چهار تا چک باکس به افزونه های مان اضافه خواهیم کرد.

admin/partials/wp-cbf-admin-display.php را باز کنید. این فایلی است که صفحه تنظیمات مان را (همانطور که در add_options_page() هایمان شروع شد) نشان خواهد داد. حال این ها را اضافه کنید:

<?php
/**
*
* admin/partials/wp-cbf-admin-display.php - Don't add this comment
*
**/
?>

<!-- This file should primarily consist of HTML with a little bit of PHP. -->
<div class="wrap">

<h2><?php echo esc_html(get_admin_page_title()); ?></h2>

<form method="post" name="cleanup_options" action="options.php">

<!-- remove some meta and generators from the <head> -->
<fieldset>
<legend class="screen-reader-text"><span>Clean WordPress head section</span></legend>
<label for="<?php echo $this->plugin_name; ?>-cleanup">
<input type="checkbox" id="<?php echo $this->plugin_name; ?>-cleanup" name="<?php echo $this->plugin_name; ?> [cleanup]" value="1"/>
<span><?php esc_attr_e('Clean up the head section', $this->plugin_name); ?></span>
</label>
</fieldset>

<!-- remove injected CSS from comments widgets -->
<fieldset>
<legend class="screen-reader-text"><span>Remove Injected CSS for comment widget</span></legend>
<label for="<?php echo $this->plugin_name; ?>-comments_css_cleanup">
<input type="checkbox" id="<?php echo $this->plugin_name; ?>-comments_css_cleanup" name="<?php echo $this->plugin_name; ?>[comments_css_cleanup]" value="1"/>
<span><?php esc_attr_e('Remove Injected CSS for comment widget', $this->plugin_name); ?></span>
</label>
</fieldset>

<!-- remove injected CSS from gallery -->
<fieldset>
<legend class="screen-reader-text"><span>Remove Injected CSS for galleries</span></legend>
<label for="<?php echo $this->plugin_name; ?>-gallery_css_cleanup">
<input type="checkbox" id="<?php echo $this->plugin_name; ?>-gallery_css_cleanup" name="<?php echo $this->plugin_name; ?>[gallery_css_cleanup]" value="1" />
<span><?php esc_attr_e('Remove Injected CSS for galleries', $this->plugin_name); ?></span>
</label>
</fieldset>

<!-- add post,page or product slug class to body class -->
<fieldset>
<legend class="screen-reader-text"><span><?php _e('Add Post, page or product slug to body class', $this->plugin_name); ?></span></legend>
<label for="<?php echo $this->plugin_name; ?>-body_class_slug">
<input type="checkbox" id="<?php echo $this->plugin_name;?>-body_class_slug" name="<?php echo $this->plugin_name; ?>[body_class_slug]" value="1" />
<span><?php esc_attr_e('Add Post slug to body class', $this->plugin_name); ?></span>
</label>
</fieldset>

<!-- load jQuery from CDN -->
<fieldset>
<legend class="screen-reader-text"><span><?php _e('Load jQuery from CDN instead of the basic wordpress script', $this->plugin_name); ?></span></legend>
<label for="<?php echo $this->plugin_name; ?>-jquery_cdn">
<input type="checkbox" id="<?php echo $this->plugin_name; ?>-jquery_cdn" name="<?php echo $this->plugin_name; ?>[jquery_cdn]" value="1" />
<span><?php esc_attr_e('Load jQuery from CDN', $this->plugin_name); ?></span>
</label>
<fieldset>
<p>You can choose your own cdn provider and jQuery version(default will be Google Cdn and version 1.11.1)-Recommended CDN are <a href="https://cdnjs.com/libraries/jquery">CDNjs</a>, <a href="https://code.jquery.com/jquery/">jQuery official CDN</a>, <a href="https://developers.google.com/speed/libraries/#jquery">Google CDN</a> and <a href="http://www.asp.net/ajax/cdn#jQuery_Releases_on_the_CDN_0">Microsoft CDN</a></p>
<legend class="screen-reader-text"><span><?php _e('Choose your prefered cdn provider', $this->plugin_name); ?></span></legend>
<input type="url" class="regular-text" id="<?php echo $this->plugin_name; ?>-cdn_provider" name="<?php echo $this->plugin_name; ?>[cdn_provider]" value=""/>
</fieldset>
</fieldset>

<?php submit_button('Save all changes', 'primary','submit', TRUE); ?>

</form>

</div>

در اینجا هیچ چیزی نباید تعجب آور باشد، فقط فرم ساده و چند تا چک باکس است.

اولین فیلد اضافه شده به افزونه وردپرس

اگر سعی کنید یکی از این چک باکس ها را بررسی کنید و ذخیره را بزنید، مستقیم به صفحه options.php می روید. این بخاطر اینست که اگر شما به فرم ما نگاه کنید، ویژگی action با options.php لینک است. بنابراین بیایید ادامه بدهیم و آن گزینه ها را ذخیره کنید. در این مرحله، ممکن است در این فکر باشید که قبل از ذخیره کردن هر کدام از این گزینه ها، ما احتمالا اول باید آنها را اعتبار دهی و پاکسازی کنیم. خب این دقیقا همان کاری است که قصد داریم انجام بدهیم.

خب بیایید آن گزینه ها را اعتبار دهی و پاکسازی کنیم.

بیایید admin/class-wp-cbf.php را در ویرایشگر مان باز کنیم و یک تابع تایید اعتبار جدید اضافه کنیم. بنابراین بعد از تابع display_plugin_setup_page() مان دو خط بپرید و موارد زیر را اضافه کنید:


/**
*
* admin/class-wp-cbf-admin.php
*
**/
public function validate($input) {
// All checkboxes inputs
$valid = array();

//Cleanup
$valid['cleanup'] = (isset($input['cleanup']) && !empty($input['cleanup'])) ? 1 : 0;
$valid['comments_css_cleanup'] = (isset($input['comments_css_cleanup']) && !empty($input['comments_css_cleanup'])) ? 1: 0;
$valid['gallery_css_cleanup'] = (isset($input['gallery_css_cleanup']) && !empty($input['gallery_css_cleanup'])) ? 1 : 0;
$valid['body_class_slug'] = (isset($input['body_class_slug']) && !empty($input['body_class_slug'])) ? 1 : 0;
$valid['jquery_cdn'] = (isset($input['jquery_cdn']) && !empty($input['jquery_cdn'])) ? 1 : 0;
$valid['cdn_provider'] = esc_url($input['cdn_provider']);

return $valid;
}

همانطورکه می بینید، ما تابع validate را ساختیم و از یک پارامتر $input گذشتیم. سپس می توانیم چند منطق به چک باکس ها اضافه کنیم تا ببینیم آیا ورودی معتبر است.

ما اینکار را با isset و empty انجام می دهیم که برای ما بررسی می کنند که آیا چک تیک خرده است یا نه. آرایه valid[] دریافت شده را تعیین می کند. ما همچنین فیلد ورودی url با esc_url را برای فیلد متن ساده بررسی کردیم. ما به جای آن از sanitize_text_field استفاده کردیم اما روند کار همان است.

اکنون می خواهیم گزینه های تابع ذخیره کردن/به روز رسانی (saving/update) را به گزینه هایمان اضافه کنیم. در همان فایل دقیقا قبل از کد قبلی اضافه می کنیم:


/**
*
* admin/class-wp-cbf-admin.php
*
**/
public function options_update() {
register_setting($this->plugin_name, $this->plugin_name, array($this, 'validate'));
}

در اینجا از تابع register_setting() استفاده می کنیم که قسمتی از WordPress API است. این سه مرحله را پشت سر می گذاریم.

  • گروه گزینه هایمان: در اینجا ما از$plugin_name بعنوان چیزی که مطمئن و بی همتاست استفاده خواهیم کرد.
  • اسم گزینه: شما می توانید هر گزینه را تکی ثبت کنید، ما همه گزینه هایمان را یکجا را ذخیره می کنیم، در این صورت ما دوباره از $plugin_name استفاده می کنیم.
  • تابع بازخوانی: این تابع برای پاکسازی گزینه های مان با تابع اعتباری که همین حالا ساختیم استفاده می شود.

اکنون که تنظیمات مان را ثبت کردیم، باید خط کوچکی از php به فرم مان اضافه کنیم تا بتواند درست کار کند. این خط nonce, option_page, action و فیلد http_referer را به عنوان ورودی های پنهان وارد می کند. خب حالا فرم را باز کنید و آنرا به روز رسانی کنید تا شبیه کد زیر بشود:

<?php
/**
*
* admin/partials/wp-cbf-admin-display.php - Don't add this comment
*
**/
?>

<div class="wrap">

<h2><?php echo esc_html( get_admin_page_title() ); ?></h2>

<form method="post" name="cleanup_options" action="options.php">

<?php settings_fields($this->plugin_name); ?>

<!-- This file should primarily consist of HTML with a little bit of PHP. -->

...

بسیار عالی، حالا تقریبا اینجا هستیم! فقط یک مرحله دیگر باقی مانده است. باید options_update() را در هوک admin_init ثبت کنیم. includes/class-wp-cbf.php را باز کنید و action جدید ما را ثبت کنید:


/**
*
* include/class-wp-cbf.php
*
**/

// Save/Update our plugin options
$this->loader->add_action('admin_init', $plugin_admin, 'options_update');

بیایید حالا صفحه گزینه هایمان را امتحان کنیم. بعد از ذخیره کردن، صفحه باید از نو بازیابی شود و شما باید “Settings saved” را ببینید.

ذخیره تنظیمات در افزونه وردپرس

پیروزی از آن ماست!

اما صبر کنید… اگر شما چک باکس را بررسی کرده باشید، دیگر عبارت بررسی شد را نشان نمی دهد. این بخاطر اینست که ما الان باید ارزش گزینه هایمان را بدست آوریم و شرط کوچکی به ورودی هایمان اضافه کنیم تا آنرا منعکس کند. بار دیگر فایل admin/partials/wp-cbf-admin.php را باز کنید و مانند زیر به روز رسانی کنید.


<h2 class="nav-tab-wrapper">Clean up</h2>

<form method="post" name="cleanup_options" action="options.php">

<?php
//Grab all options
$options = get_option($this->plugin_name);

// Cleanup
$cleanup = $options['cleanup'];
$comments_css_cleanup = $options['comments_css_cleanup'];
$gallery_css_cleanup = $options['gallery_css_cleanup'];
$body_class_slug = $options['body_class_slug'];
$jquery_cdn = $options['jquery_cdn'];
$cdn_provider = $options['cdn_provider'];
?>

<?php
settings_fields($this->plugin_name);
do_settings_sections($this->plugin_name);
?>

<!-- remove some meta and generators from the <head> -->
<fieldset>
<legend class="screen-reader-text">
<span>Clean WordPress head section</span>
</legend>
<label for="<?php echo $this->plugin_name; ?>-cleanup">
<input type="checkbox" id="<?php echo $this->plugin_name; ?>-cleanup" name="<?php echo $this->plugin_name; ?>[cleanup]" value="1" <?php checked($cleanup, 1); ?> />
<span><?php esc_attr_e('Clean up the head section', $this->plugin_name); ?></span>
</label>
</fieldset>

<!-- remove injected CSS from comments widgets -->
<fieldset>
<legend class="screen-reader-text"><span>Remove Injected CSS for comment widget</span></legend>
<label for="<?php echo $this->plugin_name; ?>-comments_css_cleanup">
<input type="checkbox" id="<?php echo $this->plugin_name; ?>-comments_css_cleanup" name="<?php echo $this->plugin_name; ?>[comments_css_cleanup]" value="1" <?php checked($comments_css_cleanup, 1); ?> />
<span><?php esc_attr_e('Remove Injected CSS for comment widget', $this->plugin_name); ?></span>
</label>
</fieldset>

<!-- remove injected CSS from gallery -->
<fieldset>
<legend class="screen-reader-text"><span>Remove Injected CSS for galleries</span></legend>
<label for="<?php echo $this->plugin_name; ?>-gallery_css_cleanup">
<input type="checkbox" id="<?php echo $this->plugin_name; ?>-gallery_css_cleanup" name="<?php echo $this->plugin_name; ?>[gallery_css_cleanup]" value="1" <?php checked( $gallery_css_cleanup, 1 ); ?> />
<span><?php esc_attr_e('Remove Injected CSS for galleries', $this->plugin_name); ?></span>
</label>
</fieldset>

<!-- add post,page or product slug class to body class -->
<fieldset>
<legend class="screen-reader-text"><span><?php _e('Add Post, page or product slug to body class', $this->plugin_name); ?></span></legend>
<label for="<?php echo $this->plugin_name; ?>-body_class_slug">
<input type="checkbox" id="<?php echo $this->plugin_name; ?>-body_class_slug" name="<?php echo $this->plugin_name; ?>[body_class_slug]" value="1" <?php checked($body_class_slug, 1); ?> />
<span><?php esc_attr_e('Add Post slug to body class', $this->plugin_name); ?></span>
</label>
</fieldset>

<!-- load jQuery from CDN -->
<fieldset>
<legend class="screen-reader-text"><span><?php _e('Load jQuery from CDN instead of the basic wordpress script', $this->plugin_name); ?></span></legend>
<label for="<?php echo $this->plugin_name; ?>-jquery_cdn">
<input type="checkbox" id="<?php echo $this->plugin_name; ?>-jquery_cdn" name="<?php echo $this->plugin_name; ?>[jquery_cdn]" value="1" <?php checked($jquery_cdn,1); ?>/>
<span><?php esc_attr_e('Load jQuery from CDN', $this->plugin_name); ?></span>
</label>
<fieldset>
<p>You can choose your own cdn provider and jQuery version(default will be Google Cdn and version 1.11.1)-Recommended CDN are <a href="https://cdnjs.com/libraries/jquery">CDNjs</a>, <a href="https://code.jquery.com/jquery/">jQuery official CDN</a>, <a href="https://developers.google.com/speed/libraries/#jquery">Google CDN</a> and <a href="http://www.asp.net/ajax/cdn#jQuery_Releases_on_the_CDN_0">Microsoft CDN</a></p>
<legend class="screen-reader-text"><span><?php _e('Choose your prefered cdn provider', $this->plugin_name); ?></span></legend>
<input type="url" class="regular-text" id="<?php echo $this->plugin_name; ?>-cdn_provider" name="<?php echo $this->plugin_name; ?>[cdn_provider]" value="<?php if(!empty($cdn_provider)) echo $cdn_provider; ?>"/>
</fieldset>
</fieldset>

<?php submit_button('Save all changes', 'primary','submit', TRUE); ?>

خب کاری که ما داریم انجام می دهیم کلا بررسی کردن است برای اینکه ببینیم آیا اعتبار وجود دارد و اگر وجود دارد فیلد ورودی را با اعتبار کنونی پر کند. ما این کار را ابتدا با استفاده کردن از تمامی گزینه هایمان و تخصیص دادن هرکدام به یک متغیر ( سعی کنید آنها آشکار باشند تا بدانید که کدام کدام است؟) انجام می دهیم.

سپس یک شرط کوچک اضافه می کنیم. ما از WordPress built-in checked function در ورودی هایمان استفاده می کنیم تا اعتبارش ذخیره شود و ویژگی بررسی شد اضافه شود، اگر که گزینه وجود دارد و برای یک تنظیم شده است. بنابراین فایل تان را ذخیره کنید، و برای آخرین بار افزونه تان را ذخیره کنید و بردیم!!! ما با موفقیت افزونه مان را به پایان رساندیم.

تنظیمات افزونه با موفقیت ذخیره شد

جمع بندی بخش اول

چیزهای بسیاری یادگرفتیم. از مزایای ساختن افزونه برای وردپرس خودتان و به اشتراک گذاشتن آن با سایر کاربران وردپرس تا اینکه تابع هایتان را تبدیل به یک افزونه کنید. ما یک WordPress Plugin Boilerplate باور نکردنی، ساختارش، و اینکه چرا شما باید از آن استفاده کنید را بررسی کردیم.

ما دستامون را چرب می کنیم و خودمان را به سمت اولین گام ساختن یک افزونه وردپرسی، با دو نوع فیلد اعتباردهی و پاکسازی و تمامی روند Oriented Object PHP با یک کد واضح و شفاف به جلو هل می دهیم. با این حال هنوز تمام نشده است.

در قسمت دوم، ما افزونه مان را زنده خواهیم کرد، تابع هایی می سازیم که در واقع وب سایت وردپرس تان را تحت تاثیر قرار خواهند داد، همچنین فیلدهای پیچیده تر را کشف و سانسور می کنیم و در نهایت افزونه مان را اماده می کنیم تا توسط تیم مخزن وردپرس بررسی شود. ما این کار را با یک سری لینک و منبع جمع و جور می کنیم.

برخی از منابع استفاده شده در این مقاله:

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.