自定义Pin It按钮没有显示在图像上方，而是显示为块TOP_LEFT

我正在创建一个插件，在帖子内容内的所有图像上添加Pin按钮。但此按钮并没有将附件图像包装在其中，以显示在图像上。它显示在图像的左上角（作为块）。我希望它正好出现在图像上方。在wordpress内容中，图像被包装在p标记中。但是我的Pin-it按钮标记落在p标记as块之外。请帮助解决此问题。

这是CSS：

.固定按钮{宽度：100%；位置：相对；顶部：-6px；}

。

/***Pinterest pin按钮插件的构造函数类*/

函数\\uu构造（）{

    // Add the pin button inside the content filter
    add_filter(\'the_content\', array(&$this, \'Add_Pin_Button\') );
}

/**
 * Adds the pin button to each image inside the content
 */
public function Add_Pin_Button($content){
    global $post;

    // Get the post urls
    //$posturl = urlencode(get_permalink());

    // Define a pattern to find all images inside the content
    $pattern = \'/<img(.*?)src="(.*?).(bmp|gif|jpeg|jpg|png)" (.*?) width="(.*?)" height="(.*?)" \\/>/i\';

    // Replace the images with the following div and pin button
    $replace_by_button_div = \'
        <img$1src="$2.$3" $4 width="$5" height="$6" />
        <div class="pin-it-button pinup">
        <a href="http://pinterest.com/pin/create/button/?url=\'.urlencode(get_permalink()).\'&media=$2.$3 &description=\'.urlencode(get_the_title()).\'" target="_blank" class="pinimg" >Pin It</a></div>
        \';

    // Replace the images with a containing div with a pin button on the image
    $content = preg_replace( $pattern, $replace_by_button_div, $content );

    return $content;
}

相关推荐