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


ピックアップ記事

未解決 twitter関連のOAuth認証が通らない 

2011年05月27日 WordPress
WP to Twitterなど、twitter関連のOAuth認証が通らない 原因は不明だけど、サーバのcURLやら外部向けのHTTPS通信が許可されてないやら、その辺っぽい。 ちなみに現在使っているのは、お名前.comの共用サーバです。 VPSの方も契約してるんで、そっちに移行した方が早いかも。 http://bono.s201.xrea.com/pib/wpm/?p=32 twitt…
「未解決 twitter関連のOAuth認証が通らない 」をはてなブックマークに追加

WordPress archive.phpで記事数を設定する

2011年06月24日 WordPressphp
WordPress をカスタマイズしていると、トップページでは○件、アーカイブは○件など、表示する記事件数を変えたい事があよくあります。そういう場合の対処法です。 今回は、テーマ内のarchive.phpを修正する事で対応します。 …
「WordPress archive.phpで記事数を設定する」をはてなブックマークに追加

WordPressにtwitterのログを自動投稿するプラグイン

2011年05月29日 WordPress
タイトル通り、Twitterの一日分のツイートをWordPressへ自動投稿してくれるプラグインについてですが、tweet digestというプラグインを使っていたのですが、これを有効にすると、他のプラグイン(SyntaxHighlighterやフロントエンド・エディタなんか)が動かなくなる事が分かったので、Twitter Toolsに変更しました。 なので、Twitter Tools の使い方…
「WordPressにtwitterのログを自動投稿するプラグイン」をはてなブックマークに追加

Facebook OGP対応してアクセスを増やす

2011年06月29日 web関連
OGP対応する http://gadget-or-gimmick.com/archives/2011-06-16/114209.html
「Facebook OGP対応してアクセスを増やす」をはてなブックマークに追加

WordPressでカテゴリ一覧やタグ一覧を取得・表示させる

2014年08月27日 WordPressphp
WordPressでカテゴリ一覧やタグ一覧を取得・表示させる
WordPressでカテゴリ一覧を表示させるには、wp_list_categoriesというテンプレートタグがありますが、出力結果が思い通りにならないことが多いので、get_termsを使って、カテゴリ一覧を表示させる方法です。 カテゴリ一覧を表示させる get_termsでカテゴリ情報を取得するには、最初の引数にcategoryを指定します。 [php]echo '<ul…
「WordPressでカテゴリ一覧やタグ一覧を取得・表示させる」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy