[워드프레스] 블로그 글 복사 시 출처를 자동으로 표시하는 방법

이 블로그에서는 글 무단 복제와 이미지 무단 참조 때문에 지난 몇 달 동안 일부 카테고리에서 글 복사가 안 되도록 설정했지만(참고), 이로 인해 글 복사 방지의 기능보다는 사용자들의 불편이 따라서 글 복사 방지 기능을 해제하고 대신 글 복사 시 출처를 표시하도록 바꾸었습니다.

[ 이 글은 2024년 4월 12일에 마지막으로 업데이트되었습니다. ]

블로그 글 복사 시 출처를 자동으로 표시하는 방법

플러그인 사용

워드프레스에서 블로그 글 복사 시 출처를 자동으로 표시하려면 플러그인을 사용하는 방법과 함수를 사용하는 두 가지 방법을 생각해볼 수 있습니다.

이 기능을 하는 플러그인의 경우 Append Link on Copy와 Add Link to Copied Text 정도가 있습니다.

소개한 두 플러그인은 모두 오랫동안 업데이트가 안 되고 있기 때문에 보안 문제나 다른 플러그인과의 충돌 문제가 발생할 우려가 있습니다.

실제로 Wordfence 보안 플러그인에서는 Add Link to Copied Text 플러그인이 업데이트가 안 되고 방치되어 포기된 것으로 보인다는 경고를 표시합니다.

업데이트: 위에서 언급한 플러그인은 오랫동안 업데이트가 되지 않고 있습니다. 다른 플러그인을 찾아보니 마땅한 플러그인이 검색되지 않네요. 플러그인 대신 아래의 방법을 시도해보시기 바랍니다.

코드 사용

하지만 이런 단순한 기능을 위해 플러그인을 설치하는 것은 비추입니다. 아무래도 플러그인을 많이 사용하는 것은 사이트에 좋지 않은 영향을 줄 수 있기 때문입니다.

이 글에서 jQuery로 구현하는 방법이 나와 있습니다(jsfiddle). 또는, 다음과 같은 코드를 사용 중인 테마의 함수 파일(functions.php)에 추가하면 방문자들이 블로그 글 복사 시 출처가 자동으로 표시되도록 할 수 있습니다.

function add_copyright_text() {
if (is_single()) { ?>
<script type='text/javascript'>
function addLink() {
if (
window.getSelection().containsNode(
document.getElementsByClassName('entry-content')[0], true)) {
var body_element = document.getElementsByTagName('body')[0];
var selection;
selection = window.getSelection();
var oldselection = selection
var pagelink = "<br /><br /> 출처: <?php the_title(); ?> <a href='<?php echo wp_get_shortlink(get_the_ID()); ?>'><?php echo wp_get_shortlink(get_the_ID()); ?></a>"; //Change this if you like
var copy_text = selection + pagelink;
var new_div = document.createElement('div');
new_div.style.left='-99999px';
new_div.style.position='absolute';

body_element.appendChild(new_div );
new_div.innerHTML = copy_text ;
selection.selectAllChildren(new_div );
window.setTimeout(function() {
body_element.removeChild(new_div );
},0);
}
}
document.oncopy = addLink;
</script>

<?php
}
}
add_action( 'wp_head', 'add_copyright_text');

위의 코드를 적용하면 글 출처 링크가 http://www.example.com/?p=123과 같이 기본 고유주소 형식으로 표시됩니다. 만약 로그아웃 사용자에게만 위의 코드를 적용하려면 if (is_single()) 대신 다음 코드를 사용합니다.

if (is_single() && !is_user_logged_in())

마찬가지로 관리자의 경우 글을 복사해도 출처가 표시되지 않도록 하려면 다음 코드를 사용합니다.

if (is_single() && !current_user_can('administrator'))

위와 같이 관리자 여부를 체크하는 코드를 삽입해주지 않으면 내 블로그의 글을 복사하여 사용하려고 할 때마다 "출처"가 자동으로 표시되어 불편할 수 있습니다.

