2014-12-12 2 views
0

게으른로드 js 스크립트를 수동으로 인스턴스화하는 WordPress 사이트가 있습니다. 모든 이미지를 찾고 src 속성을 data-original으로 변경하고 동시에 이미지에 lazy 클래스를 추가하기 위해 the_content를 필터링하고 싶습니다.부분적인 HTML을 파싱하는 DOM 관련 문제

이 게시물을 찾았습니다 : https://wordpress.stackexchange.com/a/60841/11169 DOM 파서를 사용하여 HTML 선언과 여분의 본문 요소가 렌더링되었습니다.

이로 인해 문자 인코딩 문제가 발생했습니다.

loadHTML 동안 utf-8을 강제 실행하도록 코드를 수정 한 다음 내용을 반환하기 전에 doctype, html, head 및 body 요소를 없애기 위해 약간의 str_replace을 수행 할 수있었습니다.

function add_lazyload($content) { 
    $dom = new DOMDocument(); 
    @$dom->loadHTML('<meta http-equiv="content-type" content="text/html; charset=utf-8">' . $content); 


    foreach ($dom->getElementsByTagName('img') as $node) { 

     // Get the original img source, place it in a data-original attr, and remove the source completely 
     $image_source = $node->getAttribute('src'); 
     $node->setAttribute("data-original", $image_source); 
     $node->removeAttribute('src'); 

     // Get the original classes, and add 'lazy' 
     $old_class = $node->getAttribute('class'); 
     $new_class = $old_class . ' lazy'; 
     $node->setAttribute("class", $new_class); 
    } 

    $newHtml = $dom->saveHtml(); 
    $newHtml = str_replace('<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">', null, $newHtml); 
    $newHtml = str_replace('<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head><body>', null, $newHtml); 
    $newHtml = str_replace('</body></html>', null, $newHtml); 
    // var_dump($newHtml); 
    return trim($newHtml); 
} 

이것은 효과가 있지만 완전히 비효율적으로 보입니다.

아마도 정규 표현식을 사용하여 필요한 컨텐츠를 검색하고 대체하는 것이 더 좋을 것입니다. 아니면 이상한 문자 인코딩 문제를 걱정할 필요없이 DOM에 부분 HTML을로드하는 방법이있을 것입니다.

의견을 보내 주시면 대단히 감사하겠습니다.

건배!

+0

왜 템플릿 자체에서하지 않습니까? – Pinoniq

+0

WordPress의 post_content에 포함 된 이미지를 자동으로 변경하고 싶습니다. 그래서 이것을 'the_content' 필터로 적용하는 것이 가장 좋은 것처럼 보였습니다. – alexleonard

답변

0

HTML을로드하려면 요소를 추가하여 인코딩 문제가 발생하지 않도록 전체 HTML 문서로 만들어야합니다. 하지만 절약이 쉽습니다.

PHP 5.3.6이 DOMDocument::saveHTML()$node 인수를 더했습니다. 저장할 노드를 제공하기 만하면됩니다.

$xpath = new DOMXPath($dom); 
$newHtml = ''; 
foreach ($xpath->evaluate('//body/node()') as $node) { 
    $newHtml .= $dom->saveHTML($node); 
} 
return $newHtml; 

DOMXPath를 사용하면 DOM 문서의 XPath 가져 오기 노드를 사용할 수 있습니다. 그것은 DOM 확장의 일부입니다. //body/node()body 요소 노드를 찾고 텍스트 노드를 포함하여 모든 하위 노드를 가져옵니다.