안녕하세요. 최근 한 건축사 사무소의 프로젝트를 마감하고 나서, 건축사 분께서 요청주신 간단한 사항이 있었습니다. 글이나 다른 콘텐츠들은 마우스 드래그, 우클릭이 가능하지만 가장 중요한 자산인 ‘사진’은 우클릭이 되지 않게 해달라는 요청입니다.
사실 사진 우클릭 외 개발자 도구의 검사 기능을 이용하는 것을 감안한다면, 사이트 전체 내용들이 우클릭 되지 않게 막는 게 맞습니다. 하지만, 그럼 검색 로봇도 읽을 때, 길을 잃어버려 사이트 SEO에 일부 문제가 생길 수 있습니다.
위와 같은 문제를 고려하여, 건축사 분의 요청에 따라 사진만 우클릭이 되지 않는 방법을 소개해보려 합니다.
STEP 1. 이용하는 워드프레스 테마 FTP에 접근합니다.
아마 위와 같은 화면을 만나셨을 텐데요, 그럼 www > wp-content > themes 순서로 ‘테마’ 폴더로 접근하도록 합니다.
STEP 2. 차일드 테마를 열도록 합니다.
저는 매우 가벼운 테마인 elementor theme를 이용하고 있습니다. elementor theme의 차일드 테마에 접속해보면, 처음엔 style.css, screenshot.png, readme.txt, function.php 파일만 있습니다.
여기에 footer.php 파일을 하나 새로 추가해주세요.
파일질라와 같은 FTP 툴을 이용해서 해당 폴더의 빈 화면을 클릭하면, 윈도우에서 폴더를 만들 듯 새로운 파일을 만들 수 있습니다. 파일명을 footer.php 로 설정하신 후, 원래 테마에서 footer.php 파일의 내용을 복사, 붙여넣기 해주세요.
STPE 3. 스크립트 추가하기
Footer 파일을 만들었다면, 테마 푸터 가장 하단에 다음의 스크립트를 삽입합니다.
<script>
document.addEventListener('contextmenu', function (event) {
if (event.target.tagName === 'IMG') {
event.preventDefault();
}
});
</script>
이후 파일을 저장하고, FTP에서도 변경 사항 저장 여부를 확인하는 질문에 ‘저장’을 눌러줍니다.
이제 사이트에 들어가서, 사진을 우클릭 해보시면 우클릭 방지 기능이 잘 작동하면서, 이미지 복사 기능을 할 수 없게 되었음을 확인할 수 있습니다.
footer 말고, style.css 수정하는 방법
이 방법 역시 차일드 테마 내에서 파일을 수정하는 방법입니다.
우클릭 방지 기능을 사용하기 위해, 테마 style.css 에 다음의 코드를 삽입해주세요.
img {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
}
푸터에 스크립트를 추가한 것과 마찬가지로, 잘 작동할 것입니다.
감사합니다!
