Hướng dẫn thêm nút phản ánh dưới mỗi bài post/page
Mở file functions.php trong child theme của bạn (nếu chưa có child theme, bạn nên tạo child theme để tránh mất thay đổi khi update theme). Thêm đoạn code sau:
|
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 49 50 51 52 53 54 55 56 |
// Thêm nút phản ánh dưới mỗi bài post/page function add_feedback_button($content) { if (is_single() || is_page()) { $content .= '<button id="open-feedback-form" class="feedback-btn">Phản ánh bài viết</button>'; } return $content; } add_filter('the_content', 'add_feedback_button'); // Tạo popup chứa Contact Form 7 function feedback_popup_html() { ?> <div id="feedback-popup" class="feedback-popup"> <div class="feedback-content"> <span id="close-feedback" class="close-btn">×</span> <h3>Phản ánh bài viết</h3> <?php echo do_shortcode('[contact-form-7 id="123" title="Phản ánh bài viết"]'); ?> </div> </div> <style> .feedback-btn { background: #ff4d4d; color: white; padding: 10px 20px; border: none; cursor: pointer; display: block; margin: 20px auto; text-align: center; border-radius: 5px; } .feedback-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 9999; } .feedback-content { background: white; padding: 20px; border-radius: 5px; text-align: center; width: 50%; position: relative; } .close-btn { position: absolute; top: 10px; right: 10px; font-size: 20px; cursor: pointer; } </style> <script> document.addEventListener("DOMContentLoaded", function () { var btn = document.getElementById("open-feedback-form"), popup = document.getElementById("feedback-popup"), close = document.getElementById("close-feedback"); if (btn && popup && close) { btn.addEventListener("click", () => popup.style.display = "flex"); close.addEventListener("click", () => popup.style.display = "none"); window.addEventListener("click", e => { if (e.target === popup) popup.style.display = "none"; }); } }); </script> <?php } add_action('wp_footer', 'feedback_popup_html'); |
- Thay ID form CF7 (
id="123") bằng ID form phản ánh của bạn. - Lưu lại & kiểm tra: Khi vào bài post/page, bạn sẽ thấy nút “Phản ánh bài viết”. Nhấn vào sẽ mở popup Contact Form 7.
Quý khách cần tư vấn thiết kế web giá rẻ, vui lòng nhấn nút bên dưới:
Chào ! Bạn thấy nội dung này thế nào?
Xem thêm:
