WordPressで特定の画像に右クリック禁止を設定する

#やりたいこと
・WordPressで特定の画像に右クリック禁止を設定したい

#CSSで設定する

style.css

.copy-guard {
	pointer-events: none;
}

class="copy-guard"を指定した画像を選択できなくなるのでお手軽ですが、右クリックは出来ます。
コンテキストメニューに「画像を保存」が表示されなくなるので、簡単に対応するならコレ。

#JavaScriptで設定する

index.html

<script type="text/javascript">
document.querySelector('.copy-guard').getElementsByTagName('img')[0].oncontextmenu = function () {return false;} //コンテキストメニューを表示しない
document.querySelector('.copy-guard').getElementsByTagName('img')[0].ondragstart = function () {return false;} //ドラッグさせない
</script>

ブロックエディタの場合、クラスを設定するとHTML上では↓のようになるので、querySelector('.copy-guard')の中のimgを指定するようにします。

index.html

<div class="wp-block-image copy-guard">
<figure class="size-large is-resized">
<img loading="lazy" src="（ファイルURL）" alt="" class="wp-image-275" width="300" height="225" />
</figure>
</div>

#余談その１

CSSでpointer-events: none;を指定している画像に、JavaScriptでoncontextmenu = function () {return false;}を指定すると、コンテキストメニューが表示されます。

どっちかだけにしたほうがいいです。

#余談その２

JavaScriptを追加するのも面倒だったので、WordPressのブロックエディタ上の「HTMLで編集」機能を使ってoncontextmenu="return false;"をimgタグに仕込もうとしたら、ブロックが壊れました。

なので、WordPressで仕込む場合は、CSSかJavaScriptでやったほうがいいです。
クラシックエディタは大丈夫だと思う。

#以下、愚痴

「写真を絶対にコピーできないようにインターネットに載せたい」という要望があり、最終的に対応した結果が右クリック禁止なんですけど、もうインターネットに載せるのやめてもらっていいですかって言いたくなっちゃったよね(´・ω・`)ｿﾝﾅﾉﾑﾘﾀﾞﾖ