やりたいこと
・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(){returnfalse;}//コンテキストメニューを表示しないdocument.querySelector('.copy-guard').getElementsByTagName('img')[0].ondragstart=function(){returnfalse;}//ドラッグさせない</script>
ブロックエディタの場合、クラスを設定するとHTML上では↓のようになるので、querySelector('.copy-guard')
の中のimg
を指定するようにします。
index.html
<divclass="wp-block-image copy-guard"><figureclass="size-large is-resized"><imgloading="lazy"src="(ファイルURL)"alt=""class="wp-image-275"width="300"height="225"/></figure></div>
余談その1
CSSでpointer-events: none;
を指定している画像に、JavaScriptでoncontextmenu = function () {return false;}
を指定すると、コンテキストメニューが表示されます。
どっちかだけにしたほうがいいです。
余談その2
JavaScriptを追加するのも面倒だったので、WordPressのブロックエディタ上の「HTMLで編集」機能を使ってoncontextmenu="return false;"
をimgタグに仕込もうとしたら、ブロックが壊れました。
なので、WordPressで仕込む場合は、CSSかJavaScriptでやったほうがいいです。
クラシックエディタは大丈夫だと思う。
以下、愚痴
「写真を絶対にコピーできないようにインターネットに載せたい」という要望があり、最終的に対応した結果が右クリック禁止なんですけど、もうインターネットに載せるのやめてもらっていいですかって言いたくなっちゃったよね(´・ω・`)ソンナノムリダヨ