【WordPressテーマ開発】ショートコードの作り方

最近のテーマでは「2カラム表示」や「ボックス」など色んなショートコードが用意されていますね。

今回はこのショートコードがどうやって作られているのかを解説します。

ショートコードの作り方

独自のショートコードを作りたい場合は、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」としておけば背景色がピンク色になります。

なので色んな色や形のコードを用意しておけば、たくさんの種類の見出しが作れますね。

created by Rinker
ソシム
¥2,860 (2022/12/06 08:40:27時点 Amazon調べ-詳細)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA