[英]How do I add div around each WordPress post images & retrieve hovered image for social sharing?
I want to add div around every images in my posts in order to be able to add social share icons on hover. 我想在帖子中的每个图像周围添加div,以便能够在悬停时添加社交共享图标。 For this, I've used this useful code shared by Rick Sanchez: How do I add A Div around each WordPress post image ? 为此,我使用了里克·桑切斯(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' );
With this code, I'm now able to display share icons above each image (twitter, google & facebook) but my problem is that the image shared is always the first image of the post and not the image hovered (for example second, third and so on). 使用此代码,我现在能够在每个图像(Twitter,Google和Facebook)上方显示共享图标,但是我的问题是共享的图像始终是帖子的第一张图像,而不是悬停的图像(例如,第二,第三张)等等)。 Do you have any idea how I could do this based on the code provided by Rick? 您是否知道如何根据Rick提供的代码来执行此操作? How it could be possible to retrieve the hovered image? 怎样才能检索到悬停的图像?
Thanks a lot for your help! 非常感谢你的帮助!
I've worked on the code above and I'm now able to retrieve the url of each image in the post in the matches table. 我已经完成了上面的代码,现在可以在matchs表中检索帖子中每个图像的url。 This will permit to retrieve each image url for the social network sharing button but I'm blocked now on how to use preg_replace with the replacement variable that will be different for each image as it will retrieve the image url saved in the matches table. 这将允许检索社交网络共享按钮的每个图像URL,但是现在我不知道如何将preg_replace与替换变量一起使用,该替换变量对于每个图像都不同,因为它将检索保存在匹配表中的图像URL。 Do you know how I can do this? 你知道我该怎么做吗?
For retrieving each image url I used this code: 为了检索每个图像网址,我使用了以下代码:
// 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.