【WordPress】手っ取り早くgallery ショートコードを独自作成
gallery ショートコードを独自作成しよう
WordPressにはデフォルトでgallery ショートコードがある。
下記のコードを記事内にいれれば簡単にギャラリーが作れる。
[gallery ids=”{画像ID, 画像ID, 画像ID…}” link=”{リンク先}” columns=”{カラム数}” orderby=”{並び順}” size=”{画像サイズ}” ]
今回、このショートコードを扱っている人から、もっとギャラリーの見た目を何とかしたい、との話があった。
・テーマなどの関係でcssを容易に触れない状況、新規にギャラリー機能を付けるか。
・今のショートコードに慣れているから新たにギャラリー用プラグインは入れたくない
・あんまり工数かけたくない。
考えた末、今回は Post Snippetsプラグイン でギャラリーショートコードを自作した。
そのときの備忘録。
既存のgallery ショートコードのソースを流用
工数をかけたくない
があるから、あるものを流用しまくろう。
既存のgallery ショートコードのソースは、
wp-includes/media.php にある。
こんな感じ
add_shortcode( 'gallery', 'gallery_shortcode' );
function gallery_shortcode( $attr ) {
$post = get_post();
static $instance = 0;
$instance++;
if ( ! empty( $attr['ids'] ) ) {
// 'ids' is explicitly ordered, unless you specify otherwise.
//省略
$output .= "
</div>\n";
return $output;
}
ざっとみると、 $attr 引数から、もろもろ判断・取得してギャラリー表示用のhtmlを生成しているだけだ。
これを流用しよう。
Post Snippetsプラグインでショートコード作成
Post Snippetsプラグインを今回選択したのは、「phpで組める」「引数の機能がある」からだ。
そうすれば、今までのようにユーザーはショートコードでギャラリーの内容を設定できる。
現在ユーザーは、gallery ショートコードの引数、ids,orderby,columns,linkを使っているのみ。
逆に他の引数の存在は知らない。
今回もとりあえずこの4つの引数で機能させる。
gallery_shortcode()をPost Snippetsプラグインに反映させる。
下記はPost Snippetsプラグインの設定画面だ。試しにtestというショートコードを作ってみる
まず、4つの引数を下記のようにVariablesに入れる
そして、gallery_shortcodeのソースを、Post Snippetsのコーデイング箇所の張り付ける。
その際、下記の赤線は不要。
先頭
最後
先頭の1行
function gallery_shortcode( $attr ) {
と、
最後の2行、
return $output; }
は不要。
削除したら、一番最後の行に
echo $output;
を追加。
これだけだと、もともとのソースの引数$attrが空のままだ。
なので、今回使用する引数分、
$attr['ids'] = '{ids}';
$attr['orderby'] = '{orderby}';
$attr['columns'] = '{columns}';
$attr['link'] = '{link}';
を先頭に追加する。これでユーザーが指定した引数の値が受け取れる。
基本、これで、
[gallery columns="4" link="none" ids="1,2,3" orderby="rand"]
と指定していたところを
[test columns="4" link="none" ids="1,2,3" orderby="rand"]
にするだけでギャラリーが機能するはず。
テーマによると思うけど、意図しない文字列が入る
それで表示したところ、、
確かにギャラリーがほぼ元のように表示できた。
ちょっと記載できない画像なので、キャプチャをここには貼れないが。
しかし、ギャラリーの前に「ntt」後に「n」という文字列が表示される。
テーマなどによるかもしれないが、、
探したところ、ソース内の
$gallery_style = " <style{$type_attr}> #{$selector} { margin: auto; } #{$selector} .gallery-item { float: {$float}; margin-top: 10px; text-align: center; width: {$itemwidth}%; } #{$selector} img { border: 2px solid #cfcfcf; } #{$selector} .gallery-caption { margin-left: 0; } /* see gallery_shortcode() in wp-includes/media.php */ </style>\n\t\t";
ああ、最後のこれだ。メタ文字、、ここではうまく機能しないようだ。
細々調べる時間もないので、「\n\t\t」のみ削除。
最後の行の「\n」部分も削除。
これで再表示させたらこれらの文字も消えた。
あとはデザインを調整するのみ
ここまでの流れの中で、ショートコードのidsで指定した画像のパスやキャプションやら云々、並び順や列数などが取得できていて、
機能するソースをPost Snippetsプラグインで設定できたことになる。
一から作ったりするより、ずっと簡単だ。30分もかかっていない。
さて、、ここからは見た目の調整だ。
今後はユーザーに見せながらの調整になるが、
私としてはデフォルトのWordPressのショートコードのデザインに影響は与えたくない。
ソース内のcss箇所を見ると、
$gallery_style = " <style{$type_attr}> #{$selector} { margin: auto; } #{$selector} .gallery-item { float: {$float}; margin-top: 10px; text-align: center; width: {$itemwidth}%; } #{$selector} img { border: 2px solid #cfcfcf; } #{$selector} .gallery-caption { margin-left: 0; } /* see gallery_shortcode() in wp-includes/media.php */ </style>\n\t\t";
なので、{$selector} がカギだ。
そして、この{$selector} は、ちょい上の方で
$selector = "gallery-{$instance}";
で指定してるから、ここを独自の値にカスタマイズ
$selector = "gallery-hogehoge-{$instance}";
例は適当だが、このように他と被らない独自の値にしたうえで、
先ほどのcss箇所を自由に触っていけばいい。
