1. head & footer 에 아래 라이브러리를 헤드섹션이 심는다.
<script src=”https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js”></script>
2. functions.php에 아래 코드를 심는다. (대부분 방지하되, allow_dopy라는 예외를 둔다)
function disable_copy_paste() { ?> <script> document.addEventListener(‘DOMContentLoaded’, function () { function blockAction(e) { // If the target or any of its parents has the class ‘allow-copy’, do not block if (e.target.closest(‘.allow-copy’)) { return true; } e.preventDefault(); return false; } document.body.addEventListener(‘copy’, blockAction); document.body.addEventListener(‘cut’, blockAction); document.body.addEventListener(‘contextmenu’, blockAction); document.body.addEventListener(‘selectstart’, blockAction); }); </script> <?php } add_action(‘wp_footer’, ‘disable_copy_paste’);
3. 복사할 컨텐츠를 아래와 같이 감싸고 복사 아이콘을 삽입한다.
<div id=”post-content” class=”allow-copy”>
복사할 영역
</div>
<div style=”text-align: right;”> <button class=”copy-btn allow-copy” data-clipboard-target=”#post-content” style=”background: none; border: none; cursor: pointer;”> <img src=”https://icon-library.com/images/copy-icon/copy-icon-19.jpg” alt=”copy-icon” style=”width: 20px; height: 20px;”> </button> </div> <!– /wp:html –> <!– wp:html –> <script src=”https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js”></script> <script> document.addEventListener(‘DOMContentLoaded’, function() { var clipboard = new ClipboardJS(‘.copy-btn’); clipboard.on(‘success’, function(e) { alert(‘포스트 내용이 복사되었습니다!’); e.clearSelection(); }); clipboard.on(‘error’, function(e) { alert(‘복사에 실패했습니다. 다시 시도해주세요.’); }); }); </script>