如何在每個WordPress帖子圖像周圍添加div並檢索懸停的圖像以進行社交共享？

Question

我想在帖子中的每個圖像周圍添加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提供的代碼來執行此操作？ 怎樣才能檢索到懸停的圖像？

非常感謝你的幫助！

Answer 1

我已經完成了上面的代碼，現在可以在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]