18. Sử dụng phương thức update & widget trong Widget API

Như vậy sau khí kết thúc bài Tạo mới WordPress Widget đơn giản, thì bạn đã được tìm hiểu 2 trong 4 phương thức mà Widget API hỗ trợ bạn trong quá trình tạo mới một Widget theo ý đồ của bạn, nhưng chỉ với 2 phương thức kia là chưa đủ, vì bạn mới chỉ có thể khai báo cấu hình tên Widget, mô tả, và tạo ra một phần form nhập liệu cho Widget. Việc còn lại là bạn phải cập nhật dữ liệu và đưa nó vào table wp_options trong database, sau khi đưa được dữ liệu vào csdl rồi thì bạn cần phải hiển thị vùng Widget mới đó ra ngoài trang chủ. Bạn đừng quá lo lắng vì chỉ cần với 2 phương thức còn lại thì mọi chuyện sẽ được giải quyết nhanh chóng. Trong bài Sử dụng phương thức update & widget trong Widget API thì bạn sẽ được hướng dẫn cách sử dụng 2 phương thức update & widget để thực hiện các công việc mà tôi vừa nêu ở trên.

1/ Phương thức update trong Widget API

Phương thức update có nhiệm vụ giúp bạn cập nhật dữ liệu từ form và đưa vào table wp_options, nó có tất cả là 2 tham số.

Cú pháp:

1 2 3 4	public function update( $new_instance, $old_instance ) { }

Tham số:

· $new_instance: Giá trị mới được truyền vào database

· $old_instance: Giá trị cũ hiện tại của dữ liệu

Đầu tiên chúng ta cần in tham số đầu tiên ra xem nó là gì?

1 2 3 4 5 6	public function update( $new_instance, $old_instance ) { echo '<pre>'; print_r($new_instance); echo '</pre>'; die(); }

Tôi dùng phương thức die() để việc xử lý dừng lại ngay khi tôi in giá trị từ tham số đầu tiên ra trình duyệt, lúc này bạn cần truy cập vào vùng quản lý các Widget theo đường dẫnhttp://localhost/wordpress/wp-admin/widgets.php, ngay tại vị trí của Kenshin Widget, bạn click chuột và nhập bất cứ giá trị tùy thích vào và bấm nút save.

Tôi nhập vào giá trị Himura Kenshin và kết quả tôi nhận về là một Array có Key =>title , tương ứng với thuộc tính mà bạn đã khai báo trong form, value => Himura Kenshin, nhu vậy giá trị mới được được nhận vào, việc tiếp theo bạn cần làm là xử lý nó để đưa dữ liệu vào table wp_options.

widget-phuong-thuc-update

Tại phương thức form tôi tạo thêm một textbox có tên là slogan, dùng để nhập liệu cho bạn tường minh hơn với việc chỉ có một textbox mà thôi.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

public function form( $instance ) { $inputID = $this->get_field_id('title'); $inputName = $this->get_field_name('title'); ?> <p> <label>Title:</label> <input type="text" class="widefat" id="<?php echo $inputID; ?>" name="<?php echo $inputName; ?>" value="" /> </p> <?php $inputID = $this->get_field_id('slogan'); $inputName = $this->get_field_name('slogan'); ?> <p> <label>Slogan:</label> <input type="text" class="widefat" id="<?php echo $inputID; ?>" name="<?php echo $inputName; ?>" value="" /> </p> <?php }

Bạn sẽ thấy có 2 ô textbox và bạn có thể nhập liệu bất cứ giá trị nào vào bên trong textbox cũng được.

widget-phuong-thuc-update-2-field

Ok, sau khi đã nhận được các giá trị từ ô textbox truyền vào thì kế tiếp việc bạn cần là đưa dữ liệu vào database, vậy để làm điều đó có dễ không ?

Bạn sẽ khởi tạo biến $instance có giá trị bằng với biến $old_instance, để khi Widget không có dữ liệu gì thì hệ thống sẽ tự đưa dữ liệu của giá trị cũ ra.

1 2 3 4 5 6 7 8 9 10 11	public function update( $new_instance, $old_instance ) { // Gán biến instance bằng với giá trị cũ $instance = $old_instance; // Đưa dữ liệu vào hàm strip_tags loại bỏ các ký tự html $instance['title'] = strip_tags($new_instance['title']); $instance['slogan'] = strip_tags($new_instance['slogan']); return $instance; }

Sử dụng hàm strip_tags() để loại bỏ các ký tự html và sau cùng là return $instance để thực hiện việc đưa dữ liệu vào table wp_options.

Bạn kiểm tra bằng cách vào phpmadmin tìm đến table wp_options xem coi có filed nào lạ bên trong không hen.

widget-wp-options

Ngay vị trí id 532 tôi thấy field widget_kenshin-widget-simple, phần đầu là tiền tố, xác định field này thuộc kiểu Widget phần _ về sau là tên Widget mà bạn khai báo ở file xử lý, như vậy bạn vừa thực hiện thành công việc cập nhật dữ liệu vào database.

Lúc này tôi muốn các giá trị trong ô textbox vừa được nhâp vào được giữ nguyên , sau khi đã bấm nút save để thực thi thao tác đưa dữ liệu vào table wp_options. Như vậy lúc này bạn sẽ sử dụng đến tham số $instance ở phương thức form.

Phương thức này là một array(mảng) giá trị dữ liệu lấy ra từ table wp_options, vậy để giữ nguyên các giá trị dữ liệu trong textbox khi bạn đã ấn F5 thì bạn sẽ thực hiện như sau.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

public function form( $instance ) { $inputID = $this->get_field_id('title'); $inputName = $this->get_field_name('title'); $inputValue = $instance['title']; ?> <p> <label>Title:</label> <input type="text" class="widefat" id="<?php echo $inputID; ?>" name="<?php echo $inputName; ?>" value="<?php echo $inputValue; ?>" /> </p> <?php $inputID = $this->get_field_id('slogan'); $inputName = $this->get_field_name('slogan'); $inputValue = $instance['slogan']; ?> <p> <label>Slogan:</label> <input type="text" class="widefat" id="<?php echo $inputID; ?>" name="<?php echo $inputName; ?>" value="<?php echo $inputValue; ?>" /> </p> <?php }

Tạo biến $inputValue bằng với phần tử $instance chứa mảng tương ứng với tên phần tử của texbox và truyền $inputValue vào vị trí thẻ value của form, sau đó bạn F5 lại xem 2 ô textbox có giữ nguyên giá trị mà bạn vừa nhập vào không.

widget-form-keep-value-textbox

Sau khi đã hoàn thành công đoạn đưa dữ liệu từ textbox cập nhật vào database thì kế tiếp bạn cần phải hiển thị vùng Widget mới ra trang chủ, bao gồm các dữ liệu trong database mà bạn vừa cập nhật vào hệ thống.

2/ Phương thức widget trong Widget API

Phương thức widget giúp bạn xử lý việc đưa vùng Widget mới ra ngoài trang chủ, và nó có tất cả là 2 tham số.

Cú pháp:

1 2 3	public function widget( $args, $instance ) { }

Tham số:

· $args: Mảng chứa thông tin đã thiết lập của Widget

· $instance: Mảng chứa dữ liệu đã nhập vào.

Đầu tiên do tôi đang dùng themes Twenty Thirteen nên tôi buộc phải kéo Kenshin Widget sang từ Sidebar Main Widget Area sang Secondary Widget Area, mục đích tôi làm việc này để vùng Widget mới này sẽ hiển thị ở cột bên phải cho bạn dễ nhìn thôi.

widget-change-sidebar

Lúc này bạn ra trang chủ F5 cũng chưa thấy gì hết đâu, vì bạn chưa khai báo các thiết lập thì làm sao hệ thống biết mà gọi dữ liệu từ Widget ra chứ. Trước tiên bạn cần phải in tham số đầu tiền xem bên trong nó chứa gì.

1 2 3 4 5	public function widget( $args, $instance ) { echo '<pre>'; print_r($args); echo '</pre>'; }

Đây là kết quả sau khi tôi in ra, bạn dễ dàng nhận ra là tham số đầu tiên trả về một số key chứa các giá trị thiết lập Widget.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18	Array ( [name] => Secondary Widget Area [id] => sidebar-2 [description] => Appears on posts and pages in the sidebar. [class] => [before_widget] => [after_widget] => [before_title] => [after_title] => [widget_id] => kenshin-widget-simple-2 [widget_name] => Kenshin Widget )

Với các key này thì bạn chỉ quan tâm tới các key như sau.

· [before_widget]: Thẻ mở <ul

· [after_widget]: Thẻ đóng </ul

· [before_title]: Thẻ mở <li chứa tên Widget

· [after_title]: Thẻ đóng </li chứa tên Widget

Để kiểm tra chi tiết hơn thì bạn cần chuyển các thông số của array thành toàn bộ là biến, chỉ với một phương thức đơn giản là extract().

1 2 3 4 5	public function widget( $args, $instance ) { extract($args); echo $before_widget. $widget_name. $after_widget; }

Do bạn đã chuyển tử array sang biến nên các key trong array sẽ chính là tên biến, và kết quả từ trình duyệt trả về là bạn đã hiển thị chính xác tên Widget mà bạn đã khai báo trong file xử lý.

widget-show-home-with-database

Nhưng hình như có vẻ phần tên của Widget chưa hiển thị đúng với kiểu chữ so với các Widget khác? vậy thì tại sao nó lại như vậy, do đoạn code phía trên tôi chỉ dùng biến đóng mở thẻ <ul mà không chèn vị trí tên Widget vào biến đóng mở <li nên mới ra cớ sự như vậy, bổ sung thêm code xíu hen.

1 2 3 4 5 6 7	public function widget( $args, $instance ) { extract($args); echo $before_widget; echo $before_title. $widget_name . $after_title; echo $after_widget; }

widget-name-show-home

Bạn thấy ngay phần hiển thị tên Kenshin Widget nó khác ngay tức thì liền đúng hông, và lúc này nó cũng đồng bộ với các Widget còn lại luôn rồi đấy, kế tiếp tôi sẽ in tham số thứ hai xem bên trong nó chứa các giá trị gì.

1 2 3 4 5 6 7 8 9 10 11	public function widget( $args, $instance ) { extract($args); echo $before_widget; echo $before_title. $widget_name . $after_title; echo $after_widget; echo '<pre>'; print_r($instance); echo '</pre>'; }

Kết quả trả về là một mảng chứa giá trị mà bạn đã đưa vào database, vậy thì do nó là mảng nên tôi sẽ lấy giá trị của nó như sau.

1 2 3 4 5	Array ( [title] => Himura Kenshin [slogan] => Battousai )

Nhưng trước hết bạn cần phải kiểm tra , nếu như tên Widget không tồn tại thì sẽ hiển thị tên mặc định mà bạn đã gán vào cho nó.

1	$widget_name = (empty($widget_name)) ? 'Laptrinhweb Widget' : $widget_name;

Bạn nào đã học qua PHP thì không lăn tăn về vấn đề này hen, tôi sẽ không giải thích vì nó thuộc kiến thức bắt buộc bạn phải biết.

Tôi bọc phần giá trị sắp lấy ra trong cặp thẻ ul , li và cho nó 2 cái nhãn là Title , Slogan.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16	public function widget( $args, $instance ) { extract($args); $widget_name = (empty($widget_name)) ? 'Laptrinhweb Widget' : $widget_name; $title = $instance['title']; $slogan = $instance['slogan']; echo $before_widget; echo $before_title. $widget_name . $after_title; echo $after_widget; echo '<ul>'; echo '<li>Title: ' . $title .'</li>'; echo '<li>Slogan: ' . $slogan . '</li>'; echo '</ul>'; }

Tôi khởi tạo 2 biến $title , $slogan tương ứng với giá trị dữ liệu từ biến $instance chứa giá trị mảng dữ liệu được lấy ra từ table wp_options.

widget-kenshin-widget-complete

Như bạn thấy đấy chỉ với vỏn vẹn 4 phương thức thì tôi vừa hướng dẫn bạn tạo mới một Widget đơn giản, bao gồm khai báo tên Widget, nhúng dữ liệu vào database và hiển thi dữ liệu vào vùng Widget ở trang chủ.

3/ Kết bài

Vấn đề về Widget API vẫn chưa dừng lại ở đó, nhưng tôi chỉ hướng dẫn bạn ở mức căn bản chứ không thể tài nào hướng dẫn cặn kẽ được hơn. Do đó bạn cần phải tự nghiên cứu thêm để tạo ra các Widget mới nhầm phục vụ nhu cầu website của bạn. Bạn cần lưu tâm rằng với một plugin bất kì nào đó bạn sẽ phải tạo ra nhiều Widget, và đó là lý do bạn cần phải nắm vững toàn bộ kiến thức Widget được gói gọn trong 3 bài mà tôi đã trình bày. Như vậy kết thúc bài Sử dụng phương thức update & widget trong Widget API, thì bạn đã biết cách sử dụng thành thạo 2 phương thức trên để thực hiện các thao tác như cập nhật dữ liệu vào database và hiển thị Widget ra trang chủ một cách dễ dàng mà không cần phải sử dụng thêm bất kì plugin nào khác từ phía ngoài.

Series Navigation<< Tạo mới WordPress Widget đơn giảnTương tác với WordPress database >>

Nguồn: laptrinhweb.org