Bạn đang tìm cách bảo vệ nội dung trên website WordPress khỏi hành vi quay màn hình trái phép? Bài viết này sẽ hướng dẫn bạn cách tích hợp chức năng chống quay màn hình đơn giản và hiệu quả. Không chỉ bảo vệ bản quyền nội dung, tính năng này còn giúp nâng cao độ tin cậy và chuyên nghiệp cho website của bạn.
Tại sao cần chức năng chống quay màn hình?
1. Bảo vệ bản quyền nội dung
Với nội dung độc quyền, việc bị quay màn hình hoặc sao chép trái phép có thể gây thiệt hại lớn về giá trị và uy tín. Tích hợp chức năng chống quay màn hình giúp hạn chế rủi ro này.
2. Tăng độ chuyên nghiệp cho website
Chức năng bảo mật tiên tiến như chống quay màn hình sẽ tạo ấn tượng tốt với người dùng, giúp website trở nên đáng tin cậy hơn.
Cách thêm chức năng chống quay màn hình vào WordPress
Việc tích hợp tính năng này rất đơn giản. Bạn chỉ cần thêm đoạn code sau vào file functions.php của theme đang sử dụng.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | add_action('wp_footer', 'chong_quay_man_hinh_script'); function chong_quay_man_hinh_script() { ?> <script> document.addEventListener('keydown', function(event) { if (event.key === 'PrintScreen') { alert("Chức năng chụp màn hình đã bị vô hiệu hóa!"); event.preventDefault(); } }); document.addEventListener('keyup', function(event) { if (event.key === 'PrintScreen') { navigator.clipboard.writeText(''); alert("Chức năng sao chép màn hình đã bị ngăn chặn!"); } }); </script> <?php } |
Giải thích đoạn code:
- keydown và keyup: Theo dõi các phím được nhấn, đặc biệt là phím PrintScreen.
- preventDefault: Ngăn chặn hành vi mặc định của trình duyệt khi phím PrintScreen được nhấn.
- navigator.clipboard.writeText(”): Xóa clipboard để ngăn nội dung bị lưu trữ.
Lưu ý khi sử dụng
1. Tương thích với theme
Đảm bảo kiểm tra khả năng tương thích của đoạn code với theme và plugin bạn đang sử dụng.
2. Không thể chống 100%
Dù có tính năng chống quay màn hình, vẫn có rủi ro khi người dùng sử dụng thiết bị ngoài (như điện thoại) để quay lại nội dung.
3. Kết hợp các biện pháp bảo vệ khác
Bên cạnh việc chống quay màn hình, bạn nên tích hợp các tính năng như watermark, mã hóa nội dung, hoặc hạn chế sao chép (chống chuột phải, chống bôi đen).
Dưới đây là đoạn code vesion2 đẹp hơn, các bạn có thể tham khảo nhé
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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 | function enqueue_plyr_scripts() { // Plyr CSS wp_enqueue_style('plyr-css', 'https://cdn.plyr.io/3.7.8/plyr.css'); // Plyr JS wp_enqueue_script('plyr-js', 'https://cdn.plyr.io/3.7.8/plyr.polyfilled.js', array(), null, true); // SweetAlert2 CSS and JS wp_enqueue_style('sweetalert2-css', 'https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css'); wp_enqueue_script('sweetalert2-js', 'https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js', array(), null, true); // Custom script to initialize Plyr with decoded video ID wp_add_inline_script('plyr-js', ' document.addEventListener("DOMContentLoaded", function () { if (typeof Plyr !== "undefined") { function complexDecode(encodedId) { let reversedId = encodedId.split("").reverse().join(""); let decodedId = ""; for (let i = 0; i < reversedId.length; i++) { let shift = (i % 2 === 0) ? 3 : 5; decodedId += String.fromCharCode(reversedId.charCodeAt(i) - shift); } return decodedId; } document.querySelectorAll(".plyr--video").forEach(function(element) { var encodedId = element.getAttribute("data-plyr-embed-id"); if (encodedId) { var decodedId = complexDecode(encodedId); element.setAttribute("data-plyr-embed-id", decodedId); } }); Plyr.setup(".plyr"); // Detect keyboard events for screen recording document.addEventListener("keydown", function(e) { // Check for common screen recording shortcuts if (isScreenRecordingShortcut(e)) { blurVideo(true); showAlert(); setTimeout(function() { blurVideo(false); }, 15000); // Blur for 15 seconds } }); function isScreenRecordingShortcut(e) { // Define screen recording shortcut keys const recordingShortcuts = [ e.key === "PrintScreen", // Windows Print Screen (e.ctrlKey && e.key === "s"), // Ctrl + S (e.key === "r" && e.altKey), // Alt + R (e.key === "F12"), // F12 (DevTools) (e.metaKey && e.key === "r"), // Cmd + R on Mac (e.key === "Meta") // Windows key ]; return recordingShortcuts.some(Boolean); } function blurVideo(isBlurring) { document.querySelectorAll(".plyr--video").forEach(function(video) { video.style.filter = isBlurring ? "blur(10px)" : "none"; }); } function showAlert() { Swal.fire({ title: "Cảnh Báo", text: "Video này cấm sao chép và quay màn hình!", icon: "warning", confirmButtonText: "OK", timer: 5000, // Show alert for 5 seconds timerProgressBar: true, }); } // Prevent default action for screen recording keys document.addEventListener("keydown", function(e) { if (isScreenRecordingShortcut(e)) { e.preventDefault(); } }); } }); '); } add_action('wp_enqueue_scripts', 'enqueue_plyr_scripts'); function convert_youtube_embed_to_plyr($html, $url, $attr, $post_id) { if (strpos($url, 'youtube.com') !== false || strpos($url, 'youtu.be') !== false) { // Extract video ID from URL $video_id = preg_replace('/.*(?:youtube.com\/embed\/|youtu.be\/|youtube.com\/watch\?v=)([a-zA-Z0-9_-]+).*/', '$1', $url); // Random number of encoding times (5 to 15) $encode_times = rand(5, 15); // Custom encoding of video ID $encoded_id = ""; for ($i = 0; $i < strlen($video_id); $i++) { // Shift each character and alternate encoding methods if ($i % 2 === 0) { $encoded_id .= chr(ord($video_id[$i]) + 3); // Shift forward by 3 } else { $encoded_id .= chr(ord($video_id[$i]) + 5); // Shift forward by 5 } } // Reverse the encoded string $encoded_id = strrev($encoded_id); // Create Plyr-compatible HTML with encoded ID $plyr_html = ' <div class="plyr plyr--video" data-plyr-provider="youtube" data-plyr-embed-id="' . esc_attr($encoded_id) . '"> <div data-plyr-provider="youtube" data-plyr-embed-id="' . esc_attr($encoded_id) . '"></div> </div>'; return $plyr_html; } return $html; } add_filter('embed_oembed_html', 'convert_youtube_embed_to_plyr', 10, 4); function custom_plyr_css() { echo ' <style> .plyr--video iframe { pointer-events: none; /* Disable interaction */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .plyr--video { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 aspect ratio */ } .plyr--video .plyr__video-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> '; } add_action('wp_head', 'custom_plyr_css'); // Disable right-click on video function disable_right_click_script() { echo ' <script> document.addEventListener("contextmenu", function(e) { if (e.target.closest(".plyr--video")) { e.preventDefault(); } }); </script> '; } add_action('wp_footer', 'disable_right_click_script'); |
Kết luận
Việc bảo vệ nội dung là yếu tố quan trọng để xây dựng một website chuyên nghiệp và đáng tin cậy. Với đoạn code trên, bạn có thể dễ dàng thêm chức năng chống quay màn hình cho WordPress mà không cần dùng plugin. Hãy thử ngay và chia sẻ kinh nghiệm của bạn nhé!
- Bộ Sưu Tập 5+ Theme WordPress Studio Áo Cưới Đẹp, Chuẩn SEO và Dễ Dàng Tùy Chỉnh
- Hướng Dẫn Hạn Chế Người Dùng Chỉ Xem File Media Do Chính Họ Tải Lên Trong WordPress
- Top 5+ Theme WordPress Khóa Học Thiết Kế Bằng Flatsome Hot Nhất Thị Trường Việt Nam
- Chương Trình Flash Sale Giảm 50% Theme WordPress Cuối Năm 2024
- Mua Theme Giá Rẻ và Chọn Theme WordPress Bán Hàng Chuẩn SEO