Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

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でやったほうがいいです。
クラシックエディタは大丈夫だと思う。

以下、愚痴

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

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
1
Help us understand the problem. What are the problem?