如何使所有图像可单击?(在帖子WordPress中)

Question

当我第一次创建网站时，我会自动确保所有图像都没有链接(image_default_link_type = none(。现在我已经完成了Lightbox，因此我需要在所有帖子中单击所有图像。

我需要从视图中翻译所有帖子中的所有图像：

<img src="https://example.com/wp-content/uploads/2018/04/Apple-iPhone-6-0.jpg" alt="" width="1500" height="1000" />

at

<a href="https://example.com/wp-content/uploads/2018/04/Apple-iPhone-6-0.jpg"> <img src="https://example.com/wp-content/uploads/2018/04/Apple-iPhone-6-0.jpg" alt="" width="1500" height="1000" /> </a>

我该怎么做？

有一个函数：

add_filter ('the_content', 'del_image_link');
function del_image_link ($ content) {
  $ content =
  preg_replace (array ('{a [^&gt;] *&gt; &lt;img}', '{/&gt; </a>}'), array ('&lt;img', '/&gt;'), $ content);
  return $ content;
}

它以相反的顺序起作用，也就是说，它绝对使所有具有链接的图像都不粘。我需要达到相反的效果。

Answer 1

$(document).ready(function(){
  $("img").each(function() {
     $(this).wrap("<a href="+$(this).attr('src')+"></a>");
  });
});

您可以将此脚本添加到页脚中，并在文档中准备就绪，您可以循环浏览所有img元素。在使用jQuery包装的循环中，您可以用a标签包装img标签。

Answer 2

#Using the code in the functions.php with the following: # 
<?php 
if ( has_post_thumbnail() ) {
    $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
    echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute( 'echo=0' ) . '">';
    the_post_thumbnail( 'thumbnail' );
    echo '</a>';
}
?>
#  OR  #
# Link all post thumbnails to the post permalink #   
<?php    
        function wpdocs_post_image_html( $html, $post_id, $post_image_id ) {
            $html = '<a href="' . get_permalink( $post_id ) . '" alt="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
            return $html;
        }
        add_filter( 'post_thumbnail_html', 'wpdocs_post_image_html', 10, 3 );
?>