Cách thêm lời chứng thực thông tin về các công cụ trong chủ đề WordPress

Trước đây, chúng tôi đã chỉ cho bạn cách thêm lời chứng thực xoay vòng trong WordPress. Bằng cách tạo trang chủ mới cho các video WordPress của WPBeginner, chúng tôi đã lấy cảm hứng từ một thứ mà chúng tôi đã thấy StudioPress làm trong một thời gian. Đó là hiển thị lời chứng thực trong một chú giải công cụ khi người dùng di chuyển qua một bức ảnh. Kỹ thuật này đang trở thành một tiêu chuẩn công nghiệp bởi vì chúng tôi cũng đã thấy những người khác sử dụng nó. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách thêm công cụ bật lên trong WordPress.

Điểm cuối cùng

Đây là những gì sản phẩm cuối cùng sẽ trông như thế nào. Nếu bạn di chuột qua ảnh của một người, lời chứng thực của chú giải công cụ sẽ được hiển thị. Bạn có thể xem bản demo trực tiếp tại đây. Tuy nhiên, bài viết này có thể sẽ tồn tại trong bản demo trực tiếp, vì vậy tôi đã đính kèm một ảnh chụp màn hình bên dưới:

Lời chứng thực về thông tin về các công cụ trong WordPress

Lý lịch:

Dựa trên những gì chúng ta đã nghe từ các chuyên gia trong ngành, hiển thị khuôn mặt người nổi bật có xu hướng thêm cảm giác cá nhân vào trang. Đây là lý do tại sao chúng tôi muốn đi tuyến đường này. Chúng tôi đã thực hiện một tìm kiếm đơn giản trên Google để tìm bài viết của Loren Nason. Trong đó, về cơ bản, ông đã nhấn mạnh mã mà StudioPress đang sử dụng. Phần tốt nhất của StudioPress là hỗ trợ của nó. Như Loren đã mô tả, khi anh hỏi Brian Gardner về cách anh tạo ra những lời chứng thực trên trang web của mình, Brian chỉ cần gửi một tệp ví dụ.

Vấn đề lớn nhất là họ chỉ đơn giản mã hóa hàm vào mẫu của họ. Mặc dù điều này sẽ hoạt động tốt cho các nhà phát triển của chúng tôi, nhưng nó không phải là một giải pháp lý tưởng nếu bạn bàn giao trang web cho khách hàng? Chúng tôi muốn có một giải pháp trong đó chúng tôi cung cấp cho khách hàng khả năng thêm / xóa lời chứng thực theo ý muốn. Đó là lý do tại sao chúng tôi quyết định sử dụng Loại bài đăng và metafield tùy chỉnh để thực hiện việc này cùng với jQuery.

Các loại bài đăng tùy chỉnh và biểu đồ meta

Chúng tôi cần khách hàng có khả năng thực hiện những điều sau:

  • Thêm ảnh người dùng (hình thu nhỏ)
  • Thêm tên người dùng (tiêu đề bài viết)
  • Thêm văn bản chứng thực (nội dung thư)
  • Vị trí khách hàng trong công ty (trường tùy chỉnh hoặc hộp mục tiêu)

Điều đầu tiên chúng tôi làm là thêm một loại bài đăng tùy chỉnh được gọi là Lời chứng thực giúp chúng tôi có mọi thứ trừ một lĩnh vực (vị trí khách hàng / công ty). Tùy thuộc vào việc bạn muốn thêm hộp meta tùy chỉnh hay khách hàng của bạn sử dụng các trường tùy chỉnh. Chúng tôi nói rằng đừng lười biếng và mang đến cho khách hàng của chúng tôi trải nghiệm tuyệt vời, ngay cả khi nó yêu cầu thêm một số dòng mã bổ sung.

Tất cả những gì bạn phải làm là lấy mã sau đây và lưu nó vào một tệp php trống có tên tooltip-testimonials.php hoặc bất kỳ tên nào khác vì lý do đó.

Esto nos dará la configuración básica de WordPress con la que necesitamos comenzar. Ahora, debe comenzar a agregar algunos testimonios para poder mostrarlos. Recapitulemos a dónde va cada elemento.

  • Thêm ảnh người dùng (hình thu nhỏ / hình ảnh nổi bật). Chúng tôi có cấu hình để thay đổi kích thước của nó trong 96 x 96px. Luôn luôn tốt hơn để theo tỷ lệ đó.
  • Thêm tên người dùng (tiêu đề bài viết)
  • Thêm văn bản chứng thực (nội dung thư)
  • Vị trí của khách hàng trong công ty (trong một hộp meta thông tin chứng thực)

Hiển thị trong chủ đề

