2013年10月09日 web関連WordPressphp

記事内の画像をいい感じのエフェクトをつけて拡大表示させるWordPressのプラグイン「Easy FancyBox」というのを導入したのですが、挿入されたaタグやimgタグに固有のクラス名がないので、CSSで調整しづらかったので、リンク付きの画像を挿入したい際に自動でclass名を追加するようにしました。

imgタグにclassを追加する場合とaタグに追加する場合を分けて書きます。

挿入されたimgタグにclass名をつける

functions.php内に記述
<?php
// 記事に画像投稿する際に、自動でクラス名をつける
function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ){
  $classes = 'fancybox img-rounded'; // separated by spaces, e.g. 'img image-link'

  // check if there are already classes assigned to the anchor
  if ( preg_match('/<img.*? class=".*?" \/>/', $html) ) {
    $html = preg_replace('/(<img.*? class=".*?)(".*?\/>)/', '$1 ' . $classes . '$2', $html);
  } else {
    $html = preg_replace('/(<img.*?)\/>/', '$1 class="' . $classes . '" >', $html);
  }
  return $html;
}
add_filter('image_send_to_editor','give_linked_images_class',10,8);
?>

管理画面で記事投稿の際に、画像を挿入すると、それに「fancybox img-rounded」という2つのクラスをつける用に設定しています。imgタグ内に既にclassがあれば、そこに追加、なければ、classを新規設定する、といった感じです。ソース内の$1、$2などは正規表現の後方参照というやつです。正規表現内の()の内容とマッチします。最初の()の内容が$1になります。

挿入されたaタグにclass名をつける

functions.php内に記述
<?php
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);
?>

aタグにclassをつける場合はimgタグの場合とほぼ同じです。正規表現の内容が少し変わるぐらい。

WordPressをカスタマイズするといつも思うのですが、コアファイルを直接触らなくても細かいところまで設定出来るのは、とても助かりますね。

この投稿へのコメント

コメントはまだありません。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CAPTCHA


ピックアップ記事

WordPressで、現在の固定ページが子ページかどうか判別する

2013年10月03日 WordPressphp
WordPressで、現在の固定ページが子ページかどうか判別する
WordPressには、is_front_page() 、is_single() など、様々な条件分岐タグが用意されていますが、子ページかどうかを判別するタグはデフォルトでは用意されていないようなので、調べてみたら、WordPress Codex内にいくつかのパターンが説明されていたので、まとめてみます。 パターン1 判別したい箇所に以下を記述 [php]<?php glob…
「WordPressで、現在の固定ページが子ページかどうか判別する」をはてなブックマークに追加

お名前.com VPSのメールサーバ設定

2011年06月11日 web関連
メール関連のサービスを起動お名前VPSのメモです。 とりあえず、メールの送受信を正常に行うには、以下のサービスを全部起動しておく。amavisdclamd.amavisddovecotpostfixメールクライアントの設定受信メールサーバメールサーバ:pop.ドメイン名アカウント:メールアドレスパスワード:メールアドレスのパスワード送信メールサーバメールサーバ:smtp.ドメイン名アカウント:メー…
「お名前.com VPSのメールサーバ設定」をはてなブックマークに追加

WordPressでトップページ以外の場合にbodyにクラス名を追加する方法

2022年11月12日 WordPress
[php] <?php //トップページ以外の場合にnot_homeクラスを追加 $body_class = ""; if ( !is_front_page() ) { $body_class .= ' not_home'; } ?> <body id="top" <?php body_class( $body_c…
「WordPressでトップページ以外の場合にbodyにクラス名を追加する方法」をはてなブックマークに追加

simplexml_load_fileでRSSを取得・表示させる

2012年02月11日 zencartphp
simplexml_load_fileとは simplexml_load_fileは、PHP5から利用可能になった関数で、XMLをパースしてオブジェクトに代入します。 今回は、オープンソースのECサイト構築システム「ZenCart」に外部ブログ(WordPress)のRSSを表示させてみました。 設置コード [php] <?php $rss = "http://apr20…
「simplexml_load_fileでRSSを取得・表示させる」をはてなブックマークに追加

WordPressの検索にカテゴリでの絞り込み機能を追加

2011年11月24日 WordPress
[php] <form method="get" id="searchform" action="<?php bloginfo('url'); ?>"> <input type="text" value="<?php the_search_query(); ?>&qu…
「WordPressの検索にカテゴリでの絞り込み機能を追加」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy