워드프레스에서 코드 복사 버튼 쉽게 만들기: WPCode로 뚝딱!

안녕하세요! 오늘은 코딩 쪽 블로그를 운영하시는 분에게 정말 유용한 팁을 가져왔어요. 물론 그 분들 외에도 유용한거예요. 바로 워드프레스 코드블럭 복사 버튼을 추가하는 방법이에요. 코드 복사 기능은 프로그래밍 관련 블로그에서 정말 중요하죠. 독자들이 쉽게 코드 복사 붙여넣기 할 수 있게 해주니까요.

여러분의 워드프레스 코드블럭에 예쁜 복사 버튼을 달면, 독자들이 클릭 한 번으로 코드를 복사할 수 있답니다. 멋지지 않나요? 게다가 WPCode 플러그인을 사용하면 이 기능 추가가 정말 쉬워져요. 자, 이제 함께 따라와 보세요!

왜 코드 복사 버튼이 필요할까요?

코드 복사 버튼이 없는 코드블럭 형식 참고 이미지
( 기본 코드블럭 형식 참고 이미지 )

사실 위 이미지처럼 기본 코드블럭에는 옅은 하늘색 배경에 그냥 텍스트만 입력하도록 되어 있습니다. 저 블럭 내의 텍스트를 긁어가기 위해서는 마우스로 드래그 해야 하는 수고로움이 있죠! 그런데 블로그에 ‘복사 버튼’을 추가하면 다음과 같이 여러 가지로 좋답니다.

  1. 독자들이 코드를 쉽게 복사하고 붙여넣기 할 수 있어요.
  2. 긴 코드도 한 번에 복사할 수 있어 편리해요.
  3. 코드를 잘못 옮기는 실수를 줄일 수 있어요.
  4. 워드프레스 코드블럭의 사용성이 크게 향상돼요.

자, 이제 본격적으로 코드복사 버튼 구현을 위해서 출발해보실까요?

WPCode 플러그인 설치하기

먼저, 플러그인을 설치해야 해요. 이 플러그인을 사용하면 코드블럭 복사 버튼 구현을 쉽게 할 수 있어요. 워드프레스 관리자 페이지에서 ‘플러그인 > 새로운 플러그인 추가’로 가서 ‘WPCode’를 검색하고 설치 후 활성화해주세요.

워프 관리자 페이지로 가면 상단 메뉴에 ‘WPCode’가 생기고 그 메뉴를 클릭하면 ‘스니펫 추가’ 서브메뉴를 확인할 수가 있습니다. 이걸 이용해서 이제 CSS와 자바스크립트 코드를 적용해서 쉽게 코드 복사 붙혀넣기를 할 수 있는 코드 블럭 복사 버튼을 구현해보겠습니다.

( 플러그인 설치 후 워프 관리자 페이지 화면 )
( 플러그인 설치 후 워프 관리자 페이지 화면 )

CSS로 코드 복사 버튼 꾸미기

이제 CSS를 이용해 이 복사 버튼의 모양을 만들어 볼게요. 우선, 플러그인을 사용해 전체 사이트의 헤더에 이 스타일을 추가할 거예요.

  1. 워드프레스 관리자 메뉴에서 좌측 메뉴에서 Code Snippets > Add Snippet 혹은 상단의 WPCode > Add Snippet을 클릭하세요.
  2. 사용자 정의 코드 추가 (새 스니펫) 혹은 Add Custom Snippet을 클릭하고 CSS Snippet 선택합니다.
  3. 스니펫 이름을 ‘Copy Button Style’로 지정하세요. 이름은 자신이 다른 스니펫과 구분할 수 있도록 지정해주시면 됩니다. 그리고 아래 코드를 붙여넣으세요.
pre {
  position: relative;
}

.copy-button {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 5px 10px;
  background-color: #f1f1f1;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  color: #000000;
  font-size: 14px;
}

.copy-button:hover {
  background-color: #ddd;
}
  1. 위치를 ‘사이트 전체 헤더’로 선택하고 스니펫 저장 > 활성화를 클립합니다.

이렇게 하면 사이트 전체의 워드프레스 코드블럭에 ‘복사 버튼 스타일’이 적용돼요!

자바스크립트로 코드 복사 기능 추가하기

이제 복사 버튼이 실제로 동작하도록 자바스크립트를 추가할 차례예요. 이 코드로 코드블럭 복사 버튼의 기능을 구현할 거예요. 위 단계에서 JavaScript 관련으로 해서 스니펫을 선택하고 스니펫 제목을 지정하면 됩니다. 위치만 사이트 전체 바닥글(푸터)로 하시면 됩니다.

document.addEventListener('DOMContentLoaded', function () {
  const codeBlocks = document.querySelectorAll('pre');

  codeBlocks.forEach(function (block) {
    const copyButton = document.createElement('button');
    copyButton.className = 'copy-button';

    const icon = document.createElement('i');
    icon.className = 'copy-icon';
    icon.textContent = '🗐';

    const text = document.createElement('span');
    text.textContent = ' Copy';

    copyButton.appendChild(icon);
    copyButton.appendChild(text);

    block.appendChild(copyButton);

    copyButton.addEventListener('click', function () {
      const code = block.querySelector('code').innerText;

      navigator.clipboard.writeText(code).then(function () {
        icon.textContent = '✔';
        text.textContent = ' Copied';
        copyButton.disabled = true;

        setTimeout(function () {
          icon.textContent = '🗐';
          text.textContent = ' Copy';
          copyButton.disabled = false;
        }, 2000);
      });
    });
  });
});

이제 기존에 여러분이 코드블럭을 이용해서 작성한 포스트를 열어서 아래와 같이 복사하기 버튼이 보이는 지 확인해 보세요! 워드프레스 코드블럭마다 멋진 코드 복사 버튼이 생겼을꺼예요! 아래 이미지에서 위의 코드블럭에서는 이미 코드 복사를 했기 때문에 ‘✔ Copied’ 표시가 나타나 있습니다.

코드 복사 붙혀넣기 기능 사용 결과 이미지
( 코드 복사 붙혀넣기 기능 사용 결과 )

마무리

어떠세요? 생각보다 어렵지 않죠? 몇몇 코드와 플러그인을 사용하면 복잡한 코드 수정 없이도 이런 멋진 기능을 구현할 수 있어요. 이제 여러분의 블로그 독자들은 코드나 텍스트를 한번의 클릭으로 쉽게 복사해갈 수 있을 거예요. 여러분의 블로그에도 이 기능을 추가해보세요.

참고로, 텍스트 사이즈를 줄이다던지 이모티콘을 바꾸다던지 변경하실 것이 있으시면 아래의 코드 상세 해설을 보시면 어떻게 하면 되는지 감이 오실꺼예요.

그리고 워프에서 사용하는 버튼을 조금 세련되게 하려면 어떻게 하면 될까요? 모두 주목! 눈에 띄는 버튼 애니메이션 비법 공개(feat. 워드프레스) 포스트를 통해서 그 비법을 확인해 보세요!

# 용어 해설

  • WPCode 플러그인: 워드프레스에 코드 스니펫을 쉽게 추가할 수 있게 해주는 도구예요.
  • 스니펫(Snippet): 재사용 가능한 작은 코드 조각을 말해요.
  • CSS: 웹페이지의 디자인을 꾸미는 스타일 언어예요.
  • 자바스크립트: 웹페이지에 동적인 기능을 추가하는 프로그래밍 언어예요.
  • 코드블럭: 블로그 글에서 프로그래밍 코드를 보여주는 특별한 영역이에요.
  • 클립보드: 복사한 내용을 임시로 저장하는 컴퓨터의 가상 공간이에요.

#코드 상세 해설

CSS 코드 해설

  • pre { position: relative; }: 코드블럭의 위치를 상대적으로 설정합니다.
  • .copy-button { ... }: 복사 버튼의 기본 스타일을 정의합니다.
  • position: absolute;: 버튼을 코드블럭 내에서 절대 위치로 배치합니다.
  • top: 5px; right: 5px;: 버튼을 오른쪽 상단에 위치시킵니다.
  • padding: 5px 10px;: 버튼 내부의 여백을 설정합니다.
  • background-color: #f1f1f1;: 버튼 배경색을 설정합니다.
  • border: none; border-radius: 3px;: 테두리를 없애고 모서리를 둥글게 만듭니다.
  • cursor: pointer;: 마우스를 올렸을 때 커서 모양을 변경합니다.
  • color: #000000; font-size: 14px;: 텍스트 색상과 크기를 설정합니다.
  • .copy-button:hover { ... }: 버튼에 마우스를 올렸을 때의 스타일을 정의합니다.

JavaScript 코드 해설

  • document.addEventListener('DOMContentLoaded', function () { ... });: 페이지 로딩이 완료된 후 스크립트를 실행합니다.
  • const codeBlocks = document.querySelectorAll('pre');: 페이지 내의 모든 코드블럭을 선택합니다.
  • codeBlocks.forEach(function (block) { ... });: 각 코드블럭에 대해 반복 작업을 수행합니다.
  • const copyButton = document.createElement('button');: 복사 버튼 요소를 생성합니다.
  • copyButton.className = 'copy-button';: 버튼에 CSS 클래스를 적용합니다.
  • const icon = document.createElement('i');: 아이콘 요소를 생성합니다.
  • const text = document.createElement('span');: 텍스트 요소를 생성합니다.
  • copyButton.appendChild(icon); copyButton.appendChild(text);: 버튼에 아이콘과 텍스트를 추가합니다.
  • block.appendChild(copyButton);: 코드블럭에 버튼을 추가합니다.
  • copyButton.addEventListener('click', function () { ... });: 버튼 클릭 이벤트를 처리합니다.
  • const code = block.querySelector('code').innerText;: 코드블럭 내의 텍스트를 가져옵니다.
  • navigator.clipboard.writeText(code).then(function () { ... });: 클립보드에 코드를 복사합니다.
  • icon.textContent = '✔'; text.textContent = ' Copied';: 복사 완료 후 버튼 상태를 변경합니다.
  • setTimeout(function () { ... }, 2000);: 2초 후 버튼 상태를 원래대로 되돌립니다.
테리 이모티콘
( 즐겁게 코딩을 합시다! )

유사한 게시물