게으른로드 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을로드하는 방법이있을 것입니다.
의견을 보내 주시면 대단히 감사하겠습니다.
건배!
왜 템플릿 자체에서하지 않습니까? – Pinoniq
WordPress의 post_content에 포함 된 이미지를 자동으로 변경하고 싶습니다. 그래서 이것을 'the_content' 필터로 적용하는 것이 가장 좋은 것처럼 보였습니다. – alexleonard