1

特定の幅より下にあるページ（WordPressの投稿/ページ）上のすべての画像にCSSクラスを追加したいと思います。

以下は機能しますが、setAttributeは各imgのすべてのクラス名を新しいものに置き換えています。

既存のクラスを置き換えずに、各画像に新しいクラスを追加するにはどうすればよいですか？

function add_class_to_small_images( $content ) {

$dom = new DOMDocument();
@$dom->loadHTML( $content );
$dom->preserveWhiteSpace = false;

$images = $dom->getElementsByTagName('img');

foreach ($images as $image) {

    $width = $image->getAttribute('width');

    if( $width < 480) {
        $image->setAttribute('class', 'this-will-be-the-class'); // the new class
    }
}

  $content = $dom->saveHTML();


return $content;
}
add_filter('the_content', 'add_class_to_small_images');
4

1 に答える 1

3

わかりました、これは機能します。既存のクラスを取得し、必要な新しいクラスを使用してそれらをsetAttributeに追加し直しました。誰かがより良い方法を持っていたら、私に知らせてください。

function add_class_to_small_images( $content ) {

$dom = new DOMDocument();
@$dom->loadHTML( $content );
$dom->preserveWhiteSpace = false;

$images = $dom->getElementsByTagName('img');

foreach ($images as $image) {

    // get the widths of each image
    $width = $image->getAttribute('width');

    // the existing classes already on the images
    $existing_classes = $image->getAttribute('class');

    // the class we're adding
    $new_class = ' this-will-be-the-class';

    // the existing classes plus the new class
    $class_names_to_add = $existing_classes . $new_class;

    // if image is less than 480px, add their old classes back in plus our new class
    if( $width < 480) {
        $image->setAttribute('class', $class_names_to_add);
    }
}

  $content = $dom->saveHTML();


return $content;
}
于 2012-08-16T02:52:55.610 に答える