賢威7.0

賢威7サイトで右クリックとテキストの選択を禁止する方法

こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回の記事では、WordPressテーマ:賢威7サイトで右クリックとテキストの選択を禁止する方法を紹介したいと思います。

特にアフィリエイトなどのサイトで、コンテンツをコピーされた、悪用されたという話を聞いたりしますが、右クリックやテキストなどの選択を禁止して悪質なコピーを防止しようというものです。メインコンテンツをコピーされたくない場合が多いと思うので、ここでは

  1. サイト全体を右クリック禁止にする
  2. メインコンテンツで右クリック禁止にする
  3. サイト全体でテキストなどの選択を禁止する
  4. メインコンテンツで選択を禁止する
  5. 1~4を組み合わせてみる

という5つのカスタマイズを紹介していきます。

完璧にコピーを防止する方法は聞いたことがありませんが、下で紹介するカスタマイズを使えばコピーされにくいサイトが出来上がると思います。コピーされて困っていた方、ぜひお試し下さい。

[ad]

※ 今回はPHPファイルを編集していきます。管理画面に入れなくなることもあるので、PHPコードは注意して編集して下さい。

1. カスタムスクリプト用ファイルを作成

今回のカスタマイズはjQueryで右クリックやテキストの選択を禁止するので、jQueryなどのJSスクリプトを書くためのファイルを作ります。

※ ファイルやフォルダなどを作る作業は、FileZillaのようなFTPクライアントを使うのがオススメです。

1-1. 親テーマを使う場合

親テーマ(賢威7本体)を使ってカスタマイズしていく場合には、(最初からある)jsフォルダに、custom-script.js という名前のファイルを作ります。

keni7-copy-guard-custom-script-folder

1-2. 子テーマを使う場合

子テーマを使う場合、これまで js という名前のフォルダを作っていなければ js という名前のフォルダを作ります。賢威7の子テーマの作り方については、以前書いた記事があるのでよかったら参考にして下さい。

賢威7.0で子テーマを使用する方法とその不具合の直し方

親テーマと同じように custom-script.js という名前のファイルを作り、js フォルダの中に入れておきます。

2. functions.php からjsファイルを読み込む

もう少しjsコードを書くための準備が続きます。

jsファイルをアップロードしただけではファイルが読み込まれないので、functions.phpのようなPHPファイルから、jsファイルを読みこませる必要があります。

親テーマをお使いの場合には親テーマの functions.php に、子テーマをお使いの場合には子テーマの functions.php に以下のコードを追加します。

// カスタムスクリプト用jsファイルの読み込み
function wcl_custom_script() {
    wp_enqueue_script('custom-script', get_template_directory_uri() .'/js/custom-script.js','','',true);
}
add_action('wp_enqueue_scripts', 'wcl_custom_script');

custom-script.js ファイルにはコードを書いていないので何も変わりませんが、これでカスタムスクリプト用のjsファイルを読みこませることができました。

2-1. jsファイルが読み込まれているかを確認するには

jQueryなどのコードを書いていると、思ったように動かないことが少なくありません。もちろん書いたコードが間違っていることも多いんですけど、コードを書いたファイル自体が読み込まれていないことも意外とあります。

どこでエラーが起こっているのか確認した方が解決しやすいので、もし思ったように動かないときには、下のようなコードを custom-script.js に追加するのがオススメです。

jQuery(function($) {
    $('body').css('background', 'red');
}); 

↓ コード編集後

keni7-copy-guard-custom-script-background-red

上のコードはサイト全体が赤くなるものなんですが、もし何も変わらない場合には、ファイル名やjsファイルを入れるフォルダなどを確認してみて下さい。

3. サイト全体で右クリック禁止にする

ここまでで custom-script.js の読み込みまでできたので、ここからはjsコードを追加してコピー対策をしていきます。まずはサイト全体で右クリックを禁止にする方法です。

以下のコードを custom-script.js に追加すると

jQuery(function($) {
    $(document).bind('contextmenu', function(e) {
        return false;
    });
}); 

サイト全体で右クリックが出来なくなります。

3-1. メインコンテンツのみ右クリックを禁止するには

右クリックを禁止すると普通にサイトを見ているだけの人も使いづらくなってしまうので、右クリック禁止の範囲を狭めてそれなりに使いやすいサイトにしていきます。

先ほど custom-script.js に追加したコードを下のコードで置き換えると、

jQuery(function($) {
    $('.main-conts').bind('contextmenu', function(e) {
        return false;
    });
}); 

メインコンテンツ以外では右クリックが出来るようになりました(メインコンテンツでは編集前と同じように右クリックできません)。

keni7-copy-guard-custom-script-after-1

4. サイト全体でテキストなどの選択を禁止する

今度はテキストや画像などの選択を禁止にする方法です。

先ほど右クリックを禁止しましたが、テキスト選択後に Ctr + C のようなショートカットを使うと簡単にコピーできてしまいます。そもそも右クリックせずにショートカットでコピーする人もいるので、テキストの選択も禁止して更にコピーされにくい状態にしていきます。

以下のコードを custom-script.js に追加すると、サイト全体でテキストの選択が出来なくなります。

jQuery(function($) {
    $('html').on('selectstart dragstart', function(e) { 
        e.preventDefault(); 
    });
}); 

保存・更新すると、ヘッダー画像やサイトタイトルのようにメインコンテンツ以外の要素は選択できるようになりました。

keni7-copy-guard-custom-script-after-2

4-1. サイト全体でテキストの選択も右クリックも禁止するには

サイト全体でテキストの選択も右クリックも禁止する場合には、以下のコードで置き換えます(真っ更な状態の custom-script.js に以下のコードを追加します)。

jQuery(function($) {
    $(document).bind('contextmenu', function(e) {
        return false;
    });
    $('html').on('selectstart dragstart', function(e) { 
        e.preventDefault(); 
    });
});

4-2. メインコンテンツのみテキストの選択を禁止するには

メインコンテンツのみ右クリックを禁止するには、何も書いていない状態の custom-script.js に以下のコードを追加します。

jQuery(function($) {
    $('.main-conts').on('selectstart dragstart', function(e) { 
        e.preventDefault(); 
    });
}); 

4-3. メインコンテンツのみ右クリックとテキストの選択を禁止するには

メインコンテンツで、右クリックとテキストの選択の両方を禁止するには、以下のコードを真っ更な状態の custom-script.js に追加すれば大丈夫です。

jQuery(function($) {
    $('.main-conts').bind('contextmenu', function(e) {
        return false;
    });
    $('.main-conts').on('selectstart dragstart', function(e) { 
        e.preventDefault(); 
    });
}); 

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。