最近のテーマでは「２カラム表示」や「ボックス」など色んなショートコードが用意されていますね。
今回はこのショートコードがどうやって作られているのかを解説します。
ショートコードの作り方
独自のショートコードを作りたい場合は、functions.php に次のように書きます。
基本の書き方
function 関数名($atts, $content){
return '出力するHTML';
}
add_shortcode('ショートコード名', '関数名');
例えば、かなりシンプルですが、次のように書くと投稿画面で「[test]」と書くだけで、「テストコードです」
function test_code($atts, $content){
return '<div>テストコードです。</div>';
}
add_shortcode('test', 'test_code');
$contentを使ってみよう
関数の引数の「$content」はショートコードタグで挟んだ情報が渡されます。
なので、
[test]これはテストコードです。[/test]
と書くと、$contentには「これはテストコードです。」が代入されます。
試しに、次のように文字を赤くするショートコードを作成しました。
function color_red($atts, $content){
return '<div style="color:red;">' .$content. '</div>';
}
add_shortcode('test', 'color_red');これで[test][/test]で囲んだ文字は全て赤くなります。
$attrsを使ってみよう
関数の引数「$atts」は「属性」を指します。
なので、ショートコードに属性を持たせると、その値が渡ります。
書き方の例
[test class=”bg-pink”]これはテストコードです。[/test]
このように書くと、$attrsには「class=”bg-pink”」が代入されます。
$attrsを使う場合、全体の書き方は次の通りになります。
基本の書き方
function 関数名($atts, $content){
extract(shortcode_atts(array(
'属性名1' => '属性の初期値',
'属性名2' => '属性の初期値'
), $atts));
return '出力するHTML';
}
add_shortcode('ショートコード名', '関数名');
試しに、$attsを使って背景色をピンクにするショートコードを作成しました。
function bg_color_pink($atts, $content){
extract(shortcode_atts(array(
'class' => 'pink'
), $atts));
return '<h2 class="'.$class.'">' .$content. '</h2>';
}
add_shortcode('test', 'bg_color_pink');これで、
[test class=”bg-pink”]見出し[/test]
と書くと、classに「bg-pink」が割り当てられるので、「background:pink」としておけば背景色がピンク色になります。
なので色んな色や形のコードを用意しておけば、たくさんの種類の見出しが作れますね。
