Plugin Contact Form 7 là một công cụ phổ biến để tạo biểu mẫu liên hệ trên các trang web WordPress. Tuy nhiên, theo mặc định, plugin này chỉ gửi thông tin liên hệ đến một địa chỉ email xác định và không lưu trữ dữ liệu trên trang web. Điều này có thể gây…
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…
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 |
// Hàm lấy số lượng Like hoặc Dislike function ip_get_like_count($type = 'likes') { $current_count = get_post_meta(get_the_id(), $type, true); return ($current_count ? $current_count : 0); } // Hàm xử lý Like và Dislike function ip_process_like() { if (is_singular('post')) { if (isset($_GET['post_action']) && isset($_GET['_wpnonce']) && wp_verify_nonce($_GET['_wpnonce'], 'ip_like_action')) { $processed_like = false; $redirect = false; // Kiểm tra hành động Like hoặc Dislike if ($_GET['post_action'] == 'like') { $like_count = get_post_meta(get_the_id(), 'likes', true); $like_count = $like_count ? $like_count + 1 : 1; $processed_like = update_post_meta(get_the_id(), 'likes', $like_count); } elseif ($_GET['post_action'] == 'dislike') { $dislike_count = get_post_meta(get_the_id(), 'dislikes', true); $dislike_count = $dislike_count ? $dislike_count + 1 : 1; $processed_like = update_post_meta(get_the_id(), 'dislikes', $dislike_count); } if ($processed_like) { $redirect = get_the_permalink(); // Trả về trang bài viết sau khi cập nhật } if ($redirect) { wp_redirect($redirect); // Tải lại trang để hiển thị kết quả mới die; } } } } add_action('template_redirect', 'ip_process_like'); |
CSS tí cho đẹ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 |
/* CSS nút hữu ích */ .ok-like a { margin-right: 10px; text-decoration: none; color: #111; font-size: 13px; font-weight: bold; background: #fff444; padding: 5px 8px 5px 8px; border-radius: 7px; display: inline-block; } .ok-like a:hover { color: #fff; background: #0c0; } .title-like { color: #ccc; font-size: 15px; } .yes-likes { padding: 20px; background: #4b238a; text-align: center; border-radius: 10px; } @media (max-width: 400px) { .ok-like a { font-size: 10px; } } /*---------------------------------------------*/ |
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 |
// chặn bình luận chứa liên kết function webdy_block_links_in_comments($comment_content) { $pattern = '/\b(?:https?|ftp):\/\/[^\s]+/i'; if (preg_match($pattern, $comment_content)) { wp_die(__('Bình luận của bạn đã bị chặn bởi Webdy. Vui lòng không đăng liên kết!', 'webdy-text-domain')); } return $comment_content; } add_filter('pre_comment_content', 'webdy_block_links_in_comments'); |
Dán CSS 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 |
.header-logo a { position: relative; display: inline-block; overflow: hidden; /* Ẩn hiệu ứng dư */ } .header-logo a::before { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 100%); transform: skewX(-25deg); } .header-logo a:hover::before { animation: shine 0.75s; } @keyframes shine { 100% { left: 150%; } } |
Dán CSS 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 |
.banner { position: relative; width: 100%; max-width: 800px; /* Điều chỉnh độ rộng banner */ height: 250px; /* Điều chỉnh chiều cao banner */ background: url('https://via.placeholder.com/800x250') no-repeat center/cover; border-radius: 10px; overflow: hidden; /* Ẩn hiệu ứng dư */ display: flex; align-items: center; justify-content: center; color: white; font-size: 32px; font-weight: bold; text-transform: uppercase; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); } .banner::before { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); transform: skewX(-25deg); } .banner:hover::before { animation: shine 1s; } @keyframes shine { 100% { left: 150%; } } |
Dán CSS 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 |
.button { position: relative; display: inline-block; padding: 12px 24px; font-size: 16px; font-weight: bold; color: white; background: #007bff; border: none; border-radius: 8px; cursor: pointer; overflow: hidden; /* Ẩn phần dư của hiệu ứng */ text-transform: uppercase; } .button:hover { background: #0056b3; } .button::before { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 100%); transform: skewX(-25deg); } .button:hover::before { animation: shine 0.75s; } @keyframes shine { 100% { left: 150%; } } |
🔥 Khi di chuột vào button, hiệu ứng ánh sáng quét ngang qua tạo cảm giác chuyên nghiệp!
Web code tay và web dùng WordPress (WP) là hai cách tiếp cận khác nhau để xây dựng một trang web. Dưới đây là sự phân biệt chi tiết: 1. Định nghĩa Web code tay: Là trang web được viết hoàn toàn bằng mã nguồn (HTML, CSS, JavaScript, PHP, Python, hoặc ngôn ngữ lập trình…
Đăng nhập, mở SSH terminal Chạy lệnh cài Rclone lên VPS Cài đặt RCLONE bản mới nhất với bất kỳ hệ điều hành nào:
|
1 |
curl https://rclone.org/install.sh | sudo bash |
Ngoài ra bạn cũng có thể tham khảo ở trang chủ của RCLONE tại đây Chạy lệnh config
|
1 |
rclone config |
Nếu trên VPS của bạn chưa tạo kết nối nào thì…
Cài Đặt RCLONE Cài đặt RCLONE bản mới nhất với bất kỳ hệ điều hành nào:
|
1 |
curl https://rclone.org/install.sh | sudo bash |
Ngoài ra bạn cũng có thể tham khảo ở trang chủ của RCLONE tại đây RCLONE một số lệnh cơ bản rclone config – Cấu hình kết nối đến dịch vụ cloud. rclone copy – Copy files từ server…
