خانه / وردپرس / آموزش وردپرس / چگونگی ایجاد یک ویجیت وردپرس سفارشی

تاریخ انتشار: ژوئن 9, 2017 تعداد بازدید: 855 بازدید تعداد دیدگاه ها: 0

چگونگی ایجاد یک ویجیت وردپرس سفارشی

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

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

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

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

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

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

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

با این حال بیاید ببینیم چطور می توان یک ویجیت سفارشی را در وردپرس ایجاد کرد.

ایجاد یک ویجیت سفارشی در وردپرس

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

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

01 // Register and load the widget
02 function wpb_load_widget() {
03     register_widget( 'wpb_widget' );
04 }
05 add_action( 'widgets_init', 'wpb_load_widget' );
06
07 // Creating the widget
08 class wpb_widget extends WP_Widget {
09
10 function __construct() {
11 parent::__construct(
12
13 // Base ID of your widget
14 'wpb_widget',
15
16 // Widget name will appear in UI
17 __('WPBeginner Widget', 'wpb_widget_domain'),
18
19 // Widget description
20 array( 'description' => __( 'Sample widget based on WPBeginner Tutorial', 'wpb_widget_domain' ), )
21 );
22 }
23
24 // Creating widget front-end
25
26 public function widget( $args, $instance ) {
27 $title = apply_filters( 'widget_title', $instance['title'] );
28
29 // before and after widget arguments are defined by themes
30 echo $args['before_widget'];
31 if ( ! empty( $title ) )
32 echo $args['before_title'] . $title . $args['after_title'];
33
34 // This is where you run the code and display the output
35 echo __( 'Hello, World!', 'wpb_widget_domain' );
36 echo $args['after_widget'];
37 }
38         
39 // Widget Backend
40 public function form( $instance ) {
41 if ( isset( $instance[ 'title' ] ) ) {
42 $title = $instance[ 'title' ];
43 }
44 else {
45 $title = __( 'New title', 'wpb_widget_domain' );
46 }
47 // Widget admin form
48 ?>
49 <p>
50 <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
51 <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 ); ?>" />
52 </p>
53 <?php
54 }
55     
56 // Updating widget replacing old instances with new
57 public function update( $new_instance, $old_instance ) {
58 $instance = array();
59 $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
60 return $instance;
61 }
62 } // Class wpb_widget ends here

پس از اضافه کردن کد، شما نیاز است که وارد قسمت Appearance » Widgets  بروید و ویجیت را گرفته و در نوار کناری رها کنید.

حالا شما می توانید این عمل را در وب سایت خود مشاهده فرمایید.

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

هنوز دیدگاهی ثبت نشده است.