blog
初学者のひとりごとメモ
カテゴリ: 学習メモ
タグ:WordPress
WordPressの投稿画像を端末で拡大したい(Advanced Custom Fieldsも含め)
投稿日:2024年3月5日
ユーザーが端末で画像を拡大閲覧できる、というのは、Webアクセシビリティの初歩の初歩。
WordPressにはFancyBoxという画像拡大用のプラグインがあるのでとりあえず入れてみたが、併せて画像の投稿時に「添付ファイルの表示設定」の中にあるリンク先の設定を変更しなければならない。
この設定が見当たらない。
試したこと
- クラシックエディタでの投稿:
Gutenbergでは表示されないという話があったのでクラシックエディタを有効にしてみたが、依然見当たらず - image_default_link_typeの変更(これは投稿時の初期設定の方だからやや内容がずれるが)
解決
画像を挿入した際、右手に表示される設定ではなく、直接画像のリンクを弄る。
ついでに気になるところ
こうなってくると、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タグで括って完了。