【コピペ対策】記事をコピーされた時に文字数制限ができるコードを公開

作成日 2018/05/22

更新日 2018/06/29

- フリーランスの生活と仕事

Ads by Google

こんにちは！Tamakoです。

アフィエイターやブロガーの皆様は、自分の記事がコピペされて「ぐぬぬ」と唸ったことありませんか？

Webの世界では仕方のないことと割り切っていても、あまり気持ちのよいものではないですよね。

そんなグチをこぼしていたところ、相方がwordpress限定で便利なコードを作ってくれました。

右クリックのコピーOK、ただし決めたれた文字数しかコピーできない素敵仕様です。

これならユーザビリティをそこなわないですむでしょ！

名づけて『ちょっとだけよ2018』…いや適当につけただけです。すみません。

なるべく簡単に説明したいと思います。

1 ちょっとだけコピーできるコードの挿入方法
- 1.1 １．wordpress内のfunctions.phpへコードを挿入
- 1.2 ２．cpdm.jsファイルをwordpress内のjsフォルダ内へ設置
2 wordpress内へのファイルの設置方法
- 2.1 FTPソフトを使う場合
- 2.2 サーバー内でフォルダを操作する場合
3 functions.phpについて
4 まとめ

ちょっとだけコピーできるコードの挿入方法

今回の方法はやや中級者向けの方法です。

操作の前に必ずバックアップを取ってください。お願いします。

作業は二点だけです。

wordpressのfunctions.phpにコードを書き込み、jsフォルダに指定のファイルをアップします。

１．wordpress内のfunctions.phpへコードを挿入

まずはwordpress内のfunctions.phpの中にコードを挿し込みます。

wordpressの管理画面、外観⇒編集の中にfunctions.phpがあるので探してみましょう。

子テーマと親テーマの両方にfunctions.phpがある場合は子テーマを優先させてください。

functions.phpの一番下に、下記のコードを記載します。

これは次の章で説明するJSファイルを読み込ませるためのコードです。

function scripts_strcnt_seigen() {
    wp_enqueue_script( 'strcnt_seigen', get_stylesheet_directory_uri() . '/js/cpdm.js', array('jquery'), '1.0', false );
}
add_action( 'wp_enqueue_scripts', 'scripts_strcnt_seigen' );

function scripts_strcnt_seigen() {

wp_enqueue_script( 'strcnt_seigen', get_stylesheet_directory_uri() . '/js/cpdm.js', array('jquery'), '1.0', false );

}

add_action( 'wp_enqueue_scripts', 'scripts_strcnt_seigen' );

２．cpdm.jsファイルをwordpress内のjsフォルダ内へ設置

cpdm.jsファイルはこちらからダウンロードできます。

このcpdm.jsファイルを、wordpressのテーマ内に設置します。

wordpressの管理画面からはアップデートできないので注意してくださいね。

FTPソフトか、サーバーのファイルマネージャーから操作してファイルをアップしましょう。（次の章で簡単に説明してます）

設置場所は自分の使っているテーマの子テーマ内です。

・public_html（Xサーバーの場合）⇒　wp-content　⇒　themes　⇒　自分の使っているテーマ　⇒　使っているテーマの子テーマ

の順番に追っていくと分かりやすいです。

・使っているテーマに子テーマがある場合
子テーマのjsフォルダにcpdm.jsファイルをアップします。
jsフォルダがない場合は作成してください。

・使っているテーマに子テーマがない場合
親テーマのjsファイルにcpdm.jsファイルをアップします。
※【注意】ただし子テーマがないと親テーマに書いたコードは、更新した際に全て消えます。できたら子テーマを作っておきましょう。

またテーマがcocoonの場合は、子テーマ内のjavascript.js内に「cpdm.js」のコードをコピペするだけです。

ファイルの中には下記のコードが書かれています。

(function($){
  // copy event
  document.addEventListener('copy', function(e){
    var text_cnt = 100; // string count
    var str_text = window.getSelection().toString();
    var ss_text = str_text.substr(0,text_cnt);
    var userA = window.navigator.userAgent.toLowerCase();
    if (userA.match(/(msie|MSIE)/) || userA.match(/(T|t)rident/)) {
      window.clipboardData.setData("Text", ss_text); // IE
    } else {
      e.clipboardData.setData('text/plain', ss_text); // Chrome, Firefox
    }
    e.preventDefault();
  });
})(jQuery);

(function($){

// copy event

document.addEventListener('copy', function(e){

var text_cnt = 100; // string count

var str_text = window.getSelection().toString();

var ss_text = str_text.substr(0,text_cnt);

var userA = window.navigator.userAgent.toLowerCase();

if (userA.match(/(msie|MSIE)/) || userA.match(/(T|t)rident/)) {

window.clipboardData.setData("Text", ss_text); // IE

} else {

e.clipboardData.setData('text/plain', ss_text); // Chrome, Firefox

}

e.preventDefault();

});

})(jQuery);

var text_cnt = 100; // string countの100が文字数です。

ここの数字を変えることでコピーできる文字数が変わります。お好みでどうぞ。

これで作業は終了です。

サイト内で右クリックして実際にコピーをしてみてください。

成功していたら指定した文字数以上はコピーできないはずです。

wordpress内へのファイルの設置方法

wordpress内のファイルの編集は、FTPソフトを使う方法と、サーバーのファイルマネージャーを操作するふたつの方法があります。

FTPソフトを使う場合

Techacademyさんのブログで、FTPソフトダウンロード方法と使用方法について記事があります。わかりやすいので参考にしてみてください。

・今さら聞けない！FFFTPの使い方ーTechacademy

サーバー内でフォルダを操作する場合

サーバー内でフォルダを操作する場合は、各サーバーで方法が異なります。下記が操作の参考になりますのでどうぞ。

・Xサーバー　ファイルマネージャー

・サクラ　ファイルマネージャー

・ロリポップ　ファイルマネージャー

初心者の場合は、サーバーのファイルマネージャーを編集する方がわかりやいかと思います。

functions.phpについて

functions.phpはサイトの中枢を担うファイルで、ちょっといじっただけで、急に真白になったり、動かなくなったり、かなりのツンデレ仕様です。

そのためバックアップは必ずとりましょう。

またfunctions.phpを管理できるプラグインがあるので、そちらを使用する方が簡単かもしれません。

Code Snippets

まとめ

自分が一生懸命書いた記事がコピーされるのはイラッとします。

しかしサイトをコピーできる方法なんて沢山あるし、最終的にはいたちごっこです。キリがないんですよね。

結局は、よい記事を書き、ユーザビリティを追求し、誰にもマネできないサイトを作り上げることが一番の対策になると思います。

一歩前へ。その気持ちを忘れないようにしたいです。

もしなにかあれば、お問い合わせかtwitterまでご連絡くださいね。

ではでは。

Ads by Google