워드프레스 블록 에디터의 코드 블록을 사용하여 코드를 표시하는 경우 사용자들이 코드를 쉽게 복사하여 사용할 수 있도록 코드 복사 버튼을 표시하는 것을 고려할 수 있습니다. 플러그인을 사용하거나 자바스크립트 코드를 사용하여 코드 블록에 복사 버튼을 표시할 수 있습니다.
[ 이 글은 2026년 2월 14일에 마지막으로 업데이트되었습니다. ]
워드프레스 코드 블록: 코드 복사 버튼 추가하기
이 워드프레스 블로그에는 워드프레스 사이트에서 사용할 수 있는 다양한 PHP/CSS 등의 코드가 소개되어 있습니다.
사용자들이 코드를 복사하여 사용하려면 코드를 끌어다가 Ctrl+C 단축키를 사용하거나 마우스 오른쪽 버튼을 누르고 복사 메뉴를 클릭해야 하므로 조금 번거로울 수 있습니다.
플러그인을 사용하면 "코드 복사" 단추를 간단히 표시할 수 있습니다. 다른 방법으로 JavaScript 또는 jQuery를 사용하여 복사 버튼을 추가하는 것도 가능합니다.
Copy Anything to Clipboard 플러그인을 사용하여 코드 복사 버튼 표시하기
Copy Anything to Clipboard 플러그인을 설치하면 코드 블록에 Copy 버튼이 표시되어 쉽게 사용자들이 코드를 클립보드에 복사할 수 있습니다.
이 플러그인을 사용하여 거의 모든 요소에 복사 버튼을 추가할 수 있습니다. 예를 들어, 인용구(Blockquote)에도 복사 버튼을 표시할 수 있습니다.
Copy Anything to Clipboard이 활성화되면 설정 » Copy to Clipboard 메뉴가 생성됩니다.
기본적으로 pre 실렉터에 복사 버튼이 표시되도록 pre라는 제목으로 항목이 하나 추가되어 있습니다. 편집을 눌러 Copy, Copied, Copy to Clipboard 등의 문구를 변경하거나 한국어 등으로 번역할 수 있습니다. 예시:
- Copy: 복사 또는 코드 복사 (인용구인 경우 인용구 복사, 명언 복사...)
- Copied: 복사 완료, 복사했습니다, 복사되었습니다 등
- Copy to Clipboard: 클립보드에 복사
Add New 버튼을 클릭하여 새로운 선택자(Selector) 항목을 추가할 수 있습니다.
새로 만들기 화면이 표시되면 Selector에 blockquote를 입력하면 <blockquote> HTML 태그 내의 텍스트를 클립보드로 복사하는 버튼이 표시됩니다.
마찬가지로 버튼 텍스트를 사용자 지정할 수 있습니다.
kontur Copy Code Button 플러그인
이와 같은 기능을 하는 또 다른 플러그인으로 kontur Copy Code Button이 있습니다. 이 플러그인을 설치하여 활성화하면 블록 편집기의 코드 블록에 복사 버튼이 추가됩니다.
이 버튼을 사용하여 GeneratePress 테마와 Astra 테마 등에서 테스트해보니 활성화된 테마에 따라 버튼 모양이 다르게 표시되었습니다. 테마 설정에서 버튼 색상, 텍스트 색상 등을 지정할 수 있지만, 보다 정교하게 조정하려면 CSS를 사용하는 것을 고려할 수 있습니다.
이 플러그인은 100개가 조금 안 되는 사이트에 설치되어 사용되고 있고 3년 이상 방치되고 있어 사용하지 않는 것이 바람직한 것 같습니다.
사용자 정의 코드를 사용하여 코드 복사 버튼 표시하기
플러그인을 사용하는 방법을 선호하지 않는 경우 자바스크립트 코드를 사용하여 코드 복사 버튼을 추가할 수 있습니다.
예를 들어, 다음과 같은 JavaScript 코드를 추가했습니다. (👉 아래의 "개선된 코드" 참고)
<script>
/**
* This script enhances WordPress code blocks by adding a "Copy Code" button.
* When the page loads, the script iterates over all code blocks (elements with the class '.wp-block-code').
* For each code block, it appends a button that allows users to easily copy the code content.
* When a user clicks the "Copy Code" button:
* - The code content is temporarily placed in a textarea element.
* - The content of the textarea is then copied to the clipboard.
* - The textarea is removed from the DOM.
* - The button's text changes to "Copied!" for 2 seconds, then reverts back to "Copy Code".
*/
document.addEventListener('DOMContentLoaded', function() {
const codeBlocks = document.querySelectorAll('.wp-block-code');
codeBlocks.forEach(function(block) {
const button = document.createElement('button');
button.className = 'copy-code-button';
button.textContent = 'Copy Code';
block.appendChild(button);
button.addEventListener('click', function() {
const code = block.querySelector('code').innerText;
const textarea = document.createElement('textarea');
textarea.value = code;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
textarea.remove();
button.textContent = 'Copied!';
setTimeout(() => {
button.textContent = 'Copy Code';
}, 2000);
});
});
});
</script>현재 테스트로 이 블로그에 이 코드를 적용했습니다. 계속 사용할지 여부는 실제로 이 기능이 많이 사용되는지 여부를 보고 결정할 예정입니다.
자바스크립트 코드는 WPCode와 같은 플러그인을 설치하고 푸터 섹션에 이 코드를 추가할 수 있습니다. JS 코드를 올바르게 로드하는 정석적인 방법은 다음 글을 참고하세요.
스타일은 CSS 코드를 사용하여 제어할 수 있습니다. 예시:
/* Copy Code 버튼 스타일 */
.copy-code-button {
display: block;
position: absolute;
top: 5px;
right: 5px;
background-color: #333;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 3px;
font-size: 12px;
z-index: 10;
}
.wp-block-code {
position: relative;
}상기 CSS 코드를 적절히 수정하여 외모 » 사용자 정의하기 » 추가 CSS에 추가하거나 차일드 테마 내의 스타일시트(style.css)에 입력하시기 바랍니다.
혹시 상기 코드에 오류가 있거나 개선할 사항이 있다면 알려주시기 바랍니다.
클래식 편집기(고전 편집기)에서는 작동하지 않지만, 코드를 약간 수정하여 어렵지 않게 작동하도록 할 수 있습니다.
워드프레스 5.0 버전부터 기본 편집기로 블록 에디터(구텐베르크)가 도입되었습니다. 클래식 편집기는 과도기적인 플러그인으로 한시적으로 제공되는 것이므로 아직 클래식 편집기를 사용하고 있다면 블록 에디터 사용을 고려해보시기 바랍니다. 초기에 비해 기능과 안정성이 크게 향상되었습니다.
개선된 코드
상기 코드 중 document.execCommand('copy')는 예전에 쓰던 방식이며, 현재 웹 표준에서는 사용을 권장하지 않는(Deprecated) 문법입니다. 최신 표준인 Clipboard API를 사용하면 임시로 텍스트 창(textarea)을 만들었다가 지우는 복잡한 과정 없이 아주 깔끔하게 처리할 수 있습니다.
SEO, 보안, 속도 등에서 크게 개선된 코드:
<script>
(function() {
'use strict';
// 이미 실행되었는지 확인 (중복 실행 방지)
if (window.codeBlockCopyInitialized) return;
window.codeBlockCopyInitialized = true;
// Clipboard API 지원 확인
if (!navigator.clipboard) {
console.warn('Clipboard API not supported');
return;
}
function initCodeBlocks() {
const codeBlocks = document.querySelectorAll('.wp-block-code:not([data-copy-initialized])');
// 코드 블록이 없으면 조기 종료
if (codeBlocks.length === 0) return;
// DocumentFragment 사용으로 reflow 최소화
codeBlocks.forEach(function(block) {
const codeElement = block.querySelector('code');
if (!codeElement) return;
// 이미 처리된 블록 표시
block.setAttribute('data-copy-initialized', 'true');
// 버튼 생성
const button = document.createElement('button');
button.className = 'copy-code-button';
button.textContent = 'Copy Code';
button.type = 'button'; // 명시적 타입 지정
button.setAttribute('aria-label', 'Copy code to clipboard');
// 이벤트 위임 대신 직접 바인딩 (코드 블록 수가 적을 경우 효율적)
button.addEventListener('click', handleCopy, { passive: true });
block.appendChild(button);
});
}
function handleCopy(event) {
const button = event.currentTarget;
const block = button.closest('.wp-block-code');
const codeElement = block.querySelector('code');
if (!codeElement) return;
// textContent 사용 (innerText보다 빠름)
const code = codeElement.textContent;
// 버튼 비활성화로 중복 클릭 방지
button.disabled = true;
navigator.clipboard.writeText(code)
.then(function() {
button.textContent = 'Copied!';
button.classList.add('copied');
// setTimeout 대신 명확한 변수 저장
const timeoutId = setTimeout(function() {
button.textContent = 'Copy Code';
button.classList.remove('copied');
button.disabled = false;
}, 2000);
// 메모리 누수 방지
button.dataset.timeoutId = timeoutId;
})
.catch(function(err) {
console.error('Copy failed:', err);
button.textContent = 'Failed';
button.classList.add('failed');
setTimeout(function() {
button.textContent = 'Copy Code';
button.classList.remove('failed');
button.disabled = false;
}, 2000);
});
}
// DOM 로드 완료 후 실행
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initCodeBlocks, { once: true });
} else {
// 이미 로드된 경우 즉시 실행
initCodeBlocks();
}
// 동적 콘텐츠 대응 (옵션 - 필요시 활성화)
// const observer = new MutationObserver(initCodeBlocks);
// observer.observe(document.body, { childList: true, subtree: true });
})();
</script>버튼 스타일 CSS:
/* 코드 블록을 기준으로 버튼을 배치하기 위한 설정 */
.wp-block-code {
position: relative;
}
/* 복사 버튼 디자인 및 우측 상단 고정 */
.copy-code-button {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
background-color: #333; /* 버튼 배경색 */
color: #fff; /* 버튼 글자색 */
border: none;
border-radius: 4px; /* 버튼 모서리 둥글게 */
font-size: 12px;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.3s ease;
z-index: 10;
}
/* 마우스를 올렸을 때 버튼 효과 */
.copy-code-button:hover {
opacity: 1;
background-color: #555;
}상기 코드를 적용하면 다음 그림과 같이 코드 블록에 복사 버튼이 추가됩니다.
콘텐츠 복사 방지 플러그인과 함께 사용하기
본문의 모든 콘텐츠를 복사할 수 없도록 하되, 코드 부분만 복사를 허용하고 싶은 경우...
- WP Content Copy Protection & No Right Click과 같은 플러그인을 설치하여 콘텐츠 복사를 방지하고 (이미지 다운로드도 안 됨)
- 상기의 "개선된 코드" 부분의 JS 코드와 CSS 코드를 적용할 수 있습니다.
그러면 본문의 모든 콘텐츠를 복사할 수 없도록 보호되지만, 코드 블록에는 "Copy" 버튼이 추가되어 사용자들이 코드를 복사할 수 있습니다.
다만, 우클릭 방지 클릭을 이용한 복사 방지 방법은 쉽게 무력화되므로 큰 효과가 없을 수 없습니다. SEO를 위해서는 복사 방지 플러그인을 설치하지 않는 것을 고려할 수 있습니다. 이 블로그는 10년 전 시작할 당시 콘텐츠 복사가 안 되도록 한 적이 있는데, 당시 방문자들이 불편하다는 불만이 많아서 복사 방지 코드를 제거했습니다.
선행 공백/후행 공백 삭제하기
CSS 코드를 복사하여 모양 » 사용자 정의 » 추가 CSS에 추가하면 간혹 오류가 발생하는 경우가 있습니다. 그런 경우에는 선행공백/후행공백 제거 툴을 사용하여 코드에서 선행 공백과 후행 공백을 삭제한 다음, 코드를 붙여넣기 하면 오류가 발생하지 않을 수도 있습니다.
댓글 남기기