Help us understand the problem. What is going on with this article?

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>

余談その1

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

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

余談その2

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

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

以下、愚痴

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

mei331
想像と創造を繰り返す黒いヒツジ。ヒツジとペンギンが好き。フルーツサンドを探しています。
https://arca-works.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした