blog

初学者のひとりごとメモ

スマートフォンを操作する手と大小の虫眼鏡

カテゴリ: 学習メモ

タグ:

WordPressの投稿画像を端末で拡大したい(Advanced Custom Fieldsも含め)

投稿日:2024年3月5日

ユーザーが端末で画像を拡大閲覧できる、というのは、Webアクセシビリティの初歩の初歩。
WordPressにはFancyBoxという画像拡大用のプラグインがあるのでとりあえず入れてみたが、併せて画像の投稿時に「添付ファイルの表示設定」の中にあるリンク先の設定を変更しなければならない。

この設定が見当たらない。

試したこと

  1. クラシックエディタでの投稿:
    Gutenbergでは表示されないという話があったのでクラシックエディタを有効にしてみたが、依然見当たらず
  2. image_default_link_typeの変更(これは投稿時の初期設定の方だからやや内容がずれるが)

解決

画像を挿入した際、右手に表示される設定ではなく、直接画像のリンクを弄る

WordPressで画像投稿時に、メディアファイルへのリンクを作成しているところ

ついでに気になるところ

こうなってくると、works個別ページの画像も拡大したい。
カスタム投稿でAdvanced Custom Fieldsを入れているのでクラシックエディタが表示される(GutenbergはACF Proのみ)のだが、上述のようにメディアファイルのリンク設定が(何故か)表示されない。
というわけで、テンプレートの方を弄ることに。

<?php $mainImage = get_field('works__main-image'); ?>
 <a class="fancyboxforwp" data-fancybox="gallery" href="<?php echo esc_url($mainImage['url']); ?>">
   <div class="works-individual__image">
     <img loading="lazy" src="<?php echo esc_url($mainImage['url']); ?>"
          alt="<?php echo esc_attr($mainImage['alt']); ?>" width="100" height="100" decoding="async">
   </div>
 </a>

各画像を、class=”fancyboxforwp” data-fancybox=”gallery”を含むaタグで括って完了。

最新のblog記事

  1. 学習メモ

    学習メモ

    XAMPPで複数サイトを管理したい

    2024年6月3日
  2. 制作日誌

    アクセシビリティ向上日誌3【ワイヤー編】

    2024年5月6日
  3. 学習メモ

    学習メモ

    CSS Nite リアルタイムでコードを共創できるオンラインエディターCodePenを活用しよう

    2024年4月26日
  1. 1
  2. 2
  3. 9
  4. 10