WordPressちょこっとTips:ギャラリーのCSSを変えるフック

何かと使われないWordPressのギャラリー機能ですが、ちょっとした一手間でちょっと良くなります。

ちょっと良くしたい場合に多い要望は、おそらくCSSの変更でしょう。
何と言ってもWordPress標準機能のギャラリーは、ショートコードが置き換えられる時に初めてCSSが書き出されます。つまり、ヘッダーではなく本文内にstyleタグが作られるのです。
つまり、ヘッダーにギャラリー用のCSS書いても無意味な訳ですね・・・

と言う訳で、フックの登場です。

function change_gallery_style($style){
  return '
    #gallery-1 {
    margin: auto;
  }
  #gallery-1 .gallery-item {
    float: left;
    margin-top:10px;
    text-align: center;
    width: 50%;
  }
  #gallery-1 img {
    border: 2px solid #cfcfcf;
  }
  #gallery-1 .gallery-caption {
    margin-top: 5px;
    padding: 0 4%;
    text-align: left;
    margin-left: 0;
  }
  '.$style;
}
add_filter('use_default_gallery_style','__return_false');
add_filter('gallery_style','change_gallery_style');

解説

たった一つの目的に対し、2つのフックを使っています。

add_filter('use_default_gallery_style','__return_false');
add_filter('gallery_style','change_gallery_style');

先ず2つ目のフックは

add_filter('gallery_style','change_gallery_style');

change_gallery_style()という独自関数を呼び出しています。
この関数は見ての通り、CSSをリターンします。
ここに好きなCSSを書けば良い訳です。

ポイントは1つ目のフック。

add_filter('use_default_gallery_style','__return_false');

__return_false
は、読んで字の如くそういう関数です。
知らなければよく使う関数セットとしてわざわざfuntions.phpに一つ追加してしまいそうですが、そもそもWordPress自体が用意してくれている物です。

use_default_gallery_styleというのも、大体意味が分かると思います。
要は、デフォルトのスタイルを無効にし、自分のスタイルを流し込むと。

因に私が上に書いたCSSは、写真を2列表示にしたとき、隣のキャプションの文字と一つながりに読めてしまうのでパディングを開けた例です。
複数形の異なるギャラリーを設置する場合は考慮されてません。。

そして今更なんだけど、、

add_filter('use_default_gallery_style','__return_false');

したら、ヘッダーに普通にCSS書いても一緒じゃん！

後はColorboxとか入れたら十分素敵なギャラリーに成ると思いますよ！