Hiển thị ý kiến nhận xét của khách hàng đối với sản phẩm và dịch vụ là điều không thể thiếu trong mỗi trang Web. Điều đó tạo cũng cố sự tin tưởng của khách hàng đối với sản phẩm & dịch vụ. Vì vậy khi thiết kế website đây là phần mà doanh nghiệp thường hay quan tâm, đề cập cần có trong Website.

Trong phạm vi Tutorial mình cố gắng code sao cho tối ưu trong phần quản trị đơn giản và nhẹ nhàng nhất, sử dụng FlexSlider jQuery tạo hiệu ứng thân thiện, hiển thị nội dung thông qua shortcode. Điều này giúp người dùng dù không biết về lập trình trở nên dễ dàng sử dụng.

10479849_580936938685567_479288097_o

#Phần 1: Cài đặt và sử dụng

Nếu bạn không phải là wordpress developer thì bạn có thể tải về và cài đặt nó ngay mục Source code phía tay trái của bạn.Hoặc các bạn có thể vào tham khảo demo trước.

1. Giải nén file bạn vừa Download vào thư mục Plugin của WordPress: wp-content/plugins

2. Vào wp-admin > Plugins > Testimonial Sliders > Activate

Testimonial-Sliders-1

3. Sau khi Activate, Thanh Menu bên trái xuất hiện Testimonials như sau. Bạn Click Add New để tạo các Ý kiến nhận xét của khách hàng

Testimonial-Sliders-2

Kéo xuống cuối bài Post phần này hiển Thông tin thêm từ khách hàng như Công ty hoặc Chức vụ, Website

Testimonial-Sliders-3

4. Copy và Paste Shortcodes sau tại nơi mà bạn muốn hiển thị

[testimonials rand=0 max=5]

#Phần 2: Tự xây dựng plugin Testimonial cho riêng mình

Nếu bạn là một wordpress developer thì cách xây dựng một plugin của riêng mình rất thú vị. Trong phần 2 này, tôi sẽ hướng dẫn các bạn từng bước để xây dựng plugin Testimonial.

Khai báo plugin

Plugin Testimonials with FlexSlider gồm có những file sau, mình giới thiệu đầu để mọi người dễ hình dung:

Trong wp-content/plugins bạn tạo thư mục testimonialslider (Plugin mà chung ta sắp tạo ra), chứa 1 file testimonialplugin.php và 2 folder css và js

Huong-dan-tao-Testimonial-Sliders-1

Trong Folder css có thêm các Folder và file:

Huong-dan-tao-Testimonial-Sliders-2

Trong folder js có thêm các file:

Huong-dan-tao-Testimonial-Sliders-3

Okei, giờ thì mình bắt đầu tạo Plugin: tạo file testimonialplugin.php và gõ code chứa các thông tin cơ bản nhất về Plugin:

<?php

/*
    Plugin Name: Testimonial Sliders
    Description: Testimonials with FlexSlide
    Author: LoiBinKy
    Version: 2.2.0
*/

//enqueueing scripts and styles
function plugin_scripts(){
    wp_enqueue_script('jquery');
    wp_enqueue_script('flexslider', plugins_url( 'js/jquery.flexslider-min.js' , __FILE__ ), array('jquery'), '2.2', false);
    wp_enqueue_script('testimonials', plugins_url( 'js/testimonials.js' , __FILE__ ), array('jquery'), '2.2.0', false);
    wp_enqueue_style('flexsliderCSS', plugins_url( 'css/flexslider.css' , __FILE__ ), false, '2.2', 'all' );
    wp_enqueue_style('testimonialsCSS', plugins_url( 'css/testimonials.css' , __FILE__ ), false, '1.0', 'all' );
}
add_action("wp_enqueue_scripts","plugin_scripts");

?>

1. Phần đầu bạn khai báo những thông tin cơ bản của Plugin (Name, Author, Description, Version) Bạn cần tìm hiểu thêm thông tin này thì tham khảo thêm ở trang Codex ( Plugins section of the WordPress Codex )

2. Function Khai báo với WordPress include những scripts của plugin. Trong đó wp_enqueue_scripts để hook các file scripts lên head của trang post or pages cần hiển thị.

Tạo custom post type

Mặc định thì WordPress có 2 kiểu phổ biến là pages posts. Nhung trong Post có nhiều post types khác nhau, hiểu đơn giản mỗi Post type chứa những dữ liệu khác nhau mà bạn cần lưu trữ. Và để tạo các Post Type ta khai báo như sau:

