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


ピックアップ記事

ページIDからリンクを設定

2011年11月28日 WordPress
[php] <a href="<?php echo get_permalink('75'); ?>">お問い合わせ</a> [/php]
「ページIDからリンクを設定」をはてなブックマークに追加

重複しないWordPressのdescription設定

2014年08月14日 web関連WordPressphpSEO対策
重複しないWordPressのdescriptionのコードを書いてみました。 おおまかな確認はしていますが、細かいチェックは出来てません・・・m(_ _)m Gistはこちら [php]<?php //descriptionの設定 function set_description(){ global $post; $content = $post->…
「重複しないWordPressのdescription設定」をはてなブックマークに追加

IE6で透過pngを表示させる方法のメモ

2012年02月09日 web関連
最近は透過pngを上手に使ったサイトも増えてきたので、IE6を気にせずに、透過pngを普通に使って、サイトを作りたいと思ってたのですが、IE6の使用率がゼロでない以上は、やっぱり気になってしまうので、お手軽な方法を調べていたら、詳しくまとめられているサイトを見つけたので、メモしておきます。 個人的に特に気になったのは、「ie7.js」と「DD_belatedPNG.js」です。他の方法は既知のも…
「IE6で透過pngを表示させる方法のメモ」をはてなブックマークに追加

何かうまくいかなかったようです。変更が保存されていないかもしれません。

2020年02月05日 WordPress
WordPressのテーマを編集中に以下のエラーが出て保存出来ない場合に考えられる対処法のメモ。 何かうまくいかなかったようです。変更が保存されていないかもしれません。手動で修正し、FTP 経由でファイルをアップロードすることもできます。 考えられる可能性 編集中のファイル内に何らかのエラーが含まれている可能性 いずれかのWPプラグインの影響 WAF設定の影響 …
「何かうまくいかなかったようです。変更が保存されていないかもしれません。」をはてなブックマークに追加

Dreamweaverのソース検索で正規表現を使う

2012年01月23日 web関連
今回は、wordpressからエクスポートした記事のxmlデータを、他のwordpressに入れる際に、xmlにカテゴリやタグが入っていると、新しいwordpressにもカテゴリが全部追加されて、不要なカテゴリが増えてしまったので、それを防ぐために、インポート前のxmlデータからカテゴリやタグにあたる箇所を削除してから、インポートするためにdreamweaverで正規表現を使いました。 Word…
「Dreamweaverのソース検索で正規表現を使う」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy