網站完成後,可能會有人需求「鎖定右鍵」、「禁止選取網頁內容」等等,儘管我們知道這只能防君子不防小人,但還是會有堅持要裝此功能的人。
通常我們會直接安裝外掛,但其實並不用特地安裝外掛喔,只要利用js、css就可以簡單達成上述的功能!
話不多說,趕快來看一下程式碼吧!
首先我們要在後台的「外觀」 -> 「佈景主題編輯器」-> 選取 functions.php
接著貼上下面的程式碼就可以了。
//鎖定右鍵、禁止選取內容
function disable_right_click() {
?>
<script type="text/javascript">
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
// 禁止選取內容
document.addEventListener('selectstart', function(e) {
e.preventDefault();
});
</script>
<style>
/* 禁止選取內容 */
body {
user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
}
</style>
<?php
}
add_action('wp_footer', 'disable_right_click');