ショウジンブログ

Learn as if you will live forever, Live as if you will die tomorrow.

投稿本文のimg要素についているa要素に任意のclass名をつける@WordPress

Sponsored Links

投稿本文に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デザイナー養成講座)

WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)