پرتال سزار ایران آموزش‌های اختصاصی وردپرس / قالب وردپرس 
آموزش ساخت ابزارک اختصاصی برای وردپرس
وردپرس به عنوان کاملترین و محبوترین سیستم مدیریت محتوا در سراسر جهان، این امکان را پدید آورده است که حتی بسیاری از افرادی که دانش برنامه نویسی ندارند بتوانند به راحتی از خدمات مورد نیاز خود استفاده نمایند.
وردپرس افزونه ها یا پلاگین های متعددی دارد که تنها با نصب هریک از آنها می توان از امکانات بینظیر آن استفاده نمود و در عین حال این افزونه ها این قابلیت را دارند که شما مطابق سلیقه، نیاز و طرح سایت خود، هر یک از آنها را شخصی سازی نمایید.
امروز در نظر داریم تا در رابطه با ساخت ابزارک اختصاصی برای وردپرس صحبت نماییم و طریقه ساخت آن را به شما عزیزان آموزش دهیم.
ابزارک‌های وردپرس قطعه کدهایی هستند که شما میتوانید آنها را در نوار کناری وب سایت خود قرار دهید، به آنها مانند ماژول‌ها نگاه کنید که میتوان از آنها برای اضافه کردن عناصر متفاوت به صورت درگ و دراپ استفاده کرد. به صورت پیشفرض، وردپرس ابزارک‌های استانداردی دارد که میتوانید از آنها در هر پوسته‌ای استفاده کرد.
وردپرس به توسعه دهندگان نیز این امکان را می‌دهد تا ابزارک‌های شخصی خودشان را ایجاد کنند. بسیاری از پوسته‌ها و افزونه‌های وردپرس وجود دارند که دارای ابزارک‌های شخصی خودشان هستند و میتوان از آنها استفاده کرد.
مطمئنا ساختن یک ابزارک سفارشی در وردپرس اتفاق بسیار خوبی است که شما اگر حتی یک برنامه نویس حرفه ای هم نباشید میتوانید این کار را انجام دهید. تنها به یک اطلاعات ابتدایی در مورد oop در php نیاز دارید و دیگر منتظر بمانید تا انتهای این آموزش یک ابزارک سفارشی تحویل بگیرید! بنابراین با ما همراه باشید تا بتوانید ابزارک اختصاصی خود را بسازید.
ساختار اولیه ی ابزارک وردپرس
طبق قوانین توسعه ی وردپرس، ابزارک ها دارای کلاس wp_widget هستند. بنابراین برای ساخت یک ابزارک سفارشی در وردپرس نیازمند توسعه ی این کلاس خواهیم بود. اولین کاری که باید انجام دهیم ساخت یک فایل php در مسیر wp_content / plugins /my_widget / است. که در ابتدای فایل قطعه کد زیر را جایگذاری میکنیم:
<?php
/*
Plugin Name: My Widget
Plugin URI: http://wordpress.org/extend/plugins/#
Description: This is an example plugin
Author: Your Name
Version: 1.0
Author URI: http://example.com/
*/
این یک سربرگ ساده برای افزونه است و برای هدف کافیست. سپس فایل مورد نظر را ذخیره کنید و بعد به سراغ پیشخوان وردپرس رفته و افزونه را فعال کنید. حال وقت آن رسیده که کلاس wp_widget را گسترش دهید. بدین منظور قطعه کد زیر را داخل فایل افزونه وارد کنید.
// register My_Widget
add_action( ‘widgets_init’, function(){
register_widget( ‘My_Widget’ );
});
Add_action دستورالعملی برای فراخوانی عملگر widgets_init می باشد. که در تمامی افزونه ها به صورت پیش فرض قرار میگیرد.
عملکرد register_widget برای ابزارک خاصی است که میتواند کلاس wp _ widget را توسعه دهد:
class My_Widget extends WP_Widget {
// class constructor
public function __construct() {}
// output the widget content on the front-end
public function widget( $args, $instance ) {}
// output the option form field in admin Widgets screen
public function form( $instance ) {}
// save options
public function update( $new_instance, $old_instance ) {}
}
در حال حاضر ابزارک ما حاضر است و فقط به چهار کلاس احتیاج دارد:
Constract__: کلاسی که برای ساخت پارامترهای ابزارک به صورت سفارشی اجازه صادر میکنید.
()Widget: برای نمایش محتوای ابزارک به کار می رود.
()form : عناصر ابزارک در پیشخوان برای نمایش فرم است.
()update: به روزرسانی عناصر ابزارک
تنظیمات ابزارک
برای افزودن توضیحات مربوط به ابزارک مانند شناسه ی ابزارک، عنوان، تنظیمات اضافی و… کدهای زیر را در فایل php وارد کنید:
public function __construct() {
$widget_ops = array(
‘classname’ => ‘my_widget’,
‘description’ => ‘A plugin for Kinsta blog readers’,
);
parent::__construct( ‘my_widget’, ‘My Widget’, $widget_ops );
}
ساخت فرم ابزارک در پنل مدیریت
حال میخواهیم فرمی را برای تنظیمات ابزارک در سمت مدیریت ایجاد کنیم تا کاربران قادر به تنظیم کردن آن باشند. این کار بر عهده ی کلاس () form میباشد:
public function form( <span class="hljs-variable">$instance</span> ) { <span class="hljs-variable">$title</span> = ! empty( <span class="hljs-variable">$instance</span>[<span class="hljs-string">’title’</span>] ) ? <span class="hljs-variable">$instance</span>[<span class="hljs-string">’title’</span>] : esc_html__( <span class="hljs-string">’Title’</span>, <span class="hljs-string">’text_domain’</span> ); ?> <p> <label <span class="hljs-keyword">for</span>=<span class="hljs-string">"<?php echo esc_attr( <span class="hljs-variable">$this</span>->get_field_id( ‘title’ ) ); ?>"</span>> <?php esc_attr_e( <span class="hljs-string">’Title:’</span>, <span class="hljs-string">’text_domain’</span> ); ?> </label> <input class=<span class="hljs-string">"widefat"</span> id=<span class="hljs-string">"<?php echo esc_attr( <span class="hljs-variable">$this</span>->get_field_id( ‘title’ ) ); ?>"</span> name=<span class="hljs-string">"<?php echo esc_attr( <span class="hljs-variable">$this</span>->get_field_name( ‘title’ ) ); ?>"</span> <span class="hljs-built_in">type</span>=<span class="hljs-string">"text"</span> value=<span class="hljs-string">"<?php echo esc_attr( <span class="hljs-variable">$title</span> ); ?>"</span>> </p> <?php }
این مثال ساده میتواند نشان دهد که تنظیمات ارزش بزرگی دارد و برای کاربران یک وبسایت مانند مدیر سایت بسیار کاربردی است. حال میخواهیم چک لیستی را برای ابزارک خود تعریف کنیم:
public function form( $instance ) {
$posts = get_posts( array(
‘posts_per_page’ => 20,
‘offset’ => 0
) );
$selected_posts = ! empty( $instance[‘selected_posts’] ) ? $instance[‘selected_posts’] : array();
?>
<div style="max-height: 120px; overflow: auto;">
<ul>
<?php foreach ( $posts as $post ) { ?>
<li><input
type="checkbox"
name="<?php echo esc_attr( $this->get_field_name( ‘selected_posts’ ) ); ?>[]"
value="<?php echo $post->ID; ?>"
<?php checked( ( in_array( $post->ID, $selected_posts ) ) ? $post->ID : ”, $post->ID ); ?> />
<?php echo get_the_title( $post->ID ); ?></li>
<?php } ?>
</ul>
</div>
<?php
}
نتیجه ای که بدست می آید به صورت زیر است:
بروزرسانی تنظیمات ابزارک
برای بروزرسانی همانطور که گفتیم از کلاس () update استفاده میکنیم و دستورالعمل آن را درون فایل ابزارک میگذاریم:
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance[‘title’] = ( ! empty( $new_instance[‘title’] ) ) ? strip_tags( $new_instance[‘title’] ) : ”;
$selected_posts = ( ! empty ( $new_instance[‘selected_posts’] ) ) ? (array) $new_instance[‘selected_posts’] : array();
$instance[‘selected_posts’] = array_map( ‘sanitize_text_field’, $selected_posts );
return $instance;
}
خروجی ابزارک
از کلاس ()widget برای نمایش خروجی و تنظیمات ابزارک در محیط کاربر استفاده میشود. برای اینکار میتوان کد قطعه کد زیر استفاده کرد:
public function widget( $args, $instance ) {
echo $args[‘before_widget’];
if ( ! empty( $instance[‘title’] ) ) {
echo $args[‘before_title’] . apply_filters( ‘widget_title’, $instance[‘title’] ) . $args[‘after_title’];
}
if( ! empty( $instance[‘selected_posts’] ) && is_array( $instance[‘selected_posts’] ) ){
$selected_posts = get_posts( array( ‘post__in’ => $instance[‘selected_posts’] ) );
?>
<ul>
<?php foreach ( $selected_posts as $post ) { ?>
<li><a href="<?php echo get_permalink( $post->ID ); ?>">
<?php echo $post->post_title; ?>
</a></li>
<?php } ?>
</ul>
<?php
}else{
echo esc_html__( ‘No posts selected!’, ‘text_domain’ );
}
echo $args[‘after_widget’];
}
خروجی حاصل را می توانید در سمت کاربر مشاهده کنید:
افزونه ساخت ابزارک وردپرس
افزونه و ابزارک های بسیاری به طور پیش فرض برای قالب شما وجود دارند و در حالت پایه جوابگوی نیاز سایت می باشد اما خیلی از کاربرهای حرفه ای تر دوست دارند ابزارک های خاص خودشان را داشته باشند. خوشبختانه افزونه هایی وجود دارند که با آن ها می توانید ابزارک های متنوع تری تولید کنید. از جمله:
- افزونه SiteOrigin Widgets Bundle
- افزونه Custom Sidebars
- افزونه Widget CSS Classes
این افزونه ها کمک می کنند که در قالب وردپرس برای هر دسته یا صفحه ساید بار اختصاصی داشته باشید و ابزارک های مختلفی را برای صفحات یا نوشته هایتان تنظیم می کنند. مثلا برای ایجاد ابزارک فرم تماس با ما یا ابزارک های اسلاید گذاری می توانید از این افزونه ها استفاده کنید. البته برخی از این افزونه ها نسخه فارسی شده هم دارند که می توانید آن ها را دانلود کنید.
افزونه Advanced activity widget نیز یک افزونه ابزارک پیشرفته است که بسیاری از ابزارک های گسترده و حرفه ای به طور پیش فرض در آن وجود دارند و با دانلود این افزونه می توانید از ان استفاده کنید.