[英]How do I add div around each WordPress post images & retrieve hovered image for social sharing?
我想在帖子中的每个图像周围添加div,以便能够在悬停时添加社交共享图标。 为此,我使用了里克·桑切斯(Rick Sanchez)共享的有用代码: 如何在每个WordPress帖子图像周围添加一个Div?
function breezer_addDivToImage( $content ) {
// A regular expression of what to look for.
$pattern = '/(<img([^>]*)>)/i';
// What to replace it with. $1 refers to the content in the first 'capture group', in parentheses above
$the_url = the_permalink();
$replacement = '<div class="imgWrap">
$1
<div class="imgDescription">
<div class="theShareLinks">
<img src="http://localhost/mysite/wp-content/uploads/2014/08/dfc2.png" />
<a href="http://twitter.com/share?text=&url='.get_the_permalink() .'" class="img-twitter" title="Share on Twitter" target="_blank"></a>
<a href="http://www.facebook.com/sharer.php?u='.get_the_permalink() .'?" class="img-facebook" title="Share on Facebook" target="_blank" onclick="window.open(this.href, \'newwin\', \'width=500, height=200\'); return false;" ></a>
<a href="https://plus.google.com/share?url='.get_the_permalink() .'" class="img-google" title="Share on Google" target="_blank"></a>
</div>
</div>
</div>';
// run preg_replace() on the $content
$content = preg_replace( $pattern, $replacement, $content );
// return the processed content
return $content;
}
add_filter( 'the_content', 'breezer_addDivToImage' );
使用此代码,我现在能够在每个图像(Twitter,Google和Facebook)上方显示共享图标,但是我的问题是共享的图像始终是帖子的第一张图像,而不是悬停的图像(例如,第二,第三张)等等)。 您是否知道如何根据Rick提供的代码来执行此操作? 怎样才能检索到悬停的图像?
非常感谢你的帮助!
我已经完成了上面的代码,现在可以在matchs表中检索帖子中每个图像的url。 这将允许检索社交网络共享按钮的每个图像URL,但是现在我不知道如何将preg_replace与替换变量一起使用,该替换变量对于每个图像都不同,因为它将检索保存在匹配表中的图像URL。 你知道我该怎么做吗?
为了检索每个图像网址,我使用了以下代码:
// search for images inside content and return images URLs
$count = preg_match_all('/<\s*img [^\>]*src\s*=\s*[\""\']?([^\""\'>]*)/i' , $content, $matches);
// now all my images url are in $matches[1][x]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.