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 tư vấn bao gồm 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 tiếp không yêu cầu người dùng có tài khoản IM, ví dụ liveagent, Zopim, olark. Những công cụ này gọi là “Help desk software”. Trong blog mình đã có bài viết hướng dẫn chi tiết cách tích hợp dịch vụ hỗ 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 tư vấn dịch vụ.

Plugin hỗ trợ trực tuyến cho WordPress

Sau khi tìm hiểu wordpress plugins, Hoangweb Ltd đã lập trình và thiết kế plugin hỗ 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ó 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:

<?php
class HW_SKIN{
	public $skin_folder;
	public $skin_name;
	private $active_skin;		//active skin
	public $default_skin_path;	//skin folder inside some plugin
	
	function __construct($skin_folder='',$skin_name='',$default_skin_path=''){
		if($skin_folder) $this->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__).'/skins';
	}
	public function get_skins( $skins = null) {

		//return the skins from the wp-content/wspsc_hw_skins directory

		if ( !$skins )
			$skins = array();

		$skins_dir_path = WP_CONTENT_DIR .
			DIRECTORY_SEPARATOR . $this->skin_folder ;

		try {
			$skins_iterator = new RecursiveDirectoryIterator( $skins_dir_path );

			foreach ( new RecursiveIteratorIterator( $skins_iterator ) as $skin ) {
				
				if ( basename( $skin ) == $this->skin_name) {

					$skin_data = get_plugin_data( $skin );

					$temp_skin = array();

					if ( $skin_data['Name'] == ''  )
						$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 có tên “default” nằm 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ó thể gồm các files trong đính kèm: Tải demo default skin.
Lấy danh sách 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 danh sách 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: <strong>Display Yahoo or Skype status</strong> on the web. After active this plugin please goto <strong>Appearance</strong> --> <strong>Widgets</strong> --> drang <strong>Yahoo and Skype status</strong> to your sidebar. If you have trouble?</a>
*/

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

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.

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, công đoạn tiếp theo 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__).'/skins');
$this->skin->skin_name='yahooskype.php';
$this->skin->skin_folder='hw_yahooskype';

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

new HW_SKIN($skin_folder='',$skin_name='',$default_skin_path='');

$skin_folder=”hw_yahooskype”: tham số đầu tiên là tên folder skin, như mình đã nói mỗi một skin đại diện cho một 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ị tất cả 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)

<?php
function form($instance) {
	$skins=$this->skin->myskins();
	$active_skin=$instance['skin'];
	?>
	..
	<!-- by hoangweb -->
	<p>
		<label for="<?php echo $this->get_field_id("skin"); ?>">
			<strong><?php _e( 'Skin' ); ?>:</strong>
			<select class="widefat" name="<?php echo $this->get_field_name('skin'); ?>" id="<?php echo $this->get_field_id("skin"); ?>">
				
				<?php foreach ( $skins as $skin ): ?>
					<option value="<?php echo $skin['path'] ?>" <?php selected( $skin['path'], $active_skin ) ?>><?php echo $skin['name'] ?></option>
				<?php endforeach; ?>
				
			</select>
		</label>
	</p>
	...
	<?php
}
?>

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 nhấn vào Save Changes, hàm function update($new_instance, $old_instance) sẽ tự động lưu lại các thông tin này trong database. Giữ nguyên hàm update khô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 hiện tại lấy bởi $instance['skin']. Kích hoạt skin trước khi sử dụng với phương thức $this->skin->set_active_skin. Để kế thừa các biến trong mảng $args, chúng ta nhúng trực tiếp 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 ở 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.

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.

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 một người tư vấn

Một nhân viên tư vấn 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 đoạn code giúp hiển thị nhiều nick cho một 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 "<table class='support-online' border='1'>";
$data=array();
$count_colspans=array();
for($i=1;$i<= $nums;$i++){
	if(!empty($instance["nick_".$i])){
		$count_colspans[$instance['nick_type_'.$i]]=1;
		
		$instance['id']=$i;
		if(!isset($data[$instance['phone_'.$i]])) $data[$instance['phone_'.$i]]=array_merge(array(),$instance);
		
		if(!isset($data[$instance['phone_'.$i]]['services'])){
			$data[$instance['phone_'.$i]]['services']=array();
		}
		$data[$instance['phone_'.$i]]['services'][$instance['nick_type_'.$i]]=1;
		$data[$instance['phone_'.$i]][$instance['nick_type_'.$i]]=$instance;
	}
}
foreach($data as $phone=>$inst){
	
				$nickcount=0;
				$count=0;
				?>
			<tr>
				<td valign="middle"><strong><?php echo $inst["nick_name_".$inst['id']]?></strong></td>
				<?php foreach($inst["services"] as $type=>$null):
					$count++;
					$id=$inst[$type]['id'];
				?>
				<?php if(/*isset($inst['yahoo']) */$type=='yahoo'){
					$nickcount++;
				?>
				<td <?php if(count($inst["services"])==$count && (count($count_colspans)-$nickcount)!=0) echo 'colspan="'.(count($count_colspans)-$nickcount+1).'"';?> valign="middle">
				<a class="seoquake-nofollow" href="ymsgr:sendim?<?php echo $inst[$type]["nick_".$id]?>" rel="nofollow"><img border="0" class="" src="http://opi.yahoo.com/online?u=<?php echo $inst[$type]["nick_".$id]?>&g=m&t=<?php echo $inst[$type]["yahoo_status_type_".$id]?>" alt="<?php echo $inst[$type]["nick_name_".$id]?>" border="0" /></a>
				</td>
				<?php }?>
				
				
				<?php if(/*isset($inst['skype'])*/$type=="skype"){
					$nickcount++;
				?>
				<td <?php if(count($inst["services"])==$count && (count($count_colspans)-$nickcount)!=0) echo 'colspan="'.(count($count_colspans)-$nickcount+1).'"';?>>
				<a class="seoquake-nofollow" href="skype:<?php echo $inst[$type]["nick_".$id]?>?call" title="Talk with me via Skype " rel="nofollow"><img border="0" class="" src="http://mystatus.skype.com/<?php echo $inst[$type]["skype_status_type_".$id].'/'.$inst[$type]["nick_".$id]?>" alt="<?php echo $inst[$type]["nick_name_".$id]?>" border="0" /></a>
				</td>
				<?php }?>
				<?php endforeach;?>
			</tr>
			<tr>
				<td style="text-align:center;" colspan="<?php echo count($count_colspans)+1; //echo $nickcount+1?>"><span style="color: #ff0000;"><strong><?php echo $phone?></strong></span></td>
			</tr>
	<?php	
			
}
echo "</table>";
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ả:

Tác giả: hoangweb.com

Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng có thể nhận được sự trợ giúp trên Twitter và Facebook

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

Plugin hỗ trợ trực tuyến cho WordPress

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

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

Khởi tạo HW_SKIN

Tạo danh sách skins

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

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

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

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

HOÀNG WEB

SẢN PHẨM

LIÊN KẾT

Plugin hỗ trợ trực tuyến cho WordPress

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

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

Khởi tạo HW_SKIN

Tạo danh sách skins

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

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

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

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

HOÀNG WEB

KẾT NỐI VỚI TÔI

SẢN PHẨM

LIÊN KẾT