トップ » はるかのひとりごと » SEO » WordPress4.4以降で画像ポップアップができない対策
はいこんにちは。
はるかです。

WordPress4.4では、レスポンシブイメージの導入に伴い
画像ポップアッププラグインが動作しなくなった対策を
お知らせしたいと思います。

1.なぜポップアップが機能しなくなったか

それでは、なぜ急に機能しなくなったのか説明します。
WordPressの殆どのプラグインが、サムネイル画像からリンクされている
リンクを辿って、大きな画像をポップアップしています。
(a hrefタグを使っている。レスポンスイメージはそれが無い)

ですので、サムネイル画像をクリックすると大きな画像に飛ぶリンクが無いので
全く機能しないのです。
画像を押してもリンクが無いため、無反応状態となります。

WordPres4.4から、新しい機能である「レスポンシブイメージ」というのが
搭載されました。
これは、使用しているデバイスに応じた最適な画像を
自動的に生成、表示するシステムです。
よって、リンクを押して拡大画像にリンクしなくても
表示しているサイズが最適サイズだという事になるのです。

ですが私のブログのように、画像を拡大して隅々まで見せたい場合、
デバイスよりはるかに大きな画像をリンクして
みてもらう様にしているブログもあるのです。

今回はWordPressを最新に保ちつつ、
従来と同じ方式でリンク(a href)を生成するという方法をお知らせします。
これにより、正常にポップアップが機能します。

2.画像がポップアップしない対策

対策するには、WordPressの隠し機能である、
全オプション設定画面を利用します。
よく似たスイッチがありますので、必ず検索して
間違いなく操作して下さい。

また、意味が分からず設定を行うと、修復不能な不具合が
発生する場合がありますので、細心の注意を払って設定して下さい。

オプション画面を表示する

まず、ダッシュボードを表示して下さい。
私のブログなら、こうなっています。

WordPressのダッシュボード画面
ダッシュボードのURL

ここの赤線のところ、つまりURLです。
最後が/wp-admin/になっているはずです。
この後ろに/options.phpを追加するのです。
つまり
https://www.harukas.org/blog/wp-admin/options.php
を開きます。

ご自分のブログにあわせて
<ブログのURL>/wp-admin/options.php
にすれば良い訳ですね。
これで、全オプションの表示画面になります。

画面はこんな感じです。
全オプション表示

イメージのオプションを設定する

ctrl+fキーなどで、文字列検索にします。
そして
image_default_link_type
と入力して下さい。

すると1件ヒットするはずです。
その右側のフィールドは、空白になっています。
そこに
file
と入力して下さい。

画面はこんな感じです。
linktypeの変更

ページの一番下までスクロール(又はENDボタン)すると
「変更を保存」がありますので
ボタンを押します。
必ず変更を保存ボタンを押して下さいね。

以上でブラウザをリロードすると、従来通り
画像をサムネイルから、大きな画像へリンクするようになります。

困った方は、是非ともやってみてくださいね。
では、またね。
この記事は 2020年06月27日09時12分 に更新

コメント一覧

  1. magu
    こんにちわ。上の説明通りに設定を行ったのですが、なかなかうまく行きません。はるかさんの様にポップアップを実装したいのですが、プラグインなどは使っていますか?教えてください。
    • はるか
      こんにちは。私は「FancyBox for WordPress」を使っています。
      瞬時の拡大や画像clickで閉じたりと、私から見たら不要な機能(animeやボタンをx押さないと駄目等)が
      沢山あったので設定で調整できるこれを使っています。

      恐らく、別のツールを使っていてコードを修正しなくても機能しそうですね。
      私はアメブロの画像を、適当なディレクトリ(uploadではない)にしているのですが
      正しく機能しています。恐らく単純にimgタグとリンクを見ている感じだと思います。

      モバイルの時は、機能すると都合が悪いのでスケールを300%までピンチできるように設定しています。
  2. さーさん
    ありがとうございます!画像にリンクがないのは気がついていたのですが、どこをいじればいいか全然わからなくてほんとに困っていました。助かりました
    • はるか
      どうもです。
      いままでちゃんと動いていたのに、急に動かなくなると焦りますよね。
      うまくいって、良かったです(*’∀’*)

コメントする

Gravatarに登録してログインすると自分専用のアバターを表示できます。

コメントを残す





