投稿本文のimg要素についているa要素に任意のclass名をつける@WordPress
投稿本文にimg要素を埋め込んだ場合につくa要素に任意のclass名をつける例です。
たとえば、サムネイルサイズ等、実際の画像サイズより小さい画像を表示していて、それをクリックすると拡大画像が表示される。これはWordPressのデフォルトの挙動です。(画像にリンクさせないこともできます)
この「拡大画像を表示」するときにjQuery等のプラグインを使って動き等をつけるのに、任意のclass名をつける必要があったりします。その例です。
以下の例ではclass名に「fancybox」を追加しています。
functions.php
<?php /** 投稿記事に埋め込んだimgのa要素にclass名「fancybox」を追加 **/ function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ){ $classes = 'fancybox'; // check if there are already classes assigned to the anchor if ( preg_match('/<a.*? class=".*?">/', $html) ) { $html = preg_replace('/(<a.*? class=".*?)(".*?>)/', '$1 ' . $classes . '$2', $html); } else { $html = preg_replace('/(<a.*?)>/', '$1 class="' . $classes . '" >', $html); } return $html; } add_filter('image_send_to_editor','give_linked_images_class',10,8);
WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)
- 作者: 中島真洋 ,ロクナナワークショップ
- 出版社/メーカー: 技術評論社
- 発売日: 2015/06/23
- メディア: 大型本
- この商品を含むブログ (1件) を見る