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


ピックアップ記事

Dreamweaver で開いたファイルが文字化けする場合の対処法

2012年02月06日 web関連zencart
症状 今回は、ZenCartのデータベースを編集したくて、sqlファイル(EUC-JP)をDreamweaverで開いたら、文字化けしました。 Dreamweaverの「新規ドキュメント」の設定が関係しているようなので、新規ドキュメントを開く際のエンコードの設定を変更します。 解決策 環境設定 > カテゴリ内の「新規ドキュメント」> 「エンコーディングが指定されていない既存ファイ…
「Dreamweaver で開いたファイルが文字化けする場合の対処法」をはてなブックマークに追加

wordpress me から3.13にアップグレードする

2011年06月03日 WordPressphp
準備 まず、この辺を参考にバックアップをします。 プラグインも全部無効にします。 新しいWordPressをアップロード FTPで、サーバ上のWPディレクトリ内のwp-contents以外を全て新しいバージョンのものに入れ替えます。新しいバージョンのwp-contents以外を全てアップロード。 基本的にデータベースはそのまま使うので、ほとんど触りません。 新しいWPのwp-config.php…
「wordpress me から3.13にアップグレードする」をはてなブックマークに追加

HTML上に配置した画像に隙間が出来るときの対処法

2012年02月10日 web関連
配置した画像に余計な隙間(スペース)が出来る HTML上に画像を配置したときに、予期せぬスペースが出来るときってありませんか?(画像参照)単純に配置しただけなのに・・・と思うのですが、そんな時はCSSを以下のように設定することで解決できます。 解決策 CSSファイルに以下の設定を記述する。 [php]img { vertical-align: top; }[/php] …
「HTML上に配置した画像に隙間が出来るときの対処法」をはてなブックマークに追加

IE9でcss3のtransformが効かない時の解決策

2014年10月30日 web関連HTML5・CSS3
CSS3が使えるようになって、メニューボタンの背景に矢印を表示させることなどが出来るようになりましたが、IEでは効かないものもあります。 背景に矢印を入れる時は、transform: rotate(45deg);のようにborderを回転させるのですが、このtransformがIE9では使えません。 …
「IE9でcss3のtransformが効かない時の解決策」をはてなブックマークに追加

WordPress のURLの末尾のスラッシュ(トレイリングスラッシュ)を追加、または削除する

2024年03月03日 web関連WordPress
https://runebook.dev/ja/docs/wordpress/functions/untrailingslashit
「WordPress のURLの末尾のスラッシュ(トレイリングスラッシュ)を追加、または削除する」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy