いつも記事投稿でメディアを追加から画像を追加してアップしています。
そして、 このように100×100で出力される画像があります。
<img class="alignnone size-full wp-image-4570" alt="" src="httpーーーー99-1.png" width="100" height="100" />
今回やりたいことはこの100×100の画像だけ、60×60で表示したいです。
それ以外の、240×80などはそのままの状態を保ちたいです。
そんな事が可能なのでしょうか。
アドバイスいただけると幸いです。
No.1
595
351
100pt
表示する時にHTMLコードを変更する場合は次の記述を
90
85
function change_view_imagesize($content) {
if(preg_match('#<img ([^>]+?)( (width|height)="100"){2}([^>]+)>#', $content)) {
$content = preg_replace('#<img ([^>]+?)(?: (width|height)="100"){2}([^>]+)>#', '<img $1 width="60" height="60"$3>', $content);
}
return $content;
}
add_filter( 'the_content', 'change_view_imagesize' );
データベースに保存してあるHTMLコード自体を変更する場合は次の記述を
function change_view_imagesize($content) {
$content = stripslashes($content);
if(preg_match('#<img ([^>]+?)( (width|height)="100"){2}([^>]+)>#', $content)) {
$content = preg_replace('#<img ([^>]+?)(?: (width|height)="100"){2}([^>]+)>#', '<img $1 width="60" height="60"$3>', $content);
}
$content = addslashes($content);
return $content;
}
add_filter( 'content_save_pre', 'change_view_imagesize' );
テーマの「funcitons.php」に追加します。
※HTMLコードの「width」と「height」の指定サイズを変更しているだけですので、呼び出される画像は変わりません。(100×100の大きさの画像です。)
・プラグイン API/フィルターフック一覧
http://wpdocs.sourceforge.jp/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3_API/%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%BC%E3%83%95%E3%83%83%E3%82%AF%E4%B8%80%E8%A6%A7
【追記】
表示時に変更する場合についてですが、「get_the_content()」や$postオブジェクトの「$post->post_content」など「the_content()」以外で記事本文を取得・表示している時は、自分で「the_content」フィルターを適用する必要があります。(※適用していない場合は、テンプレートの記事表示部分の変更が必要。)
<div>
<?php echo apply_filters('the_content', get_the_content()); ?>
</div>
・関数リファレンス/get the content
http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_the_content
1
2
rouge_2008 様
2014/01/25 22:29:05非常に詳しくありがとうございます。
PHPの知識がまだまだ浅い私ですが、
記述の仕方や、やっとわかってきた正規表現などなど、
”こう使い方があるんだ”と
大変勉強になりました。
また、捕捉ですが、rouge_2008様含め
このはてなでたくさん勉強させていただいたおかけで、
多分今回の記述は数ヶ月前なら全く理解できなかったのですが、
今回はグーグルに頼りながらですがすぐに理解する事ができました。
その事も感謝です。
本当にありがとうございます。
早速実装してみたいと思います！