업데이트: 개선된 코드

상기 코드가 최신 워드프레스(워드프레스 6.5.4)에서도 잘 작동하고 있습니다만, 코드를 조금 개선해 보았습니다.

// This WordPress script enhances the user experience by appending 
// a citation link to the text copied from single posts. It uses JavaScript 
// to dynamically add the page title and a shortlink at the end 
// of the selection, ensuring the source is always credited when shared.
// 이 워드프레스 스크립트는 단일 포스트에서 복사된 텍스트에 인용 링크를 추가하여 
// 사용자 경험을 향상시킵니다. 페이지 제목과 짧은 링크를 선택한 텍스트 끝에 
// 동적으로 추가하는 자바스크립트를 사용하여 공유될 때 항상 출처가 표시되도록 합니다.

function add_copyright_text() {
    if (is_single()) {
        ?>
        <script type='text/javascript'>
        document.addEventListener('copy', function(e) {
            var textToCopy = window.getSelection();
            if (document.body.contains(document.querySelector('.entry-content')) &&
                textToCopy.rangeCount > 0 && textToCopy.containsNode(document.querySelector('.entry-content'), true)) {
                
                var pageTitle = "<?php echo addslashes(get_the_title()); ?>";
                var pageLink = "<?php echo wp_get_shortlink(); ?>";
                var copyFooter = "Source: " + pageTitle + " " + pageLink;

                var newRange = document.createRange();
                var tempDiv = document.createElement('div');
                tempDiv.style.position = 'absolute';
                tempDiv.style.left = '-99999px';
                document.body.appendChild(tempDiv);

                // Adjust how the footer is appended to potentially remove extra line breaks
                tempDiv.innerText = textToCopy.toString().trim() + "\n\n" + copyFooter;
                newRange.selectNodeContents(tempDiv);
                textToCopy.removeAllRanges();
                textToCopy.addRange(newRange);

                window.setTimeout(function() {
                    document.body.removeChild(tempDiv);
                }, 0);
            }
        });
        </script>
        <?php
    }
}
add_action('wp_head', 'add_copyright_text');

워드프레스가 아닌 플랫폼용 자바스크립트

워드프레스가 아닌 플랫폼에서는 이 글의 javascript 스크립트를 응용할 수 있습니다. 다음 자바스크립트로 테스트해보시기 바랍니다.

<script type="text/javascript">
// <![CDATA[
function addLink() {
    var textToCopy = window.getSelection();
    if (textToCopy.rangeCount > 0 &&
        document.querySelector('.entry-content') &&
        textToCopy.containsNode(document.querySelector('.entry-content'), true)) {
        
        var bodyElement = document.body;
        var pageUrl = document.URL;
        var pageTitle = document.title;  // Dynamically retrieve the page title
        var pageLink = "\n\nSource: " + pageTitle + " <a href='" + pageUrl + "'>" + pageUrl + "</a>";
        
        var newDiv = document.createElement('div');
        newDiv.style.position = 'absolute';
        newDiv.style.left = '-99999px';
        bodyElement.appendChild(newDiv);

        // Appending and ensuring line breaks are recognized by using innerHTML and <br> tags
        newDiv.innerHTML = textToCopy.toString().replace(/\n/g, '<br>') + pageLink;
        textToCopy.selectAllChildren(newDiv);

        window.setTimeout(function() {
            bodyElement.removeChild(newDiv);
        }, 0);
    }
}

document.addEventListener('copy', addLink);
// ]]>
</script>

워드프레스 사이트에서 테스트해보니 잘 작동하네요. 티스토리 등에서도 잘 작동할 것입니다.

참고:

• 워드프레스 키보드 단축키 변경 방법 (+반복 작업 자동화)
• 단축링크를 사용하여 워드프레스 글 링크 공유하기
• 링크 공유 팝업 창 띄우기