/create the Custom Post Type
function testimonials_init() {
    $args = array(
        'public' => true,
    	'labels' => array(
                'name' => __( 'Testimonials' ),
                'singular_name' => __( 'Testimonial' )
            ),
        'supports' => array(
            'title',
            'editor',
            'thumbnail',
            'custom-fields'
        ),
		'hierarchical' => false
    );
    register_post_type('testimonials', $args);
}

add_action('init', 'testimonials_init');

//create the Custom Fields
function set_testimonial_custom_fields($post_id) {
    if ( $_GET['post_type'] == 'testimonials' ) {

        add_post_meta($post_id, 'Client Name', '', true);
        add_post_meta($post_id, 'Link', '', true);

    }

    return true;
}

add_action('wp_insert_post', 'set_testimonial_custom_fields');

1. Function register_post_type khai báo lưu trữ dữ liệu Name là ‘Testimonials’, mỗi Post type có ‘title, editor, thumbnail, custom-fields’. ‘hierarchical’ => false khai báo không có kiểu thư mục cha chứa Post type con.

2. Function set_testimonial_custom_fields sử dụng add_post_meta() tạo thêm 2 Custom Fields có tên ‘Client Name’ và ‘Link’ , nếu muốn bạn có thể tạo thêm nhiều Custom Fields khác để chứa các thông tin.

Tạo shortcode

Bây giờ, để đơn giản cho người dùng chúng ta tạo chức năng shortcode.

//registering the shortcode to show testimonials
function load_testimonials($a){

	$args = array(
		"post_type" => "testimonials"
	);

	if( isset( $a['rand'] ) && $a['rand'] == true ) {
		$args['orderby'] = 'rand';
	}
	if( isset( $a['max'] ) ) {
		$args['posts_per_page'] = (int) $a['max'];
	}
	//getting all testimonials
	$posts = get_posts($args);

    //Displaying the Testimonials
	echo '<div class="flexslider">';
		echo '<ul class="slides">';

		foreach($posts as $post){
			//getting thumb image
			$url_thumb = wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID));
			$link = get_url($post);
            $client_name_value = get_post_meta($post->ID, 'Client Name', true);
			echo '<li>';
				if ( ! empty( $url_thumb ) ) { echo '<img class="post_thumb" src="'.$url_thumb.'" height="250" width="300" />'; }
				echo '<h2>'.$post->post_title.'</h2><div class="testimonial-author">'.$client_name_value.'</div>';
				if ( ! empty( $post->post_content ) ) { echo '<p>'.$post->post_content.'<br />'; }
			echo '</li>';
		}

		echo '</ul>';
	echo '</div>';
}
add_shortcode("testimonials","load_testimonials");

add_filter('widget_text', 'do_shortcode');

1. Chức năng Shortcode ở đây tạo ra shortcode có tên là “testimonials”

+ Orderby =>rand dể khai báo rand khi sử dụng Shortcode { rand = 0 => không random các Post (Post type), còn khi rand=1 => Random các Post (Post type) }
+ Posts_per_page { Số Post cho phép hiển thị }

Ví dụ:

[testimonials rand=0 max=5]

2. Code HTML hiển thị Testimonials phẩn sau dòng //Displaying the Testimonials là phần hiển thị nội dung của các Post type mà chúng ta tạo ở trên.

Làm đẹp với CSS

Trong Folder css bạn tạo file testimonials.css và coppy đoạn css sau:

.flexslider {
    padding: 10px 20px;
}
.flexslider p:before {
	display: block;
	float: left;
	margin: -60px 10px 60px 0;
	font-size: 100px;
	content: "“";
	color: #bababa;
	text-shadow: 0 1px 1px #909090;
	font-family: Times New Roman;
}
.flexslider p {
	font-size: 12px;
}
.flexslider img {
	float: left;
	margin-right: 15px;
	box-shadow: none ! important;
}
body .flexslider h2 {
	margin-top: 0;
	clear: none;
}
.flexslider ul, .flexslider .flex-direction-nav {
	list-style-type: none;
}

.flexslider .slides  li {
	margin: 0 1px -90px 0;
}

body .flex-control-nav {
	bottom: -10px;
}

Như vậy là bạn có thể tự tạo cho mình một Testimonials Plugin with FlexSlider hiển thị ý kiến khách hàng với code đơn giãn không ảnh hưởng nhiều tốc dộ load site và người dùng dễ dàng sử dụng.

Bạn có thấy chủ dề này thế nào? Hãy để lại Comment, bất cứ điều gì đều cũng có thể giúp mình có ý tưởng bổ sung giúp cho chủ đề này hoàn thiện hơn.