画像上で右クリック禁止・ドラッグ操作禁止にする方法

ご要望「画像の無断使用に対する抑止力がほしい」

WordPressテーマの改修依頼で、掲載画像に対し「右クリック」と「マウスでのドラッグ操作」を禁止して、画像の無断使用に対する抑止および「画像を使わないでください」という意思表示を行いたいというご要望がありました。
どうしてもあの手この手でダウンロードできてしまうので完全な防止にはなりませんが、方法を考えます。

課題

• ページ全体に右クリック・ドラッグ禁止は不便なので画像のみに適用する
• WordPressでどう実行するか

結果的にはショートコードを作って用途に合わせて適用する方法にしました（後述）

考えた過程

プラグインを使う？

「WordPress」「コピーガード」など色々な単語で検索した結果、私がプラグインを導入する基準にしている条件にはまるものが無かったので諦めました。
選定基準はインストール数、評価、メンテナンス履歴など色々ですが、なんとなく腑に落ちなかったので見送り。

先日参加したWordCamp Tokyo2017で紹介されていた、誰かが文章をコピーしたら通知してくれるプラグインは面白いので紹介します。
どこかの案件で使ってみたいな。

WordPress：誰かが記事をコピーしたら教えてくれるプラグインCCC(Check Copy Contents)を作ってみた。

プラグイン作者さんのブログ：着ぐるみ追い剥ぎペンギン

ショートコードで実装しよう。

右クリックと画像ドラッグを禁止するためのjavascriptをショートコードで呼び出して好きな場所に挿入できるようfunctions.phpに以下を記載します。

function copyGuard() {
    return "onMouseDown='return false;' onSelectStart='return false' oncontextmenu='return false;'";
}
add_shortcode('cg', 'copyGuard');

[cg]で読み込む

右クリック禁止で画像のコピーガード(ドラッグ禁止対策追加)

参考ブログ：Web雑記帳

でもこの方法だとimgタグの中に書けません。（ブロックのビジュアルとHTML編集を切り替えたらショートコードが消される）
もう少し工夫しましょう。

という訳でショートコードで作るのはscript部分だけじゃなくて、divにくっつけて枠として作る事にしました。

結果

以下をfunctions.phpに書く。

function copyGuardBox( $atts, $content = null ) {
return '<div onMouseDown="return false;" onSelectStart="return false" oncontextmenu="return false;" class="cgb">'.$content.'</div>';}
add_shortcode('cgb', 'copyGuardBox');

そして編集画面では下記の様にショートコードで囲って使います。（cgb=CopyGuardBoxの略にした）

[cgb]ここに画像を貼り付ける[/cgb]

デモ

この画像に使っています。
メディアファイルにリンクしているので画像をクリック出来るけど、右クリックとドラッグ操作はできない状態になっています。