Plugin Advanced Custom Fields (ACF) trong phiên bản Pro mang đến một tính năng cực kỳ hữu ích gọi là Repeater Field (Trường Lặp Lại). Nếu bạn đã từng gặp phải tình huống phải thêm một danh sách các mục hoặc hình ảnh vào trang web WordPress mà không muốn làm gì phức tạp với mã nguồn, thì đây chính là giải pháp “cứu cánh”. Và tin tôi đi, bạn sẽ chẳng muốn bỏ qua tính năng này đâu!
Repeater Field là gì?
Thử tưởng tượng bạn có một danh sách các câu hỏi và câu trả lời cho mục Hỏi và Đáp (FAQs) trên trang web của mình. Thay vì phải tạo từng mục một cách thủ công, hay mã hóa nó một cách rườm rà, Repeater Field sẽ giúp bạn dễ dàng thêm vào các mục câu hỏi – trả lời mà không cần phải động đến mã nguồn. Điều này đặc biệt hữu ích khi bạn cần thêm hoặc chỉnh sửa các mục này thường xuyên, vì chỉ cần vào trang quản trị và làm việc với giao diện đồ họa thân thiện mà không phải lo lắng về việc chỉnh sửa mã.
Các bước Tạo trang FAQ trong WordPress với ACF
Bước 1: Cài đặt Plugin ACF Pro
Đầu tiên, bạn cần tải và cài đặt plugin ACF Pro. Đúng, bạn sẽ phải bỏ tiền ra cho phiên bản Pro, nhưng đừng lo, tính năng Repeater Field chỉ có trong bản Pro thôi, và nó sẽ xứng đáng từng xu bạn bỏ ra. Sau khi đã cài đặt và kích hoạt ACF Pro, bạn chỉ việc tạo một trang mới trong WordPress (ví dụ như trang Questions and Answers) giống như bạn làm với bất kỳ trang nào khác.
Bước 2: Tạo Nhóm Trường Mới
Giờ là lúc bước vào phần thú vị: tạo nhóm trường tùy chỉnh để quản lý nội dung dễ dàng hơn!
- Vào ACF (Advanced Custom Fields) trong bảng điều khiển của WordPress.
- Tạo một nhóm trường mới, ví dụ như FAQs. Đây là nơi bạn sẽ định nghĩa các trường cần thiết cho mục Hỏi và Đáp của mình.
Bước 3: Tạo Trường Lặp Lại (Repeater Field)
Trong nhóm trường FAQs, bạn sẽ tạo một trường lặp lại (Repeater Field):
- Thêm một trường mới trong nhóm FAQs và chọn loại trường là Repeater.
- Đặt tên cho trường này là
faqs
. Đây là trường sẽ chứa toàn bộ các mục câu hỏi và câu trả lời.
Vậy là bạn đã có một trường để lặp lại nội dung. Nhưng đừng vội, chúng ta sẽ cần thêm vài bước nữa để cấu hình chi tiết hơn.
Bước 4: Thêm Các Trường Con Vào Repeater Field
Bây giờ, chúng ta cần thêm các trường con vào trong Repeater Field để có thể nhập từng câu hỏi và câu trả lời.
1. Trong trường Repeater, thêm 2 trường con:
- faq_question: Trường này sẽ dùng để nhập câu hỏi.
- faq_answer: Trường này sẽ dùng để nhập câu trả lời.
Bước 5: Cấu Hình Vị Trí Hiển Thị Trường
Đây là phần cực kỳ đơn giản: Bạn chỉ cần cấu hình trường Repeater này để hiển thị trên trang Hỏi và Đáp (FAQs) mà bạn đã tạo trước đó.
- Trong phần Location (Vị trí), bạn sẽ chọn là Page (Trang) và chọn trang bạn đã tạo tên là Questions and Answers.
Điều này có nghĩa là trường lặp lại sẽ chỉ hiển thị khi bạn truy cập vào trang “Questions and Answers”, giúp bạn dễ dàng quản lý các câu hỏi và câu trả lời mà không phải lo lắng về việc thay đổi mã nguồn.
Bước 6: Lưu và Đưa Vào Sử Dụng
Sau khi đã tạo xong, bạn chỉ cần lưu nhóm trường và vào trang Questions and Answers để bắt đầu thêm các câu hỏi và câu trả lời. Thật dễ dàng phải không?
Ví Dụ Minh Họa
Giả sử bạn muốn thêm mục FAQs cho dịch vụ của mình, như sau:
- Câu hỏi 1: “Dịch vụ của bạn có bảo hành không?”
- Câu trả lời: “Có, chúng tôi cung cấp bảo hành 6 tháng cho mọi dịch vụ.”
- Câu hỏi 2: “Làm thế nào để tôi đặt lịch hẹn?”
- Câu trả lời: “Bạn có thể đặt lịch qua trang web hoặc gọi trực tiếp đến số hotline của chúng tôi.”
Với Repeater Field, bạn chỉ cần nhấn Thêm mục và nhập vào các câu hỏi – trả lời. Mỗi khi cần thay đổi, bạn chỉ cần quay lại trang quản trị để cập nhật, và mọi thứ sẽ tự động hiển thị trên trang Hỏi và Đáp của bạn.
Tạo mẫu trang mới
Bạn đã bao giờ mơ ước tạo ra một trang “Câu Hỏi Thường Gặp” (FAQ) xịn sò cho website WordPress của mình chưa? Nếu câu trả lời là “Có”, thì hôm nay là ngày may mắn của bạn! Hãy chuẩn bị sẵn sàng để “chơi đùa” với mã nguồn, tạo mẫu trang và thêm một chút hài hước vào trang FAQ của mình!
Bước 1: Tạo Mẫu Trang FAQ
Để bắt đầu, bạn cần tạo một tệp mẫu trang mới. Đừng lo, việc này đơn giản hơn bạn nghĩ. Chỉ cần tạo một tệp mới trong thư mục gốc của chủ đề và đặt tên là faq.php
. Đừng quên thêm dòng mã này vào tệp:
1 | <?php /* Template Name: Trang câu hỏi thường gặp */ ?> |
Vậy là xong, bạn đã tạo xong một mẫu trang mới, và giờ bạn có thể bắt đầu “biến hóa” nó!
Bước 2: Thêm Mã Hiển Thị Các Câu Hỏi và Câu Trả Lời
Tiếp theo, hãy thêm một đoạn mã để lặp lại các câu hỏi và câu trả lời mà bạn đã thêm vào thông qua giao diện quản trị WordPress. Điều này sẽ giúp hiển thị các câu hỏi và câu trả lời trên trang khi người dùng truy cập.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <?php /* Template Name: Frequently Asked Questions - muathemewpgiare */ ?> <?php get_header(); ?> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <?php if ( have_rows( 'faq' ) ): ?> <div id="faq_container"> <?php // loop through the rows of data while ( have_rows( 'faq' ) ) : the_row(); ?> <div class="faq"> <div class="faq_question"> <span class="question"><?php echo get_sub_field( 'faq_question' ); ?></span> <span class="accordion-button-icon fa fa-plus"></span> </div> <div class="faq_answer_container"> <div class="faq_answer"><?php echo get_sub_field( 'faq_answer' ); ?></div> </div> </div> <?php endwhile; ?> </div> <?php endif; ?> </main> </div> <?php get_footer(); ?> |
Như vậy là bạn đã có một khu vực hiển thị câu hỏi và câu trả lời rồi. Hãy tưởng tượng bạn đang nói chuyện với khách hàng của mình, chỉ cần hỏi và trả lời thôi!
Bước 3: Thêm Tính Năng “Accordion” với jQuery
Để làm cho các câu hỏi và câu trả lời “sống động” hơn, chúng ta sẽ sử dụng jQuery để tạo tính năng “accordion” (mở rộng/thu gọn). Đoạn mã dưới đây sẽ giúp bạn thực hiện điều đó:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | jQuery(document).ready(function($) { $('.faq_question').click(function() { if ($(this).parent().is('.open')){ $(this).closest('.faq').find('.faq_answer_container').animate({'height':'0'},300); $(this).closest('.faq').removeClass('open'); $(this).parent().find('.accordion-button-icon').removeClass('fa-minus').addClass('fa-plus'); } else{ var newHeight =$(this).closest('.faq').find('.faq_answer').height() + 30 +'px'; $(this).closest('.faq').find('.faq_answer_container').animate({'height':newHeight},300); $(this).closest('.faq').addClass('open'); $(this).parent().find('.accordion-button-icon').removeClass('fa-plus').addClass('fa-minus'); } }); }); |
Khi người dùng nhấp vào câu hỏi, câu trả lời sẽ “mở ra” như một chiếc accordion vậy. Còn nếu muốn đóng lại, chỉ cần nhấp một lần nữa. Đơn giản mà hiệu quả!
Bước 4: Thêm CSS Để Trang Câu Hỏi Trông Thật Đẹp
Và giờ, đừng quên tạo một tệp CSS mới (ví dụ: faq.css
) để trang của bạn trông đẹp hơn nữa. Thêm mã CSS dưới đây vào tệp của bạn:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | #faq_container { border: 1px solid #e5e5e5; margin-bottom: 10px; padding: 0; } .faq:last-child { border: 0; } .faq { border-bottom: 1px solid #eee; } .faq_answer { padding: 15px; } .faq_question { margin: 0; cursor: pointer; font-weight: bold; display: flex; padding: 15px; align-items: center; transition: background .3s; } .faq_question:hover { background: #e4e4fd; } .question { margin-bottom: 5px; display: table-cell; width: 100%; } .faq_answer_container { height: 0; overflow: hidden; } .accordion-button-icon { display: table-cell; line-height: inherit; opacity: .5; filter: alpha(opacity=50); vertical-align: middle; } |
Đây là nơi mà bạn có thể “vẽ lại” diện mạo của trang FAQ. Hãy thử thêm màu sắc, thay đổi phông chữ, hoặc thêm các hiệu ứng để tạo sự khác biệt.
Bước 5: Đảm Bảo Mã Chạy Mượt Mà
Cuối cùng, đừng quên thêm mã sau vào tệp functions.php
để đăng ký và gọi các tệp JavaScript và CSS bạn vừa tạo:
1 2 3 4 5 6 7 8 9 10 11 12 | function faq_page() { if (is_page_template('faq.php')) { wp_register_style('my-css', get_template_directory_uri() . '/css/faq.css', array(''), 1.01); wp_enqueue_style('my-css'); wp_register_script('my-js', get_template_directory_uri() . '/js/faq.js', array('jquery')); wp_enqueue_script('my-js'); wp_enqueue_style ( 'fontawesome' , '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css', '' , '4.3.0', 'all' ); } } add_action('wp_enqueue_scripts', 'faq_page'); |
Nếu bạn đang sử dụng chủ đề con, nhớ thay get_template_directory_uri()
thành get_stylesheet_directory_uri()
nhé!
Bước 6: Áp Dụng Mẫu Trang Cho Trang FAQ
Bây giờ, bạn chỉ cần vào giao diện quản trị WordPress và áp dụng mẫu trang mà bạn vừa tạo cho trang FAQ của mình. Chúc mừng! Bạn đã hoàn thành việc tạo một trang FAQ đẹp mắt, có thể mở rộng và thu gọn các câu trả lời.
Kết Luận
Vậy là bạn đã hoàn tất việc xây dựng một trang “Câu Hỏi Thường Gặp” (FAQ) đẹp mắt và đầy tính năng với WordPress! Với những bước đơn giản nhưng hiệu quả, bạn không chỉ tạo ra một trang hữu ích mà còn mang lại trải nghiệm người dùng tuyệt vời thông qua tính năng accordion dễ sử dụng.
Tóm lại, bạn đã thực hiện các bước sau:
- Tạo mẫu trang FAQ: Bạn bắt đầu bằng cách tạo một mẫu trang PHP, giúp phân biệt trang FAQ với các trang khác trong website của mình.
- Thêm câu hỏi và câu trả lời: Sử dụng trường lặp lại ACF để thêm câu hỏi và câu trả lời, giúp việc quản lý nội dung trở nên dễ dàng và linh hoạt.
- Tạo tính năng accordion với jQuery: Để tăng tính tương tác, bạn đã thêm đoạn mã jQuery giúp câu trả lời “mở ra” và “thu gọn” mỗi khi người dùng nhấp vào câu hỏi.
- Tùy chỉnh giao diện với CSS: Bạn tạo phong cách cho trang FAQ của mình để nó trông đẹp mắt và dễ đọc hơn, với các hiệu ứng hover và thiết kế hiện đại.
- Đảm bảo hiệu suất với mã trong
functions.php
: Bạn đăng ký các tệp CSS và JS để mọi thứ hoạt động trơn tru và đồng bộ trong WordPress.
Và kết quả là… bạn đã có một trang FAQ không chỉ giúp khách hàng giải đáp các thắc mắc nhanh chóng, mà còn khiến họ phải ấn tượng với giao diện đẹp mắt và dễ sử dụng. Đừng ngần ngại thử nghiệm thêm các tính năng, câu hỏi thú vị, hoặc thậm chí làm trang FAQ của bạn trở nên hài hước và gần gũi hơn với người dùng!
Cuối cùng, đừng quên rằng việc chăm sóc trang FAQ không chỉ giúp bạn tiết kiệm thời gian mà còn làm tăng sự hài lòng của người truy cập, giúp họ dễ dàng tìm thấy câu trả lời mà không cần phải hỏi lại bạn.
Chúc bạn thành công trong việc xây dựng một trang FAQ tuyệt vời và đừng quên luôn “nghĩ ngoài hộp” khi thiết kế trang của mình. Và nếu bạn chưa bao giờ thử “làm web” theo cách này, thì giờ là lúc để bắt đầu. Hãy sáng tạo và tạo nên những bất ngờ cho người dùng của bạn! 🎉
- TOP 10 Plugin WordPress Nổi Bật Tại Việt Nam
- Hướng dẫn thêm nút dính để cập nhật sản phẩm trong WordPress
- Code thêm SKU tự động vào đường dẫn của sản phẩm trong WordPress
- Cách Chọn Theme WordPress Phù Hợp Với Ngành Kinh Doanh: Hướng Dẫn Chi Tiết 2024
- Cách Thêm Ô Tìm Kiếm Danh Mục (Category) Trong WordPress