WordPress Twenty Twelve主题在调用gallery shortcode时会自动给相册中所有的图片增加边框,在外贸独立站上显示出来不够不美观,下面是在网上查到的移除相册图片边框的几种方法。

WordPress automatically adds a border around all gallery images with inline styles on the page from the gallery shortcode. There are a number of ways to remove the borders, if you decide you want a more subtle look for your website galleries. This tutorial shows you how to remove the borders using CSS for the Twenty Twelve theme and the Genesis Sample theme.

In Twenty Twelve, the featured image and the images inserted into the post have a slight border-shadow around the images and a slightly rounded corner. This is the code in the stylesheet (style.css) that creates the shadow and rounded corners.

    .entry-content img, 
.comment-content img, 
.widget img, 
.author-avatar img, 
img.wp-post-image {
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);

In addition to the subtle shadow, the WordPress default gallery code also adds a 2px border to gallery images which may be more than you want. The WordPress gallery shortcode creates a new piece of code that is added inline on the page for every gallery you add to the post. This is the default gallery shortcode style that adds an additional 2px border to the gallery images.

#gallery-1 img {
    border: 2px solid #CFCFCF;

To give the gallery images the same subtle shadow with no extra border, as other post images, you can add this CSS to your Custom CSS editor.

#content .entry-content a img,
#content .entry-content img {
    border: 0;


.entry-content a img,
.entry-content img {
    border: 0 !important;

The CSS in the editor will override the inline styles. And now you have a nice subtle shadow frame around the gallery images.

You can also remove ALL the default gallery styles (not just the borders) by adding the following code to your child theme functions.php.

// Remove inline WordPress styles added with the gallery shortcode.
add_filter( 'use_default_gallery_style', '__return_false' );

But then you will need to add your own styles to your theme stylesheet. The details for adding your own styles will have to wait for another tutorial!

引用自 https://amethystwebsitedesign.com/remove-border-on-wordpress-gallery-images/

标签: none