Hướng dẫn tạo mới widget trong wordpress

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Hướng dẫn tạo mới widget trong wordpress

Tạo widget trong wordpress

Bạn có thể viết trực diện vào theme hoặc tạo plugin đơn giản. WordPress admin sẽ sử dụng file functions.php của theme kích thoạt trong wordpress nên để cho đơn giản mình sẽ viết ngay vào file functions.php, bạn dán đoạn code sau vào file:

    __( 'Hoangweb thiết kế web giá cả rẻ uy tín chất lượng', 'hoangweb' ), ) ); } // Creating widget front-end // This is where the action happens 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 $temp=get_template_directory().'/page-templates/dangky-html.php'; if(file_exists($temp)) include($temp); echo $args['after_widget']; } // Widget Backend public function form( $instance ) { if ( isset( $instance[ 'title' ] ) ) { $title = $instance[ 'title' ]; } else { $title = __( 'New title', 'hoangweb' ); } // Widget admin form ?>   

<label for=" get_field_id( 'title' ); ?> "> get_field_id( 'title' ); ?> " name=" get_field_name( 'title' ); ?> " type="text" value=" " />

Giải thích :
Hàm __construct của class sẽ dùng để thiết lập tin tức cho widget, như tên widget, tiêu đề và mô tả.

 parent::__construct( // Base ID of your widget 'hw_formdangky', // Widget name will appear in UI __('Form đăng ký', 'hoangweb'), // Widget description array( 'description' =>  __( 'Hoangweb thiết kế web giá rẻ đáng tin cậy chất lượng', 'hoangweb' ), ) );  

Tham số trước mắt là ID của widget, tên này có tiền tố ‘widget_’ xuất hiện trong class của widget lúc xem trên web và cũng dùng để làm truy xuất độc lập dữ liệu của widget nữa nhé, xem thêm cách lấy dữ liệu widget đã đăng ký trên sidebar.

Widget cho dù là 2 phần: tham số cài đặt tại backend và nội dung hiển thị widget trên frontend.

Tiếp đến, nội dung của widget hiện thị trên web bạn trình bầy vào phương thức widget( $args, $instance ) . Biến $args chứa tham số trong phần khai báo sidebar, bạn cũng có thể có thể đưa thêm các thuộc tính giá trị ngoài dữ liệu dùng để thiết lập giao diện cho widget như: before_widget, after_widget,..

 register_sidebar( array( 'name' =>  __( 'Main Sidebar', 'hoangweb' ), 'sidebar-1', 'description' =>  __( 'Appears on posts and pages except the optional Front Page template, which has its own widgets', 'hoangweb' ), 'before_widget' =>  ' 
', 'after_widget' => '
', 'before_title' => '

', 'after_title' => '

', 'custom_var'=> 'xx' ) );

Còn biến $instances chứa nội dung cấu hình bạn đã thiết lập trong wordpress admin.
Tất nhiên, hàm quản lý tùy chọn cài đặt cho wiget chỉ sử dụng biến này. Hàm form cấp phép người sử dụng thiết lập cài đặt vào widget và hoạt động trong admin.

 public function form( $instance ) { if ( isset( $instance[ 'title' ] ) ) { $title = $instance[ 'title' ]; } else { $title = __( 'New title', 'hoangweb' ); } // Widget admin form ?>   

<label for=" get_field_id( 'title' ); ?> "> get_field_id( 'title' ); ?> " name=" get_field_name( 'title' ); ?> " type="text" value=" " />

<?php }

Lưu ý: Biến $instance chứa trường cài đặt bạn thiết lập trong hàm cập nhật thông tin widget dưới đây. Những field được người sử dụng thiết lập giá trị thì bạn sẽ lưu, và những trường còn lại bạn phải kiểm tra xem có hiện diện không chẳng hạn với hàm php isset . Nếu không muốn dùng hàm này, bằng phương pháp bạn khai báo những thuộc tính cài đặt mặc định của widget.
Liệt kê vào options vào biến $default_options trong constructor.

   'val1','opt1'=> 'val2','opt2'=> 'val3',...); }  

Và trong hàm hiển thị tùy chọn của widget, gộp những trường cài đặt không có mức giá trị bởi biến này.

 // Widget Backend public function form( $instance ) { $instance = wp_parse_args( (array) $instance, $this-> defaults_options ); ...  

Ok, Cuối cùng bạn phải lưu lại cài đặt widget bởi hàm update( $new_instance, $old_instance ) .
Bạn cũng đều có thể lấy giá trị cài đặt trước đấy trước khi thay thế bằng giá trị mới bởi biến $old_instance .
Sửa lại giá trị cài đặt mới trước khi wordpress lưu vào cơ sở dữ liệu. Dữ liệu mới sẽ có lưu trong kết quả trả về của hàm.

 // 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; }  

Đoạn code trên, mình lọc giới hạn fields, bạn cũng cũng có thể lưu lại tất fields bằng phương pháp gán $instance=$new_instance .

Như vậy, chúng ta đã xong phần thiết kế widget, để cũng đều có thể sử dụng widget bạn phải đăng ký vào menu Apprearance-> Widget. Đăng ký với hàm register_widget trong trong lúc tái tạo các widgets khác, bạn sử dụng hook widgets_init .

 // Register and load the widget function wpb_load_widget() { register_widget( 'wpb_widget' ); } add_action( 'widgets_init', 'wpb_load_widget' );  

Kết quả:
tao-widget
widget-settings
Chúc bạn thành công!

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dõi kênh chia sẻ kiến thức WordPress của TopVn trên Twitter và Facebook

Bài viết Hướng dẫn tạo mới widget trong wordpress được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang