【解決】WordPressのギャラリー画像のグレーの枠線を非表示にする方法【カスタマイズ】

解決方法

早速解決方法です。下記をfunctions.phpに記述するだけです。

function.php

//ギャラリー画像の枠線非表示
add_filter( 'gallery_style', 'gallery_border_none');
function gallery_border_none($style){ 
return str_replace('border: 2px solid #cfcfcf;', 'border: none;',$style );
}

表示例

枠線有

枠線無

解説

WordPressのギャラリー画像を使用すると、下記のcssの記述がギャラリーの直前に出力されるため、テーマのcssでカスタマイズしようとしても下記の記述が優先されて適用されてしまいます。そのため、デフォルトの「border: 2px solid #cfcfcf;」のグレーの枠線が表示されてしまいます。

<style type="text/css">
#gallery-* {
margin: auto;
}
#gallery-* .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 50%;
}
#gallery-* img {
border: 2px solid #cfcfcf;
}
#gallery-* .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
</style>

これらの出力を無効にするのは簡単で、下記をfunctions.phpに記述するだけでOKです。

add_filter( 'use_default_gallery_style', '__return_false' );

ですが、この方法だと、ただ枠線を消したいだけなのに、その他のcssの記述も無効になってしまうため、すべて自身で記述し直さなくてはいけません。これはとても面倒ですね。

また、「wp-includes/media.php」を直接編集するのもNGです。

そこで使用するのが「gallery_style」というフックです。

このフックを使用すれば、「デフォルトのCSS」と、「ギャラリーを囲む div」をカスタマイズできます。

具体的には下記の部分のソースです。

<style type="text/css">
#gallery-* {
margin: auto;
}
#gallery-* .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 50%;
}
#gallery-* img {
border: 2px solid #cfcfcf;
}
#gallery-* .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */
</style>
<div id='gallery-*' class='gallery galleryid-* gallery-columns-* gallery-size-*'>

前述の枠線を消す方法では「str_replace」を用いて、「border: 2px solid #cfcfcf;」を「border: none;」に置き換えましたが、例えば下記のようにすればdivにclassを付与することも可能です。

functions.php

add_filter( 'gallery_style', 'gallery_border_none');
function gallery_border_none($style){ 
return str_replace("class='gallery", "class='hoge gallery",$style );
}

出力結果

<div id='gallery-*' class='hoge gallery galleryid-* gallery-columns-* gallery-size-*'>

• gallery_style – WordPress Hooks