نحوه ایجاد ویجت سفارشی وردپرس

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

می توانید از ابزارک ها برای افزودن بنرها ، تبلیغات ، فرم های ثبت نام خبرنامه و سایر عناصر به وب سایت خود استفاده کنید.

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

توجه: این آموزش برای کاربران DIY WordPress است که در حال یادگیری توسعه و کد نویسی وردپرس هستند.

ویجت وردپرس چیست؟

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

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

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

WordPress همچنین به توسعه دهندگان امکان می دهد ابزارهای سفارشی خود را بسازند.

بسیاری از تم ها و افزونه های وردپرس با ابزارک های سفارشی مخصوص به خود همراه هستند که می توانید به ستون های فرعی خود اضافه کنید.

به عنوان مثال ، می توانید بدون نوشتن کد ، یک فرم تماس ، یک فرم ورود به سیستم سفارشی یا یک گالری عکس را به نوار کناری ( سایدبار ) اضافه کنید.

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

ایجاد یک ابزارک سفارشی در وردپرس

اگر شما در حال یادگیری کدنویسی وردپرس هستید ، به یک محیط توسعه محلی نیاز خواهید داشت. می توانید WordPress را روی رایانه خود (Mac یا Windows) نصب کنید.

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

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

همچنین می توانید کد را در پرونده های function.php قالب خود بچسبانید. اما ، فقط در صورت فعال بودن آن قالب در دسترس خواهد بود.

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

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

بیا شروع کنیم.

ایجاد یک ابزارک اساسی وردپرس

WordPress با یک کلاس ویجت ساخته شده در WordPress همراه است. هر ویجت وردپرس کلاس ویجت وردپرس را گسترش می دهد.

18 روش ذکر شده در کتاب توسعه دهنده وردپرس وجود دارد که می تواند با کلاس ویجت WP استفاده شود.

با این حال ، به خاطر این آموزش ، ما به روش های زیر می پردازیم.

• __construct() : این بخشی است که شناسه عناوین ، عنوان و توضیحات را ایجاد می کنیم.
• widget : اینجاست که ما خروجی تولید شده توسط ویجت را تعریف می کنیم.
• form : این قسمت از کد جایی است که ما فرم را با گزینه های ویجت برای بک-اند ایجاد می کنیم.
• update : این بخشی است که گزینه های ویجت را در دیتابیس ذخیره می کنیم.

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

قطعه نهایی کد جایی است که ما در واقع ویجت را ثبت خواهیم کرد و آن را درون WordPress بارگذاری می کنیم.

function wpb_load_widget() {
    register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

حال بگذارید همه اینها را در کنار هم قرار دهیم تا یک ویجت اساسی وردپرس ایجاد کنیم. می توانید کد زیر را در پرونده پلاگین یا پرونده های function.php مورد نظر خود کپی و جایگذاری کنید.

// Creating the widget 
class wpb_widget extends WP_Widget {
  
function __construct() {
parent::__construct(
  
// Base ID of your widget
'wpb_widget', 
  
// Widget name will appear in UI
__('WPBeginner Widget', 'wpb_widget_domain'), 
  
// Widget description
array( 'description' => __( 'Sample widget based on WPBeginner Tutorial', 'wpb_widget_domain' ), ) 
);
}
  
// Creating widget front-end
  
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
  
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
  
// This is where you run the code and display the output
echo __( 'Hello, World!', 'wpb_widget_domain' );
echo $args['after_widget'];
}
          
// Widget Backend 
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'New title', 'wpb_widget_domain' );
}
// Widget admin form
?>


<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />


<?php 
}
      
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
 
// Class wpb_widget ends here
} 
 
 
// Register and load the widget
function wpb_load_widget() {
    register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

پس از افزودن كدی كه می خواهید به صفحه ” نمایش »ابزاركها ” بروید. در لیست ابزارک های موجود ، متوجه ویجت WPBeginner جدید خواهید شد. باید این ابزارک را به نوار کناری بکشید و رها کنید.

این ویجت فقط یک فیلد فرم برای پر کردن دارد ، می توانید متن خود را اضافه کرده و روی دکمه ذخیره کلیک کنید تا تغییرات خود را ذخیره کنید. اکنون می توانید به وب سایت خود مراجعه کنید تا در عمل مشاهده شود.

حالا بیایید دوباره کد را مطالعه کنیم.

ابتدا «wpb_widget» را ثبت کردیم و ویجت سفارشی خود را بارگذاری کردیم. پس از آن ما تعریف کردیم که ویجت چه کاری انجام می دهد ، و چگونه می توان ویجت را به صورت بک-اند نمایش داد.

در آخر ، ما چگونگی رسیدگی به تغییرات ایجاد شده در ویجت را تعریف کردیم.