このWebページ には、Wordpressによって挿入された画像が含まれています。最初の画像を挿入するためのコードは次のとおりです。
[caption id="attachment_887" align="alignnone" width="604"]
<a href="http://steven.doig.com.au/files/2013/06/Forest_Legacy_m.jpg">
<img class="size-large wp-image-887" alt="a Forest Legacy group" src="http://steven.doig.com.au/files/2013/06/Forest_Legacy_m-1024x681.jpg" width="1024" height="681" />
</a> a Forest Legacy group[/caption]
この画像はCSSによって制御されます。
#content .wp-caption a img {
width: 614px;
height: auto;
}
この画像をレスポンシブにしたいです。私はCSSを挿入しました:
@media (max-width:988px) {
#content .wp-caption a img {
width: 99.03225806%; /* 614/620 */
height: auto;
}
}
ただし、DIV.wpキャプションはWordpressの投稿内で指定されているように604ピクセルのままです。パーセンテージ(97.41935483%)としてこれを指定しようとしましたが、Wordpressは104pxとしてそれを再解釈しました。
インラインCSSは、スタイルシートに挿入したCSSをオーバーライドしています。
<div id="attachment_887" class="wp-caption alignnone" style="width: 614px">
.wp-captionをレスポンシブにする方法に関するアイデアはありますか?
あなたが使いたいのです。
@media (max-width: 988px){
.wp-caption {
/* Force the box to be 100% */
width: 100% !important;
}
#content .wp-caption a img {
/* Scale down if too big */
max-width: 99.03225806%; /* 614/620 */
height: auto;
}
}
もう1つの可能性は、幅がハードコードされなくなるようにショートコード出力を変更することです。幅がないようにコーデックスの例を変更する:
add_filter('img_caption_shortcode', 'my_img_caption_shortcode_filter',10,3);
/**
* Filter to replace the [caption] shortcode text with HTML5 compliant code
*
* @return text HTML content describing embedded figure
**/
function my_img_caption_shortcode_filter($val, $attr, $content = null)
{
extract(shortcode_atts(array(
'id' => '',
'align' => '',
'width' => '',
'caption' => ''
), $attr));
if ( 1 > (int) $width || empty($caption) )
return $val;
$capid = '';
if ( $id ) {
$id = esc_attr($id);
$capid = 'id="figcaption_'. $id . '" ';
$id = 'id="' . $id . '" aria-labelledby="figcaption_' . $id . '" ';
}
return '<figure ' . $id . 'class="wp-caption ' . esc_attr($align) . '" >'
. do_shortcode( $content ) . '<figcaption ' . $capid
. 'class="wp-caption-text">' . $caption . '</figcaption></figure>';
}
http://codex.wordpress.org/Function_Reference/add_filter#Example
これは、はるかに単純でクリーンな解決策です。
function my_img_caption_shortcode_width($width, $atts, $content)
{
return 0;
}
add_filter('img_caption_shortcode_width', 'my_img_caption_shortcode_width', 10, 3);