Plugin chèn Hỗ Trợ Trực Tuyến Yahoo Skype vào WordPress

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Plugin chèn Hỗ Trợ Trực Tuyến Yahoo Skype vào WordPress Sau một thời gian tìm hiểu wordpress, Hoangweb.com đã cho ra mắt Plugin hỗ trợ trực tuyến cho WordPress có tên Yahoo and Skype Status.

Hỗ trợ trực tuyến là công cụ đầy sức mạnh giúp bạn níu giữ một lượng khách hàng lớn qua nhiều kênh tham vấn kể cả Số điện thoại liên hệ, email, fax trong đó có dịch vụ chat như yahoo, skype..
Hoặc tiện ích box chat trực diện không yêu cầu người sử dụng có tài khoản IM, ví dụ liveagent, Zopim, olark. Những công cụ này coi là “Help desk software”. Trong blog mình đã có bài viết chỉ dẫn chi tiết cách tích hợp dịch vụ bổ trợ chat với olark.

Tuy nhiên thêm một widget, để lại thông tin SĐT, email và Nick chat yahoo, skype vẫn không thể thiếu trên một website tham vấn dịch vụ.
wordpress plugin hỗ trợ trực tuyến

Plugin bổ trợ trực tuyến cho WordPress

Sau khi tìm hiểu wordpress plugins, TopVn Ltd đã lập trình và thiết kế plugin bổ trợ trực tuyến cho WordPress  có tên Yahoo and Skype Status hỗ trợ 2 dịch vụ yahoo+skype. Để tạo giao diện tốt hơn bản gốc các bạn cũng có thể có thể tùy biến thêm code, vào plugin này. Ví dụ tiếp theo sau đây, mình sẽ thêm tính năng lựa chọn giao diện.

Bạn tải plugin gốc tại https://wordpress.org/plugins/hw-yahoo-skype-status-pro/

Tạo class sử lý giao diện

Chúng ta cần một class quản lý giao diện skin, cho plugin yahoo and skype status . Mỗi một giao diện được thiết kế vào một folder trong đó có file gọi chính có mở rộng .php và các files sử dụng thêm như .js, .css
Tạo hw_skin.php trong thư mục plugin với nội dung sau:

   skin_folder=$skin_folder; //skin folder if($skin_name) $this-> skin_name=$skin_name; //skin name if(is_dir($default_skin_path)) $this-> default_skin_path=$default_skin_path;//plugin_dir_path(__FILE__).'/skName'] == '' ) $temp_skin['name'] = basename( dirname( $skin ) ); else $temp_skin['name'] = $skin_data['Name']; $temp_skin['path'] = basename(dirname( $skin ));//_print(basename(dirname( $skin ))); $temp_skin['description'] = $skin_data['Description']; $skins[] = $temp_skin; } } } catch ( UnexpectedValueException $e ) { } return $skins; } //get full skins public function myskins(){ //skin $skins = array(); //default skin $skins[] = array( 'name' =>  __( 'Default Skin','hoangwebtheme' ), 'path' =>  'default', 'description' =>  '' ); $skins = $this-> get_skins( $skins ); return $skins; } public function get_skin_file(){ return $this-> get_skin_path() . $this-> skin_name; } public function get_active_skin() { if(!is_dir($this-> active_skin)) $this-> active_skin=WP_CONTENT_DIR.'/'.$this-> skin_folder.'/'.trim(trim($this-> active_skin,'/'),'\').'/'; return $this-> active_skin; } public function get_skin_path() { $skin = $this-> get_active_skin(); $default_skin = $this-> default_skin_path . DIRECTORY_SEPARATOR . 'default' . DIRECTORY_SEPARATOR; if ( $skin == 'default' || ! $this-> validate_skin() ) return $default_skin; return $skin; } public function set_active_skin( $skin_path ) { if ( self::is_default_skin( $skin_path ) ) { $this-> active_skin = $skin_path; return; } if ( mb_substr( $skin_path, -1 ) !== DIRECTORY_SEPARATOR ) $skin_path .= DIRECTORY_SEPARATOR; $this-> active_skin = $skin_path; } private function validate_skin( $skin = NULL ) { if ( ! $skin ) $skin = $this-> get_active_skin(); if ( self::is_default_skin( $skin ) ) return TRUE; if ( ! file_exists( $skin . $this-> skin_name ) ) return FALSE; return TRUE; } public static function is_default_skin( $skin ) { $default_skins = array( 'default' ); if ( in_array( $skin , $default_skins ) ) return TRUE; return FALSE; } } ?>   

Chúng ta tạo trước sẵn Skin mặc định mang tên “default” nằm ở phía trong thư mục /skins/ của folder plugin. Tuy nhiên có thể di chuyển folder skin mặc định ở nơi khác. Tham khảo default skin cũng có thể có thể gồm các files trong đính kèm: Tải demo default skin.
Lấy bản kê skins thông qua việc duyệt các folders sử dụng class RecursiveDirectoryIterator . Biến $skin_name lưu tên file skin là tên file gồm đuôi mở rộng, với mỗi plugin bạn có thể đặt tên khác nhau để phân biệt và tránh nhầm lẫn. Ví dụ: nếu file skin của bạn là “yahooskype.php” thì tên file skin là “yahooskype.php”.

Tên skin hiển thị trong bản kê chọn skins, chúng ta sẽ lấy theo cấu trúc thông tin của plugin. Khai báo thông tin skin giống cách lấy thông tin của plugin trong wordpress như sau.

 /* Plugin Name: My Skin Plugin URI: http://hoangweb.com Description:   Display Yahoo or Skype status   on the web. After active this plugin please goto   Appearance   -->    Widgets   -->  drang   Yahoo and Skype status   to your sidebar. If you have trouble? */  

Chuỗi khai báo vào Plugin Name sẽ thay cho tên skin, giống thế này.
skins-picker

Nếu không cung cấp tên skin, mặc định sẽ lấy tên folder chứa file skin làm tên skin.
skin-name-picker1

Tích hợp tính năng quản lý giao diện cho plugin

Sau khi lướt qua đoạn code quản lý giao diện ở trên, quá trình kế đến là bạn tùy biến code plugin tách phần HTML hiển thị giao diện ra file skin.

Khởi tạo HW_SKIN

Thêm dòng này vào file đầu vào của plugin /yahoo-and-skype-status/yahooskype.php .

 include("hw_skin.php"); class Yahoo_Skype_status extends WP_Widget { ...  

Tạo instance quản lý giao diện mới “HW_SKIN” cho plugin, chúng ta thêm các dòng sau vào constructor.

 //instance skin $this-> skin=new HW_SKIN('hw_yahooskype','yahooskype.php',plugin_dir_path(__FILE__).'/skyahooskype.php'; $this-> skin-> skin_folder='hw_yahooskype';  

Các tham số tái tạo HW_SKIN theo thứ tự:

 new HW_SKIN($skin_folder='',$skin_name='',$default_skin_path='');  
  • $skin_folder=”hw_yahooskype”: tham số trước mắt là tên folder skin, như tôi đã nói mỗi một skin đại diện cho 1 folder riêng, tạo thư mục này trong wp-content/
  • $skin_name=”yahooskype.php”: tên skin
  • $default_skin_path=plugin_dir_path(__FILE__).’/skins’: khai báo thư mục chứa folder skin mặc định. Folder skin “default” sẽ tạo vào trong thư mục này.

Lưu instance vào biến $this-> skin . Các biến trong class HW_SKIN mình để mở (publish), nên có thể truy cập và sửa lại thông tin từ biến $skin .

 $this-> skin-> skin_name='yahooskype.php'; $this-> skin-> skin_folder='hw_yahooskype';  

Tạo danh sách skins

Tạo thêm trường skin, trường này hiển thị mọi thứ các skins có trong $skin_folder với giao diện thẻ lựa chọn Select .
Tạo trường mới sau field tiêu đề widget. Sửa lại hàm form($instance)

   skin-> myskins(); $active_skin=$instance['skin']; ?>  ..  

<label for=" get_field_id("skin"); ?> "> : <select name=" get_field_name('skin'); ?> " > get_field_id("skin"); ?> "> <option value=" " no numeric noise key 1041>

...

Kích hoạt và lưu skin

Tất cả mọi fields thiết lập trên widget sẽ tự động lưu lại, sau khi nhấn nút Save changes tại giao diện sửa cấu hình widget trong admin. Chọn skin sử dụng cho widget yahoo and skype status bấm vào Save Changes, hàm function update($new_instance, $old_instance) sẽ tự động lưu lại các tin tức này trong database. Giữ nguyên hàm update chẳng cần sừa gì thêm.

Sử dụng và hiển thị skin

Tiếp theo, đến hàm hiển thị nội dung widget “yahoo and skype status”. Xóa toàn bộ nội dung của hàm widget($args, $instance) và chèn vào nội dung dưới đây:

 function widget($args, $instance) { extract( $args ); //by hoangweb.com $this-> skin-> set_active_skin(empty($instance['skin'])? 'default':$instance['skin']); $nums=$this-> _number; //load skin $file=$this-> skin-> get_skin_file(); if(file_exists($file)) include($file); }  

Lấy file skin trong thư mục skin đã kích hoạt trong widget admin, tên skin ngày nay lấy bởi $instance['skin'] . Kích hoạt skin trước lúc sử dụng với phương thức $this-> skin-> set_active_skin . Để thừa kế các biến trong mảng $args , chúng ta nhúng trực diện file skin vào hàm widget sử dụng hàm include .
Mình đã trình bầy xong ý tưởng, các bạn tải code plugin với tính năng skins phía trên tại đây.

Hướng dẫn sử dụng

Tải và kích hoạt plugin bạn vừa tải ở link trên, truy cập Appearance-> Widget và kéo widget có tên Yahoo and Skype status vào sidebar.
yahoo-skype-status-widget

Nhập các nickname bằng tài khoản yahoo, skype + điền tên và số điện thoại cho người hỗ trợ. Tối đa được 10 nhân viên tư vấn. Nếu muốn nhiều hơn bạn sửa lại biến $_number trong file plugins/yahoo-and-skype-status/yahooskype.php, nhưng mình nghĩ từng này là thừa có khác.
yahoo-and-skype-status-widget

Tạo folder “hw_yahooskype” trong wp-content nếu chưa có. Tiếp tục, tạo thư mục skin lưu ý: tên folder không được chứa dấu cách, ký tự UTF-8. Ví dụ: “hoangweb”. Sau đó tạo file skin yahooskype.php chứa trong thư mục skin này. Bạn chép nội dung hiển thị của widget trên frontend tại hàm widget trong file plugin gốc, vào file skin /wp-content/hw_yahooskype/hoangweb/yahooskype.php .

Hiển thị nhiều nick cho 1 người tư vấn

Một chuyên viên tham mưu cũng có thể online nhiều tài khoản như yahoo và skype, do bất cập này mình đã viết ra một quãng code giúp hiển thị nhiều nick cho 1 người. Chép code sau thay thế code trước trong file skin.
yahooskype.php

  <?php /* Plugin Name: My Skin */ echo $before_widget; echo $before_title .$instance["title"]. $after_title; echo "  "; $data=array(); $count_colspans=array(); for($i=1;$i  $inst){ $nickcount=0; $count=0; ?>      <td style="text-align:center;" colspan="  ">             <?php } echo " 
"; echo $after_widget; ?>

Bạn sẽ phải nhập trùng tên cho một người với nhiều nicks.
Kết quả:
support-online-widget-wp

Tác giả: hoangweb.com

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng phương pháp đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng cũng đều có thể theo dõi blog này trên Twitter và Facebook

Bài viết Plugin chèn Hỗ Trợ Trực Tuyến Yahoo Skype vào 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