워드프레스에서 코드 블록에 복사 버튼을 추가하는 방법

저의 블로그에서 IT 카테고리에 포스팅된 글에는 코드를 사용하는 경우가 많습니다. 그런데 문득 생각해 보니 코드를 일일이 마우스로 선택해서 복사하는 것이 불편할 것 같더군요. 이 글에서는 워드프레스에서 코드 블록에 복사 버튼을 추가하는 방법에 대해 알아보겠습니다.

워드프레스에서 코드 블록에 복사 버튼을 추가하는 방법

목차 숨기기

워드프레스에서 코드 블록에 복사 버튼을 추가하는 방법

1. 코드 블록에 복사 버튼 추가를 위한 코드 작성하기

2. functions.php에 코드 추가하기

3. 적용 결과 확인하기

저의 블로그를 보시면 아래 그림과 같이 코드 블록을 사용하는 경우가 많습니다. 그런데 이런 코드들을 일일이 마우스로 선택하여 복사하는 것이 많이 불편할 것 같다는 생각이 들었습니다. 그래서 오늘은 사용자가 편리하게 코드를 복사할 수 있도록 코드 블록으로 되어 있는 곳에 ‘Copy’ 버튼을 추가하도록 하겠습니다.

1. 코드 블록에 복사 버튼 추가를 위한 코드 작성하기

코드 블록에 복사 버튼을 추가하기 위해서는 functions.php 를 수정해야 하고 CSS 코드도 추가해야 합니다. 저는 CSS 코드를 별도로 추가하지 않고 functions.php에 직접 포함시키는 방법을 사용할 계획입니다. 이렇게 하면 코드의 관리가 더욱 편리해 지기 때문입니다.

먼저 functions.php 에 추가할 코드를 작성하도록 하겠습니다. 코드는 다음과 같습니다.

function add_code_copy_button() {
    // CSS 스타일 정의
    $css = '
    <style>
    /* 코드 블록의 상대적 위치 설정 */
    .wp-block-code {
        position: relative;
    }
    /* 복사 버튼 스타일 */
    .copy-button {
        position: absolute; /* 버튼을 코드 블록 내에 절대 위치로 배치 */
        top: 5px;
        right: 5px;
        padding: 5px 10px;
        background-color: #f1f1f1;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        font-size: 12px;
    }
    /* 버튼 호버 효과 */
    .copy-button:hover {
        background-color: #e1e1e1;
    }
    </style>
    ';

    // JavaScript 코드 정의
    $js = '
    <script>
    jQuery(document).ready(function($) {
        // 모든 코드 블록에 복사 버튼 추가
        $(".wp-block-code").each(function() {
            $(this).append("<button class=\"copy-button\">Copy</button>");
        });

        // 복사 버튼 클릭 이벤트 처리
        $(".copy-button").click(function() {
            var codeBlock = $(this).siblings("code"); // 코드 블록 요소 선택
            var code = codeBlock.html()
                .replace(/<br>/gi, "\n")  // <br> 태그를 줄바꿈 문자로 변환
                .replace(/<[^>]+>/g, "")  // 모든 HTML 태그 제거
                .replace(/&lt;/g, "<")    // HTML 엔티티를 실제 문자로 변환
                .replace(/&gt;/g, ">")
                .replace(/&amp;/g, "&")
                .trim();  // 앞뒤 공백 제거

            // 클립보드에 코드 복사
            navigator.clipboard.writeText(code).then(function() {
                var button = $(this);
                button.text("Copied!"); // 복사 성공 시 버튼 텍스트 변경
                setTimeout(function() {
                    button.text("Copy"); // 2초 후 버튼 텍스트 원래대로 복원
                }, 2000);
            }.bind(this)).catch(function(err) {
                console.error("Failed to copy: ", err); // 복사 실패 시 에러 로그
            });
        });
    });
    </script>
    ';

    // CSS와 JavaScript 출력
    echo $css;
    echo $js;
}

// wp_footer 훅에 함수 연결 (jQuery가 로드된 후 실행되도록 보장)
add_action('wp_footer', 'add_code_copy_button');

add_code_copy_button 함수
- 이 함수는 코드 복사 버튼을 추가하는 모든 로직을 포함합니다.

CSS 스타일
- .wp-block-code: 코드 블록의 위치를 상대적으로 설정하여 내부에 절대 위치 요소를 배치합니다.
- .copy-button: 복사 버튼의 스타일을 정의합니다. 위치, 크기, 색상 등을 설정합니다.

JavaScript 코드
- jQuery를 사용합니다.
- 모든 .wp-block-code 요소에 “Copy” 버튼을 추가합니다.
- 버튼 클릭 이벤트를 처리합니다.
  ① 코드 블록의 내용을 가져옵니다.
  ② HTML 태그와 엔티티를 처리하여 순수한 텍스트 코드로 변환합니다.
  ③ navigator.clipboard.writeText()를 사용하여 코드를 클립보드에 복사합니다.
  ④ 복사 성공 시 버튼 텍스트를 “Copied!”로 변경하고, 2초 후 다시 “Copy”로 복원합니다.
  ⑤ 복사 실패 시 콘솔에 에러를 기록합니다.

add_action('wp_footer', 'add_code_copy_button')
- 이 함수를 WordPress의 footer에 연결하여 페이지 로드 완료 시 실행되도록 합니다.

2. functions.php에 코드 추가하기

워드프레스 관리자 화면에서 ‘외모’ → ‘테마 파일 편집기’로 이동한 후, 오른쪽에 있는 ‘테마 파일’에서 functions.php를 찾아 클릭합니다. 위에서 복사한 코드를 붙여넣기 하고 ‘파일 업데이트’를 클릭하여 적용합니다.

코드 블록에 복사 버튼을 추가하기 위한 코드를 functions.php에 추가합니다.

3. 적용 결과 확인하기

작성한 코드를 위와 같이 functions.php 에 추가한 결과는 아래와 같습니다. 아래 화면과 같이 코드 블록의 오른쪽 상단에 ‘Copy’ 버튼이 추가되었고 해당 버튼을 클릭하면 코드가 클립보드에 복사됩니다.

사실 이렇게 하는 것이 저에게 도움이 되는지는 잘 모르겠습니다. 왜냐하면 사용자의 체류 시간을 1초라도 늘리기 위해 온갖 방법을 강구하고 있는 상황에서, 소스 코드를 쉽게 복사하게 할 경우 몇 초의 체류 시간 손실이 있을 수 있기 때문입니다. ㅋㅋ

농담이구요. 많은 분들이 제 블로그를 편리하게 사용했으면 좋겠습니다.

오늘은 워드프레스에서 코드 블록에 복사 버튼을 추가하는 방법에 대해 알아보았습니다. 여러분 중 저와 같이 코드 블록을 많이 사용하시는 분들이 계시다면 이 글을 참고하여 적용해 보시기 바랍니다.