워드프레스 블록 에디터의 코드 블록을 사용하여 코드를 표시하는 경우 사용자들이 코드를 쉽게 복사하여 사용할 수 있도록 코드 복사 버튼을 표시하는 것을 고려할 수 있습니다. 플러그인을 사용하거나 자바스크립트 코드를 사용하여 코드 블록에 복사 버튼을 표시할 수 있습니다.
워드프레스 코드 블록: 코드 복사 버튼 추가하기
이 워드프레스 블로그에는 워드프레스 사이트에서 사용할 수 있는 다양한 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개가 조금 안 되는 사이트에 설치되어 사용되고 있습니다.
사용자 정의 코드를 사용하여 코드 복사 버튼 표시하기
플러그인을 사용하는 방법을 선호하지 않는 경우 자바스크립트 코드를 사용하여 코드 복사 버튼을 추가할 수 있습니다.
예를 들어, 다음과 같은 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 버전부터 기본 편집기로 블록 에디터(구텐베르크)가 도입되었습니다. 클래식 편집기는 과도기적인 플러그인으로 한시적으로 제공되는 것이므로 아직 클래식 편집기를 사용하고 있다면 블록 에디터 사용을 고려해보시기 바랍니다. 초기에 비해 기능과 안정성이 크게 향상되었습니다.
선행 공백/후행 공백 삭제하기
CSS 코드를 복사하여 외모 » 사용자 정의하기 » 추가 CSS에 추가하면 간혹 오류가 발생하는 경우가 있습니다. 그런 경우에는 선행공백/후행공백 제거 툴을 사용하여 코드에서 선행 공백과 후행 공백을 삭제한 다음, 코드를 붙여넣기 하면 오류가 발생하지 않을 수도 있습니다.
댓글 남기기