WordPress

【WordPress】特定の画像には Easy FancyBox を適用させない方法

投稿日:2019年11月12日 更新日:

1. WordPress の Easy FancyBox プラグインについて

Easy FancyBox という WordPress プラグインを導入すると、画像URLを指定したリンクをクリックすると、その画像をポップアップ表示してくれるようになります。fancybox というライブラリを利用しているプラグインです。

このウェブサイトでも導入していますので、2つ例を示します。

画像をクリックしてください
クリックしてください → ハロー、子年(ねづみどし)!

問題点

Easy FancyBox で少し困るのは、何もしないと「画像へのリンク」すべてに、この Easy FancyBox が適用されてしまうことです。

2. 特定の画像リンクで、Easy FancyBox を適用させない方法

特定のリンクに Easy FancyBox を適用させない方法はいろいろあると思いますが、その1つを紹介します。

といっても簡単で、以下のように <a> タグに onclick 属性を記述するだけです(赤字の部分です)。

<a href="xxxxx.png" onclick="jQuery(this).off()" target="_blank">
  <img src="xxxxx.png" width="xxx"/> height="xxx"/>
</a>

何をしているのかと言うと、jQueryoff() メソッドを使い、このリンクのイベントハンドラーを削除しています。FancyBox 自体が jQuery に依存しているので、jQuery のメソッドが問題なく使えるはずです。

3. デモ

では、先程の2つの例にこの方法を適用してみます。

画像をクリックしてください
クリックしてください → ハロー、子年(ねづみどし)!

※ この 2つの例では、target="_blank" も追加しているため、別タブで画像が開くはずです。

📂-WordPress

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPress

WordPress 5.4 以降で記事にリンクを貼る際のオプション

WordPress 5.4 以降で、記事にリンクを貼る際のオプションについて説明します。

WordPressで作られたサイトの利用テーマを調査する

ブラウザでサイトを見ていて、「これは WordPressを使っているのか?」「WordPressを使っているとしてら、何のテーマを使っているのか?」を調査する方法です。 ※ 100%分かるわけではあり …

WordPress

【WordPress】Table of Contents Plus が生成した目次の直前に、ウィジェット(広告など)を表示するコードを自分で書く

Table of Contents Plus (TOC+) という WordPressプラグインが生成した目次の直前に、ウィジェット を表示する方法について説明します。 ※ 2018年6月6日: 目次 …

WordPressサイトで現在表示しているページの編集ページを開くブックマークレットを作りました

目次概要編集ページへのURL作成したブックマークレットまとめ 概要 WordPressにログインした後、通常のページ(管理ページではなく)を表示すると、画面上部に管理ツールバーが表示されます。このツー …

WordPress の投稿記事に画像を貼る手順と sizes 属性値の変更

目次1. はじめに2. 事前の追加設定3. 投稿記事を作成する時に、画像を挿入する手順[メディアを追加] ボタンから画像を挿入4. 参考 1. はじめに この Webサイトは WordPress で作 …