워드프레스 코드 블록에 카피 버튼 추가하기

워드프레스 블로그나 웹사이트에서 코드 블록을 사용할 때, 방문자가 간단히 코드를 복사할 수 있도록 “카피 버튼”을 추가하면 매우 편리합니다. 이 글에서는 HTML, CSS, JavaScript를 활용하여 워드프레스 코드 블록에 카피 버튼을 추가하는 방법을 순서대로 자세히 설명합니다. 초보자도 쉽게 따라할 수 있으니, 한 단계씩 진행해 보세요.

1. 코드 블록 스타일 정의하기

카피 버튼과 코드 블록을 보기 좋게 스타일링하려면 CSS를 추가해야 합니다. 아래의 코드를 복사해서 사용 중인 워드프레스 테마의 style.css 파일이나 추가 CSS(Customizer)에 삽입하세요.

/* 코드 블록 스타일 */
pre {
  position: relative;
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  padding: 16px;
  border-radius: 8px;
  overflow: auto;
}

/* 카피 버튼 스타일 */
.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #0073aa;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.copy-btn:hover {
  background: #005d8f;
}

이 CSS는 코드 블록에 적당한 여백과 테두리를 추가하고, “카피 버튼”을 오른쪽 상단에 배치하도록 설정합니다.

2. HTML 구조 작성하기

워드프레스 글 작성 화면에서 HTML 블록을 이용해 아래와 같은 구조를 사용하세요.

<pre>
  <code>
    console.log("Hello, WordPress!");
  </code>
  <button class="copy-btn">Copy</button>
</pre>

위의 코드는 코드 블록(<code>)과 “카피 버튼”을 함께 표시합니다. 버튼을 클릭하면 해당 코드 블록의 텍스트가 클립보드에 복사됩니다.

3. JavaScript로 카피 기능 구현하기

버튼 클릭 시 코드를 클립보드에 복사하도록 JavaScript를 추가해야 합니다. 다음 코드를 복사해 footer.php 파일의 <script> 태그 안에 삽입하거나, Custom JavaScript 플러그인을 활용하여 추가하세요.

document.addEventListener("DOMContentLoaded", function () {
  const copyButtons = document.querySelectorAll(".copy-btn");

  copyButtons.forEach((button) => {
    button.addEventListener("click", function () {
      const codeBlock = this.previousElementSibling; // 버튼 바로 위의 <code> 요소 가져오기
      const textToCopy = codeBlock.textContent;

      navigator.clipboard.writeText(textToCopy).then(() => {
        this.textContent = "Copied!";
        setTimeout(() => (this.textContent = "Copy"), 2000);
      }).catch((err) => {
        console.error("Copy failed", err);
        this.textContent = "Failed!";
      });
    });
  });
});

이 스크립트는 클립보드 API를 사용하여 코드를 복사하며, 복사 성공 시 버튼 텍스트가 “Copied!”로 변경되고 2초 후 “Copy”로 복원됩니다.

4. 코드 블록에 버튼 자동 추가

매번 HTML에서 버튼을 추가하기 번거롭다면, 아래 JavaScript를 사용해 모든 <pre><code> 블록에 자동으로 카피 버튼을 추가할 수 있습니다.

document.addEventListener("DOMContentLoaded", function () {
  const codeBlocks = document.querySelectorAll("pre > code");

  codeBlocks.forEach((block) => {
    const button = document.createElement("button");
    button.className = "copy-btn";
    button.textContent = "Copy";

    const pre = block.parentNode;
    pre.style.position = "relative";
    pre.appendChild(button);

    button.addEventListener("click", function () {
      const textToCopy = block.textContent;

      navigator.clipboard.writeText(textToCopy).then(() => {
        this.textContent = "Copied!";
        setTimeout(() => (this.textContent = "Copy"), 2000);
      }).catch((err) => {
        console.error("Copy failed", err);
        this.textContent = "Failed!";
      });
    });
  });
});

이 코드를 추가하면 HTML을 수정하지 않아도 모든 <pre><code> 블록에 “카피 버튼”이 동적으로 생성됩니다.