WordPress網站如何防止內容被複製？ 2種方法禁用右鍵、文字選取和F12

一個網站，它的外觀很重要，但是網站的內容更重要，內容是網站的核心、是靈魂。

尤其是做原創內容的網站，一定不願意自己花心思創作的內容被別人輕易竊取。

本篇文章，Well就分享如何提高自己網站內容被複製的門檻。

為什麼說要提高被複製的門檻，而不是說杜絕被複製呢？

因為真正心懷不軌的人是無法絕對防範的，他可以透過爬蟲來取得你網站的內容。

但本篇文章依然有用，提高了內容被竊取的門檻，防止了大部分人輕易複製你網站內容。

WordPress網站如何防止內容被複製？

從操作電腦的角度來講，在網頁上複製內容的方式主要有以下幾種：

1. 用滑鼠右鍵複製：先選取文本，滑鼠右鍵裡有複製選項。或右鍵後開啟網頁原始碼。
2. 快速鍵複製：也要選取文本，然後點擊鍵盤上的CTRL+C。
3. 拖曳複製：選取文字後，滑鼠點選左鍵不放手，直接拖曳到文字編輯器裡。

知道了常規複製網頁內容的方式後，就可以針對這幾種方法做限制，例如在網站上禁止選取、禁止右鍵、禁止拖曳等。

以下兩種方法，分別是透過使用外掛程式或使用自訂程式碼的方式來防止網站內容被複製，選擇其中一種方法即可。

使用外掛程式防止WP網站內容被複製

使用外掛程式可以快速實現禁用網頁上的右鍵、快捷鍵、拖曳功能。以下是Well使用過的防複製外掛：

安全複製內容保護

WP 內容複製保護 & 禁止右鍵點擊

Secure Copy Content Protection插件的功能更多，同時也有更豐富的設定選項，相對來說細節更多。

這兩個外掛安裝後使用預設設定就能有效防止頁面內容被複製，同時還可以自訂提醒的文字、指定哪些頁面開啟防複製功能。

使用程式碼防止WordPress網站被複製內容

代碼分為兩個層面來進行複製防護，分別是CSS、JS層面。

將下方2段程式碼透過ELementor的Custom Code功能加入網站即可。

CSS程式碼：

<style>
/* 禁用文本选中和长按菜单 */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; 
  -webkit-touch-callout: none; 
}

/* 禁用图片拖拽 */
img {
  pointer-events: none;
  -webkit-user-drag: none;
}
</style>

JS代碼：

<script>
  // 禁用右键菜单
  document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
  });

  // 禁用文本选中
  document.addEventListener('selectstart', function(e) {
    e.preventDefault();
  });

  // 禁用复制、剪切、粘贴
  ['copy', 'cut', 'paste'].forEach(function(evt) {
    document.addEventListener(evt, function(e) {
      e.preventDefault();
    });
  });

  // 禁用拖拽
  document.addEventListener('dragstart', function(e) {
    e.preventDefault();
  });

  // 禁用 F12、Ctrl+Shift+I、Ctrl+Shift+C、Ctrl+Shift+J、Ctrl+U
  document.addEventListener('keydown', function(e) {
    if (
      e.keyCode === 123 ||
      (e.ctrlKey && e.shiftKey && e.keyCode === 73) ||
      (e.ctrlKey && e.shiftKey && e.keyCode === 67) ||
      (e.ctrlKey && e.shiftKey && e.keyCode === 74) ||
      (e.ctrlKey && e.keyCode === 85)
    ) {
      e.preventDefault();
    }
  });
</script>

以上就是本篇文章的全部內容，歡迎你在本站學習更多外貿建站教程。