[WordPress]ブログ記事のコピー時にソースを自動的に表示する方法

このブログでは、記事無断複製と 画像無断参照 ため、過去数ヶ月の間に、いくつかのカテゴリーで書かコピーがないように設定したが、（参照）、これにより、文のコピー防止の機能ではなく、ユーザーの不便がこのように書かれ、コピー防止機能を解除し、代わりに書かコピー時出所を表示するように変更しました。

[この記事は、2024年4月12日に最後に更新されました。 ]

ブログ記事のコピー時にソースを自動的に表示する方法

プラグインの使用

WordPressでブログ記事のコピー時にソースを自動的に表示するには、プラグインを使用する方法と関数を使用するXNUMXつの方法を考えてみることができます。

この機能をするプラグインの場合 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'))

上記のように管理者かどうかをチェックするコードを挿入しないと、私のブログの記事をコピーして使用しようとするたびに「ソース」が自動的に表示され、不便になることがあります。

アップデート：改善されたコード

上記のコードが最新 WordPress(WordPress 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.
// 이 WordPress 스크립트는 단일 포스트에서 복사된 텍스트에 인용 링크를 추가하여 
// ユーザー 경험을 향상시킵니다. 페이지 제목과 짧은 링크를 선택한 텍스트 끝에 
// 동적으로 추가하는 자바스크립트를 사용하여 공유될 때 항상 출처가 표시되도록 합니다.

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');

WordPress以外のプラットフォーム用のJavaScript

WordPressではないプラットフォームでは この記事javascriptスクリプトを適用できます。次の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>

WordPress サイトでテストしてみるとうまく動作しますね。ティーストーリーなどでもうまく機能します。

メモ：

• WordPress キーボードショートカットの変更方法（+繰り返し操作の自動化）
• 短縮リンクを使用して WordPress 記事リンク共有
• リンクを共有ポップアップウィンドウ表示