워드프레스 투고를 위해 이미지에 자동 클래스를 추가하는 방법

워드프레스 투고를 위해 이미지에 자동 클래스를 추가하는 방법

Bootstrap 3은 Bootstrap 3으로, Bootstrap 3은 Bootstrap 3의 Bootstrap 3은 Bootstrap 3은 Bootstrap 3은 Bootstrap 3입니다. CSS 「」, 「CSS」를가 있습니다..img-responsive모든 포스트 이미지에 대응해야 하기 때문입니다.

WordPress에 .functions.phpCSS 클래스를 자동으로 추가할 수 있는 파일 또는 기타 파일입니다.

모든 투고 이미지에 대해 가지고 있어야 하므로 콘텐츠에 대한 후크를 추가하고

function add_responsive_class($content){

        $content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
        $document = new DOMDocument();
        libxml_use_internal_errors(true);
        $document->loadHTML(utf8_decode($content));

        $imgs = $document->getElementsByTagName('img');
        foreach ($imgs as $img) {
           $img->setAttribute('class','img-responsive');
        }

        $html = $document->saveHTML();
        return $html;
}

콘텐츠에 후크를 추가합니다.

add_filter        ('the_content', 'add_responsive_class');

그러나 이미 img에 대한 클래스가 있고 새 클래스를 추가해야 하는 경우 jQuery addClass에 해당하는 PHP를 참조할 수 있습니다.또는 다음과 같이 간단하게 할 수 있습니다.

$existing_class = $img->getAttribute('class');
$img->setAttribute('class', "img-responsive $existing_class");

위의 코드가 작동합니다.이미지를 느리게 로드하기 위해 src와 data-src를 제거하기 위해 사용합니다.잘 됐으면 좋겠다

이 방법이 더 좋습니다.https://wordpress.stackexchange.com/questions/108831/add-css-class-to-every-image

function add_image_class($class){
    $class .= ' additional-class';
    return $class;
}
add_filter('get_image_tag_class','add_image_class');

단, 새 이미지를 삽입할 때 편집 창에 클래스를 추가하고 기존 이미지에는 영향을 주지 않습니다.

가장 쉬운 방법은 CSS를 이렇게 사용하는 것이라고 생각합니다.

.content img { height: auto; max-width: 100%; }

여기서 .content는 투고 내용이 들어 있는 영역입니다.

주의: 이와 같이 .wp-caption 클래스를 덮어쓸 수도 있습니다.

.wp-caption { width: auto !important; }

저도 같은 질문이 있어서 이 기능을 기능에 추가했습니다.php는 나를 위해 일했다.

function add_image_responsive_class($content) {
   global $post;
   $pattern ="/<img(.*?)class=\"(.*?)\"(.*?)>/i";
   $replacement = '<img$1class="$2 img-responsive"$3>';
   $content = preg_replace($pattern, $replacement, $content);
   return $content;
}
add_filter('the_content', 'add_image_responsive_class');

루프에 투고를 표시하는 경우는, 다음과 같이 할 수 있습니다.

the_post_thumbnail('thumbnail', array('class' => 'img-responsive'));

상세한 것에 대하여는, https://codex.wordpress.org/Function_Reference/the_post_thumbnail 를 참조해 주세요.

이 답변이 얼마나 좋은지 잘 모르겠지만 효과가 있습니다.이걸 함수에 넣기만 하면 돼

function img_responsive($content){
    return str_replace('<img class="','<img class="img-responsive ',$content);
}
add_filter('the_content','img_responsive');

뒤에 하다는 점에 해 주세요.class="img-responsive이치노

헤더에 jquery 코드를 사용할 수 있습니다.php 파일입니다.

jQuery(function() {
  jQuery(img).addClass('img-responsive');
});

이미지를 반응시키기 위해 클래스를 추가할 필요는 없다고 생각합니다.피처 이미지에서 높이 너비를 삭제하기만 하면 이미지가 확실하게 반응합니다.

당신의 함수에 코드가 입력되어 있습니다.높이 너비를 제거하는 php

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 );

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
} 

클래스는 업로드 시 추가되지 않고 이미지가 편집기로 전송될 때 추가됩니다..image_send_to_editorfilter를 사용하여 하나 이상의 클래스를 추가합니다.이 예에서는,fancybox를 누릅니다

//all classes i need in a string

$classes = 'img-responsive attachment-post-thumbnail size-post-thumbnail wp-post-image'; 

//then i use my variable

the_post_thumbnail('post_thumbnail', array( 'class' => $classes ));

다음과 같이 css에서 모든 이미지를 응답성 있게 만들 수 있습니다.

모든 콘텐츠 이미지에 css class(부트스트랩) .img-response를 적용하고 싶다.

LESS를 사용하지만 Sass 버전은 거의 동일합니다.

  img {
    @include img-responsive();
  }

아래 코드를 가지고 있는데, 이전 버전의 투고이므로...그들은 작동하지 않았다...

어떻게 해야 하나?

<figure class="image"><img class="lazyload p402_hide" alt="" 
 width="800" height="400" data-sizes="auto" data- 
src="https://br.clubnation.club/wp-content/uploads/2020/01/primeira- 
loja-oficial-de-harry-potter-sera-aberta-em-nova-york-2.jpg" data- 
 srcset="https://br.clubnation.club/wp- 
 content/uploads/2020/01/primeira-loja-oficial-de-harry-potter-sera-aberta- 
 em-nova-york-2.jpg 328w, https://br.clubnation.club/wp- 
 content/uploads/2020/01/primeira-loja-oficial-de-harry-potter-sera- 
 aberta-em-nova-york-3.jpg 380w, https://br.clubnation.club/wp- 
 content/uploads/2020/01/primeira-loja-oficial-de-harry-potter-sera- 
 aberta-em-nova-york-4.jpg 528w, https://br.clubnation.club/wp- 
 content/uploads/2020/01/primeira-loja-oficial-de-harry-potter-sera- 
 aberta-em-nova-york-5.jpg 704w" />
 <figcaption>A loja será inaugurada no próximo verão.
 (Fonte: Warner Bros/Divulgação)</figcaption></figure>

언급URL : https://stackoverflow.com/questions/20473004/how-to-add-automatic-class-in-image-for-wordpress-post