To implement content copy protection and disable the right-click functionality on your WordPress website, you can use a combination of JavaScript and CSS. This can be useful if you want to prevent unauthorized copying of your content or protect sensitive information.
First, let’s add the necessary JavaScript code to disable right-clicking on your website:
(function($) {
$(document).ready(function() {
$(document).on('contextmenu', function() {
return false;
});
});
})(jQuery);
This code uses jQuery to target the document and disable the context menu (which appears when you right-click). By returning false, we prevent the default behavior of the context menu from appearing.
Next, let’s add some CSS to hide the selection and prevent copying of the content:
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
This CSS code targets the body element and sets the user-select property to none for various browser prefixes. This prevents the user from selecting and copying the content on your website.
You can add the JavaScript code to your theme’s JavaScript file or use a custom JavaScript plugin. Similarly, you can add the CSS code to your theme’s style.css file or use a custom CSS plugin.
Remember to enqueue the JavaScript and CSS files properly in your WordPress theme or plugin to ensure they are loaded on the front-end.
Note: While content copy protection and disabling right-click can deter casual users from copying your content, it is not foolproof and can be bypassed by determined individuals.
Examples
Example 1: Disable Right Click on Website
This use case demonstrates how to disable the right-click functionality on a WordPress website to prevent users from copying content.
function wpsnippets_disable_right_click() {
echo '<script>
document.addEventListener("contextmenu", function(e) {
e.preventDefault();
});
</script>';
}
add_action('wp_footer', 'wpsnippets_disable_right_click');
The code example above uses JavaScript to disable the right-click functionality on the website. It adds an event listener to the contextmenu
event and prevents the default behavior, effectively disabling the right-click menu.
Example 2: Display Custom Message on Right Click
This use case demonstrates how to display a custom message when a user tries to right-click on the website.
function wpsnippets_display_custom_message() {
echo '<script>
document.addEventListener("contextmenu", function(e) {
e.preventDefault();
alert("Right-clicking is disabled on this website.");
});
</script>';
}
add_action('wp_footer', 'wpsnippets_display_custom_message');
The code example above is similar to the previous one, but it also includes an alert
function that displays a custom message when the user tries to right-click. This can be useful to inform users about the content protection measures in place.
Example 3: Disable Text Selection on Website
This use case demonstrates how to disable text selection on a WordPress website to prevent users from copying content by selecting and copying text.
function wpsnippets_disable_text_selection() {
echo '<style>
body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>';
}
add_action('wp_head', 'wpsnippets_disable_text_selection');
The code example above uses CSS to disable text selection on the website. It sets the user-select
property to none
for the body
element, preventing users from selecting and copying text.