Lời chứng thực của Tooltip chủ yếu dành cho các chủ đề tùy chỉnh, vì vậy, nó sẽ yêu cầu bạn làm bẩn tay với một chút chỉnh sửa chủ đề. Vì mỗi chủ đề có kích thước, cách phối màu và kiểu dáng khác nhau, chúng tôi đã quyết định khởi chạy nó dưới dạng hướng dẫn thay vì plugin. Dưới đây là những gì chúng tôi sẽ làm để giới thiệu lời chứng thực của tooltip trong chủ đề WordPress của bạn:

  • Thêm mã jQuery tùy chỉnh trong chủ đề.
  • Tạo một vòng lặp tùy chỉnh hiển thị lời chứng thực trong cấu trúc mà chúng ta muốn.
  • Thêm một số CSS cơ bản để làm cho nó trông đẹp

Điều đầu tiên cần làm là sao chép và dán mã jQuery sau đây và lưu nó vào một tệp trống có tên là tooltip-testimonials.js:

jQuery(document).ready(function(){
     
    jQuery("#testimonials imgHow to Add Tooltip Testimonials in WordPress Themes").tooltip({
 
       // tweak the position
       offset: [0, 0],
     
       // use the "slide" effect
       effect: 'slide'
     
    // add dynamic plugin with optional configuration for bottom edge
    }).dynamic({ bottom: { direction: 'down', bounce: true } });
     
});

Khi bạn đã thực hiện điều đó, chúng ta nên tải tệp này vào tiêu đề của chủ đề. Bạn có thể chọn thực hiện việc này một cách thủ công bằng cách chỉnh sửa tệp header.php và dán mã tập lệnh vào vùng tiêu đề của bạn hoặc làm theo các thực tiễn tốt nhất của WP và sử dụng chức năng wp_enqueue_script. Hãy tiếp tục và tải tệp tooltip-testimonials.js của chúng tôi vào thư mục script của chủ đề. Nếu nó không tồn tại, chỉ cần tạo một thư mục gọi là script.

Thêm mã sau vào tệp tin.php của chủ đề của bạn:

add_action('wp_enqueue_scripts', 'tooltip_enqueue_scripts');
function tooltip_enqueue_scripts() {
if (!is_admin()) {
    wp_register_script('jquery_tools', 'http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js?ver=3.4.2', 'jquery', '3.4.2', true);
        wp_enqueue_script('jquery_tools');
 
    wp_register_script('tooltip', get_stylesheet_directory_uri() . '/scripts/tooltip-testimonials.js', 'jquery', '1', true);
        wp_enqueue_script('tooltip');
}
}

Bây giờ chúng ta đã có, hãy tạo một vòng lặp tùy chỉnh cho phép chúng ta hiển thị các lời chứng thực của chú giải công cụ này với hình ảnh người dùng ở định dạng dựa trên lưới. Mở tệp mà bạn muốn những lời chứng thực này xuất hiện. Cho dù đó là thanh bên, trang chủ của bạn hoặc bất cứ nơi nào bạn muốn. Sau đó dán vòng lặp sau:









Mã vòng lặp ở trên sẽ hiển thị 6 các yếu tố trên trang. Bạn có thể thiết kế chúng theo ý muốn. Bạn thậm chí có thể thêm orderby = rand nếu bạn có cộng hoặc trừ 20 lời chứng thực. Có thể có 6 hiển thị ngẫu nhiên.

Bây giờ, hãy thêm một số kiểu CSS để làm cho nó trông đẹp hơn. Dưới đây là một ví dụ về CSS mà chúng tôi sử dụng. Bạn có thể cần phải điều chỉnh nó dựa trên phong cách chủ đề, cách phối màu, v.v.

#testimonials .testimonials{width: 116px; float: left; margin: 35px 30px 0 0;}

#testimonials .center{text-align: center; margin: 0px 0 15px;; padding: 0px;}

#testimonials .center img{box-shadow: 0px 2px 2px #d2d2d2; -moz-box-shadow: 0px 2px 2px #d2d2d2; -webkit-box-shadow: 0px 2px 2px #d2d2d2; border: 3px solid #fff;}

#testimonials .testimonials-title{font-size: 14px; font-weight: 700; text-align: center; margin: 3px 0 0; padding: 0px;}

#testimonials .company{font-size: 12px; font-style: italic; text-align: center; margin: 0px; padding: 0px;}

#testimonials .tooltip {background: #111; color: #fff; width: 200px; padding: 20px; margin: 0 5px 20px;}

Kết thúc:

Chúng tôi hy vọng bài viết này giúp bạn thêm lời chứng thực tooltip vào chủ đề WordPress của bạn. Đây là một ví dụ rất cơ bản. Như đã đề cập trước đó, bạn luôn có thể điều chỉnh các đối số wp_query để có thứ tự chứng thực ngẫu nhiên. Bạn cũng có thể sử dụng trình cắm Thứ tự loại bài để cho phép khách hàng của bạn xác định đơn hàng với giao diện kéo và thả dễ dàng.

Nếu bạn có bất kỳ câu hỏi hoặc đề nghị, xin vui lòng để lại nhận xét bên dưới.