Je veux appliquer le plugin jQuery lazyload. Pour que cela fonctionne, je dois créer un nouvel attribut qui est data-src, placez-y la valeur src puis remplacez la valeur src par une valeur spécifique '...nothing.gif'
. J'ai trouvé une solution sur le support wordpress.org
function add_lazyload($content)
{
global $post;
$search = '/src\=\"([^\s]+(?=\.(bmp|gif|jpeg|jpg|png))\.\2)\"/';
$content = replacer($content, $search, '/src/', 'data-original');
$search = '/img\ class\=\"/';
$content = replacer($content, $search, '/class\=\"/', 'class="lazy ');
$search = '/alt/';
$content = replacer($content, $search, '/alt/', 'src="'.get_template_directory_uri().'/library/images/nothing.gif"');
return $content;
}
function replacer($src, $search, $find, $replace)
{
preg_match_all($search, $src, $result, PREG_OFFSET_CAPTURE);
foreach($result[0] as $entry)
{
$org = $entry[0];
$rep = preg_replace($find, $replace, $entry[0]);
$org = "/" .str_replace(array("=",":","/",".","-","_",'"',"'"," "), array("\=","\:","\/","\.","\-","\_",'\"',"\'","\ "), $org). "/";
$src = preg_replace($org, $rep, $src);
}
return $src;
}
add_filter('the_content', 'add_lazyload');
Le problème avec ce code est qu'il remplace chaque chaîne alt
(par exemple dans un paragraphe) par .../library/images/nothing.gif
, pas seulement l'attribut d'image alt.
Quelqu'un sait-il comment résoudre ceci?
au lieu de remplacer la balise alt, vous pourriez ajouter un attribut à une balise
function add_lazyload($content) {
$dom = new DOMDocument();
@$dom->loadHTML($content);
foreach ($dom->getElementsByTagName('img') as $node) {
$oldsrc = $node->getAttribute('src');
$node->setAttribute("data-original", $oldsrc );
$newsrc = ''.get_template_directory_uri().'/library/images/nothing.gif';
$node->setAttribute("src", $newsrc);
}
$newHtml = $dom->saveHtml();
return $newHtml;
}
note: je n'ai pas encore testé ce code, alors soyez prudent :)
J'ai modifié l'excellente solution de peteroak pour la conversion en utf-8 et enlevé le doctype, le html et le corps de la sortie.
function add_lazyload($content) {
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
$dom = new DOMDocument();
@$dom->loadHTML($content);
foreach ($dom->getElementsByTagName('img') as $node) {
$oldsrc = $node->getAttribute('src');
$node->setAttribute("data-original", $oldsrc );
$newsrc = ''.get_template_directory_uri().'/images/nothing.gif';
$node->setAttribute("src", $newsrc);
}
$newHtml = preg_replace('/^<!DOCTYPE.+?>/', '', str_replace( array('<html>', '</html>', '<body>', '</body>'), array('', '', '', ''), $dom->saveHTML()));
return $newHtml;
}
add_filter('the_content', 'add_lazyload');
J'ai ajouté quelques fonctionnalités à la solution Shieeets:
Voici le code PHP:
// Lazyload Converter
function add_lazyload($content) {
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
$dom = new DOMDocument();
@$dom->loadHTML($content);
// Convert Images
$images = [];
foreach ($dom->getElementsByTagName('img') as $node) {
$images[] = $node;
}
foreach ($images as $node) {
$fallback = $node->cloneNode(true);
$oldsrc = $node->getAttribute('src');
$node->setAttribute('data-src', $oldsrc );
$newsrc = get_template_directory_uri() . '/images/placeholder.gif';
$node->setAttribute('src', $newsrc);
$oldsrcset = $node->getAttribute('srcset');
$node->setAttribute('data-srcset', $oldsrcset );
$newsrcset = '';
$node->setAttribute('srcset', $newsrcset);
$classes = $node->getAttribute('class');
$newclasses = $classes . ' lazy lazy-hidden';
$node->setAttribute('class', $newclasses);
$noscript = $dom->createElement('noscript', '');
$node->parentNode->insertBefore($noscript, $node);
$noscript->appendChild($fallback);
}
// Convert Videos
$videos = [];
foreach ($dom->getElementsByTagName('iframe') as $node) {
$videos[] = $node;
}
foreach ($videos as $node) {
$fallback = $node->cloneNode(true);
$oldsrc = $node->getAttribute('src');
$node->setAttribute('data-src', $oldsrc );
$newsrc = '';
$node->setAttribute('src', $newsrc);
$classes = $node->getAttribute('class');
$newclasses = $classes . ' lazy lazy-hidden';
$node->setAttribute('class', $newclasses);
$noscript = $dom->createElement('noscript', '');
$node->parentNode->insertBefore($noscript, $node);
$noscript->appendChild($fallback);
}
$newHtml = preg_replace('/^<!DOCTYPE.+?>/', '', str_replace( array('<html>', '</html>', '<body>', '</body>'), array('', '', '', ''), $dom->saveHTML()));
return $newHtml;
}
add_filter('the_content', 'add_lazyload');
add_filter('post_thumbnail_html', 'add_lazyload');