Trước đây, chúng tôi đã chỉ cho bạn cách thêm các câu lệnh xoay vòng vào WordPress. Bằng cách tạo trang web mới cho 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. Nó cho thấy lời chứng thực trong một tooltip khi người dùng di chuyển qua một bức ảnh. Công nghệ 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ửa sổ bật lên vào WordPress.
kết quả cuối cùng
Đây là những gì các sản phẩm cuối cùng trông như thế nào. Nếu bạn di chuột qua ảnh của một người, một chú giải công cụ sẽ xuất hiện. Bạn có thể xem các cuộc biểu tình trực tiếp ở đây. Nhưng bài viết này có thể sẽ tồn tại trong cuộc biểu tình 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ý lịch:
Dựa trên những gì chúng ta đã nghe từ các chuyên gia trong ngành, khuôn mặt người nổi bật thể hiện cảm xúc cá nhân trên trang. Đó là lý do tại sao chúng tôi muốn đi theo con đườ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 đó anh chủ yếu đánh dấu mã mà StudioPress đã 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 mẫu.
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ẽ làm việc 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 đang bàn giao trang web cho khách hàng? Chúng tôi muốn một giải pháp trong đó chúng tôi cho phép khách hàng thêm / xóa lời khai bất cứ lúc nào. Do đó, chúng tôi đã quyết định sử dụng các loại bài đăng và trường meta tùy chỉnh để đạt được điều này cùng với jQuery.
Các loại bài đăng tùy chỉnh và bảng meta
Chúng tôi cần khách hàng để có thể:
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 câu lệnh (nội dung thư)
Vị trí của 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 bạn nếu bạn muốn thêm một hộp meta tùy chỉnh hoặc cho phép 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 chúng tôi không nên lười biếng và cung cấp cho khách hàng của chúng tôi trải nghiệm back-end tuyệt vời, ngay cả khi nó yêu cầu bạn 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 đoạn mã sau và lưu nó vào một tệp php trống có tên tooltip-testimonials.php hoặc một số tên khác vì lý do đó.
Đây là nơi công cụ cấu hình WordPress hoạt động với truyện tranh mới. Ahora, cũng như một tập hợp các lời chứng thực cho hầu hết mù tạt. Recapitulemos và dónde và 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ó thành 96 x 96 px. Luôn luôn tốt hơn để theo mối quan hệ đó.
Thêm tên người dùng (tiêu đề bài viết)
Thêm văn bản câu lệnh (nội dung thư)
Vị trí của khách hàng trong công ty (trong một tuyên bố meta chứng thực)
Xem trong chủ đề
Các công cụ kiểm tra cho chú giải công cụ 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 với một số 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 bắt đầu bài này dưới dạng hướng dẫn thay vì plugin. Dưới đây là cách hiển thị lời chứng thực về các mẹo công cụ trong chủ đề WordPress của bạn:
Thêm mã jQuery tùy chỉnh vào chủ đề.
Tạo một vòng lặp tùy chỉnh cho thấy lời chứng thực của 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 tốt
Điều đầu tiên bạ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 (tài liệu). yet (function () {
jQuery (“# lời chứng thực imgHow để thêm lời chứng thực Tooltip trong chủ đề WordPress”). tooltip ({
// điều chỉnh vị trí
bù lại: [0, 0],
// sử dụng hiệu ứng “slide”
hiệu ứng: ‘trượt’
// thêm plugin động với cấu hình cạnh dưới tùy chọn
}). Dynamic ({bottom: {direction: ‘down’, nảy: true}});
});
Khi bạn đã thực hiện điều đó, chúng tôi nên tải lên tệp này trong tiêu đề của chủ đề của bạn. 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 tập lệnh 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’);
hàm 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″,” Giễu cợt “,”3.4.2’, thật);
wp_enqueue_script (‘jquery_tools’);
wp_register_script (‘tooltip’, get_stylesheet_directory_uri (). ‘/scripts/tooltip-testimonials.js’, ‘jquery’, ‘1’, thật);
wp_enqueue_script (‘tooltip’);
}
}
Bây giờ chúng ta đã có nó, hãy tạo một vòng lặp tùy chỉnh cho phép chúng ta xem các câu lệnh 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 web 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 được 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 đơn hàng bằng = 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. 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; phao: trái; lề: 35px 30px 0 0;}
#testimonials .center {text-align: centre; lề: 0px 0 15px ;; đệm: 0px;}
#testimonials .center img {hộp-bóng: 0px 2px 2px # d2d2d2; -moz-box-bóng: 0px 2px 2px # d2d2d2; -webkit-box-bóng: 0px 2px 2px # d2d2d2; viền: 3px solid #fff;}
#testimonials .testimonials-title {font-size: 14px; trọng lượng phông chữ: 700; văn bản-align: trung tâm; lề: 3px 0 0; đệm: 0px;}
#testimonials .company {font-size: 12px; kiểu chữ: in nghiêng; văn bản-align: trung tâm; lề: 0px; đệm: 0px;}
#testimonials .tooltip {nền: # 111; màu: #fff; chiều rộng: 200px; phần đệm: 20px; lề: 0 5px 20px;}
Sau cùng:
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 về các chủ đề WordPress của bạn. Đây là một ví dụ rất cơ bản. Như đã đề cập trước đây, bạn luôn có thể điều chỉnh các đối số wp_query để họ có được một chủ tịch ngẫu nhiên. Bạn cũng có thể sử dụng trình cắm thứ tự loại thư để 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ả đơn giản.
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.
