web-dev-qa-db-ja.com

ギャラリーでimgクラスをオーバーライドする

バックエンド（wp-jsonプラグイン）としてAngularJS用のWordpressを使用していますが、実際にテーマの構造として作成したものは次のようになります。

myApptheme
  -style.css //nothing special here just inits the theme
  -index.php
  -header.php
  -functions.php
  lib //here some overrides php
  --gallery.php
  app //holds the angular stuff generated with yo angular
  bower_components //bower packages what I need

また、gallery.php（これは自分で変更した根から借りたものです）で、必要な石積みマークアップを追加し、ギャラリー項目をフィルタリングしてブートストラップ用のカスタムクラス（img-respond）を追加しようとします。スニペットは次のようになります。

/**
 * Add class="img-responsive" to attachment items
 */


function responsive_attachment_link_class($html) {

   $classes = 'img-responsive'; // 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 . '" $2', $html);
  }
  // remove dimensions from images,, does not need it!
  $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
  return $html;
}

add_filter('wp_get_attachment_link', 'responsive_attachment_link_class');

img width|heightの削除は機能しますが、クラスのオーバーライドは無効になります。このコードの何が問題になっていますか

実際の出力

<img alt="ind018" class="attachment-large" src="http://wp.local/wp-content/uploads/2014/08/ind018-728x1024.jpeg">

予想される

<img alt="ind018" class="img-responsive" src="http://wp.local/wp-content/uploads/2014/08/ind018-728x1024.jpeg">
imagescssgallery
1
fefe

上書きするには!importantをスタイルに追加する必要があります。これを行うより良い方法は、PHPを使用してクラスを追加するのではなく、Bootstrap CSSファイルから.img-responsiveスタイルをコピーして目的のHTML要素に適用することです。

img.attachment-large {
    display: block;
    max-width: 100%;
    height: auto;
}

クラスが定数でない場合は、親要素で要素をターゲットにします。

または this フィルタを使用してください。

function my_image_class_filter( $classes ) {
    return $classes.' attachment-large';
}
add_filter( 'get_image_tag_class', 'my_image_class_filter' );`
1
SLH