DOMDocument를 사용하여 WordPress에서 이미지 배치하기

WordPress 블로그의 각 이미지 주위에 div 래퍼를 추가하고 내 functions.php에서 DOMDocment를 사용하여이 작업을 수행하려고합니다. 아쉽게도 내 래퍼의 닫기 태그 만 출력에 적용됩니다. 모든 이미지에 여는 태그가 없습니다.DOMDocument를 사용하여 WordPress에서 이미지 배치하기

내 기능은 다음과 같습니다 : IMG을 포장 할 때

이 발생합니다. 대신 각 단락 태그를 감싸려고했는데 모두 열리고 닫히는 래퍼 태그가 있습니다.

이 문제를 해결하는 방법에 대한 아이디어가 있습니까? return $html 대신 echo $html도 시도해 보았습니다. 이 경우 두 태그가 모두 적용되었지만 캡션은 구문 분석 된 html 요소 대신 짧은 태그로 표시됩니다.

출처

2017-03-26 Tibor

Hello_ friend.

난 당신이 DOMDocument 목적이 같은 도우미와 함께 무엇을하려고 달성 :

function lazyload($content) { 
    $dom = new DOMDocument(); 
    libxml_use_internal_errors(true); 
    $dom->loadHTML(utf8_decode($content), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD); 
    libxml_clear_errors(); 

    // This object will hold the updated content 
    $newContent = new DOMDocument(); 

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

    foreach ($images as $image) { 

     $div = $newContent->createElement('div'); 
     $div->appendChild($newContent->importNode($image)); 
     $newContent->appendChild($div); 

    } 

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

// Test 
$html = '<img alt="image 1"><img alt="image 2"><img alt="image 3"><img alt="image 4"><img alt="image 5"><img alt="image 6"><img alt="image 7"><img alt="image 8">'; 
echo lazyload($html); 

// OUTPUT 
<div> 
    <img alt="image 1"> 
</div> 
<div> 
    <img alt="image 2"> 
</div> 
<div> 
    <img alt="image 3"> 
</div> 
<div> 
    <img alt="image 4"> 
</div> 
<div> 
    <img alt="image 5"> 
</div> 
<div> 
    <img alt="image 6"> 
</div> 
<div> 
    <img alt="image 7"> 
</div> 
<div> 
    <img alt="image 8"> 
</div>

참고 : 코드에서 난 당신이 DOMDocument::createElement를 사용하는 볼,하지만 난 당신이 새로이를 추가 볼 수 없습니다 DOM 및 문서에 <div>을 만들어 말한다 :

공공 DOMElement있는 DOMDocument ::의 createElement (문자열 $ 이름 [, 문자열 0,123,$ value])

이 함수는 DOMElement 클래스의 새 인스턴스를 만듭니다. 이 노드 은 (예 : DOMNode :: appendChild()와 함께 삽입하지 않으면 문서에 표시되지 않습니다.

내가 편집 한 기능이 작동하는지 알려주십시오.

행운을 빌어 요!

편집

명세서는 좋은 지적했다. 당신이 당신의 DOM 내용 전체에 사용하려는 경우 다른 접근해야 :

function lazyload($content) { 
    $dom = new DOMDocument(); 
    libxml_use_internal_errors(true); 
    $dom->loadHTML(utf8_decode($content), LIBXML_HTML_NODEFDTD); 
    libxml_clear_errors(); 

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

    foreach ($images as $image) { 

     $div = $dom->createElement('div'); 
     $div->appendChild($image->cloneNode()); 

     // optional 
     $div->setAttribute('class', 'your-lazy-loading-img-class'); 

     // replace img with the wrapper that is holding the <img> 
     $image->parentNode->replaceChild($div, $image); 
    } 

    return $dom->saveHTML(); 
} 


// Test 
$html = ' 
    <h1 class="h1">Heading 1</h1> 
    <div class="multiple-images-wrapper"> 
     <div class="inner-wrapper"><img alt="image 1"></div> 
     <img alt="image 2"> 
     <img alt="image 3"> 
    </div> 

    <h2>Heading 2</h2> 
    <img alt="image 4"> 
    <img alt="image 5">'; 

// htmlspecialchars is only for testing purpose 
echo htmlspecialchars(lazyload($html)); 
exit;

OUTPUT을

<html> 
    <body> 
     <h1 class="h1">Heading 1</h1> 
     <div class="multiple-images-wrapper"> 
      <div class="inner-wrapper"> 
       <div class="your-lazy-loading-img-class"> 
        <img alt="image 1"> 
       </div> 
      </div> 
      <div class="your-lazy-loading-img-class"> 
       <img alt="image 2"> 
      </div> 
      <div class="your-lazy-loading-img-class"> 
       <img alt="image 3"> 
      </div> 
     </div> 
     <h2>Heading 2</h2> 
     <div class="your-lazy-loading-img-class"> 
      <img alt="image 4"> 
     </div> 
     <div class="your-lazy-loading-img-class"> 
      <img alt="image 5"> 
     </div> 
     <div class="your-lazy-loading-img-class"> 
      <img alt="image 6"> 
     </div> 
     <div class="your-lazy-loading-img-class"> 
      <img alt="image 7"> 
     </div> 
     <div class="your-lazy-loading-img-class"> 
      <img alt="image 8"> 
     </div> 
    </body> 
</html>

참고

내가 때문에 LIBXML_HTML_NOIMPLIED를 생략 것을 참조 이 플래그는 DOMDocument가 예상대로 작동하지 않는 것으로 보인다.당신이 $dom->loadHTML(utf8_decode($content), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);로 변경하는 경우는 다음과 같이 출력이 표시됩니다

<h1 class="h1">Heading 1 
    <div class="multiple-images-wrapper"> 
     <div class="inner-wrapper"> 
      <div class="your-lazy-loading-img-class"> 
       <img alt="image 1"> 
      </div> 
     </div> 
     <div class="your-lazy-loading-img-class"> 
      <img alt="image 2"> 
     </div> 
     <div class="your-lazy-loading-img-class"> 
      <img alt="image 3"> 
     </div> 
    </div> 
    <h2>Heading 2</h2> 
    <div class="your-lazy-loading-img-class"> 
     <img alt="image 4"> 
    </div> 
    <div class="your-lazy-loading-img-class"> 
     <img alt="image 5"> 
    </div> 
</h1>

그래서 나를에 따라 당신이 LIBXML_HTML_NOIMPLIED 등을 사용하여 신뢰할 수있는 HTML 피할하려는 경우 다음 당신은에서 <html><body></body></html> 단순히 명확 해당 태그가 필요하지 않은 경우 문자열 바꾸기 또는 문자열 잘라 내기와 같은 몇 가지 기본 기술을 사용하여 문자열을 반환했습니다.

출처

2017-03-27 07:26:31 codtex

안녕하십니까, 답변 해 주셔서 감사합니다. 이 코드는 나를 위해 작동하지만 div 및 이미지를 반환하기 때문에 발생합니다. 내 콘텐츠가 모두 반환되도록 코드를 변경해야합니까? ($ content에는 단락, iframe, 이미지, 목록 등이 포함되어 있습니다. div의 각 이미지를 바 꾸었지만 다른 모든 태그는 변경되지 않았습니다.) – Tibor

@Tibor 성명서가 옳았으며 업데이트를 제공했습니다. 아이디어 어떻게 접근 할 수 :) – codtex

DOMDocument를 사용하여 WordPress에서 이미지 배치하기

답변

관련 문제