鈴木はるかのプロフィール画像
(Haruka Suzuki)
仕事:金融システムのSE
好きな物:スイーツ、絶景
趣味:お菓子/アニメ/多趣味

人気の高い記事

  1. 食戟のソーマゆきひら流進化形のり弁を再現
  2. ゆきひら流シャリアピンステーキ丼
  3. 食戟のソーマゆきひら流 鶏卵の天ぷら丼を再現
  4. 食戟のソーマ5話のさわらおにぎり茶漬け
  5. ゆきひら流タラのお柿揚げ
  6. 時限式・生意気小僧風 原始肉(マンガ肉) ゆきひら・真を再現
  7. 食戟のソーマ16話のりんごのリゾットを再現
  8. 家電はなぜ壊れるのか?専門家が回答してみた
  9. アニ菓子とは
  10. 食戟のソーマ13話ゆきひら流スフレオムレツ
  11. ゆきひら流ビーフシチュー秋の選抜スペシャルを再現
  12. 食戟のソーマ 胡椒餅(フージャオピン)を再現
  13. 食戟のソーマ 熊肉のメンチカツを再現
  14. 食戟のソーマ ゆきひら流焦がし蕎麦の再現
  15. うずらの詰め物リゾットと卵 生意気小僧風 を再現
  16. 食戟のソーマ 時限式麻婆カレー麺の再現
  17. 葬送のフリーレン 馬鹿みたいにでかいハンバーグを再現
  18. はるかのミルクキャラメル
  19. 北海道講座印のスペシャル豪雪うどんを再現
  20. すみれ印の唐揚げロールを再現してみた
  21. ハウルのベーコンエッグを再現
  22. 食戟のソーマ さつま地鶏の手羽先餃子を再現
  23. 食戟のソーマ 鹿もも肉の炭火焼き栗のソースを再現
  24. 食戟のソーマ あんきもなかを再現
  25. Airのどろり濃厚ピーチ味を再現
  26. くまみこ第8話で登場した「水かけごはん」
    くまみこ8話の水かけごはんを再現
  27. 食戟のソーマ チーズフォンデュロースカツ定食を再現
  28. 食戟のソーマ第4話の鯖バーグ
  29. ゆきひら謹製カレーリゾットオムライス
  30. ゆきひら流 香ばしバターピラフ稲荷寿司を再現

月別の過去記事を見る

最近投稿されたコメント

  1. はるか (2023年12月08日)
    羽田野さんご指摘、感謝です。言い訳ですが、冷たい空気も東進しているのでそれを表現していました。おっしゃるとおり、誤解を生む可能性がありますの…
  2. 羽田野 (2023年12月07日)
    水滴が出来る際の雲の自活現象ですね。分かりやすいです。寒冷前線、冷気の傾きが、逆のようです。
  3. はるか (2023年10月26日)
    こんばんは、リンゴとバナナというのがよく分かりませんが、アニメで葉山さんが答えたのは「クミン、カルダモン、グローブ、マンゴーチャツネ」という…
  4. 匿名 (2023年10月25日)
    8年前の投稿にですがアニメでりんごとバナナをすりおろしたとリゾットの匂いを嗅いだ葉山が答えていたのですが、このリゾットは加えてないのでしょう…
  5. はるか (2023年07月02日)
    えっささん、こんにちは。画像を出典のURLを掲載していただき、私の画像が副次的(えっささんのブログ記事が主)になっていれば、問題ありません。…
  6. えっさ (2023年07月02日)
    鈴木はるかさんこんにちはエッサといいますマンモス肉 愉しく拝見しました お願いがあります 小生blog花のしもべ日誌 (ameblo.jp)…
  7. (2023年04月11日)
    はるか様、こんにちはペコリ(o_ _)o))すみません。echoの後のipv4とipv6は、はるか様の記述通りですね。申し訳ありませんでした…
  8. (2023年04月10日)
    こんにちは(^-^)はるか様。丁寧に教えてくださりありがとうございます。(o*。_。)oペコッ>noindexは結構重要ですね。最近で…
  9. はるか (2023年04月10日)
    こんにちは。noindexは結構重要ですね。最近では、テーマでデフォルト実装されているので、わすれつつある中身ですが・・・下部のセッションの…
  10. (2023年04月09日)
    はるか様、はじめまして(o*。_。)oペコッ。こちらの記事、とても参考になりましたありがとうございます。それとは別なのですが・・・、フッター…