如何在每个 WordPress 帖子图像周围添加一个 Div？ [关闭]

Question

我想在我的 wordpress 博客文章中发布的每张图片周围添加一个 div。 我该怎么做？

（对于好奇的人，我试图在用户将鼠标悬停在图像上时弹出一些分享按钮）。

Answer 1

将以下 sn-p 代码添加到您的 functions.php 文件中：

add_filter( 'image_send_to_editor', 'wp_image_wrap_init', 10, 8 );    
    function wp_image_wrap_init( $html, $id, $caption, $title, $align, $url, $size, $alt ) {
    return '<div id="wp-image-wrap-'. $id .'" class="wp-image-wrap">'. $html .'</div>';
}

Answer 2

所以这解决了一切:)！ 谢谢你们在这里的帮助。我希望它对其他人有用。

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' );

Answer 3

如果它像您想象的那样简单，只需切换到文本编辑器，或禁用可视化编辑器，然后在您插入的每个图像周围添加 div。为它们提供相同的类，然后在样式表中添加该类的样式。

-- 或者，如果您想将此应用到您的 Wordpress 安装中的所有类型的页面（页面、帖子、档案、类别等）：--

深入了解 FTP，并开始查看您的主题文件夹和文件。

您有不同的页面用于不同的视图。 attachment.php、page.php 等。根据您要更改的视图，这些文件将包含如下所示的一行：

<p class="attachment">
    <a href="<?php echo wp_get_attachment_url( $post->ID ); ?>" title="<?php the_title(); ?>" rel="attachment">
        <img src="<?php echo $att_image[0]; ?>" width="<?php echo $att_image[1]; ?>" height="<?php echo $att_image[2]; ?>" class="attachment-medium" alt="<?php $post->post_excerpt; ?>" />
    </a>
</p>

或任何提及的地方

<img src="<?php echo $att_image[0]; ?>" />

只需在其周围添加一个 div，然后在样式表中添加样式规则。