先日までに、ショートコードの基本と自己完結型の記事を書きました。
今回は、囲み型のショートコードを作成していきます。
Contents
囲み型のショートコードとは？
前回のショートコードの自己完結型を作成でも書きましたがショートコードには自己完結型と囲み型の2つのタイプがあります。
自己完結型
自己完結型はショートコードを一度だけ書いて完結するものになります。閉じるショートコードは不要です。自己完結型の書き方は下記になります。
[shortcode]
自己完結型の記事もチェック
囲み型
一方、囲み型は開始のショートコードと終わりのショートコードでコンテンツを囲みます。囲み型の書き方は下記になります。
[shortcode]コンテンツ[/shortcode]
今回はこちらを解説していきます。
囲み型のショートコードの基本
まずは簡単な囲み方のショートコードを作成します。
function.php
//囲み型ショートコードで出力
function kakomi_func( $atts, $content = null ) {
return $content;
}
add_shortcode('kakomi', 'kakomi_func');
ショートコードが作成できました。投稿入力画面でショートコードを入力します。
ショートコード
[kakomi]ここが囲まれたコンテンツ[/kakomi]
出力
ここが囲まれたコンテンツ
サイトで投稿を確認して「ここが囲まれたコンテンツ」と表示されていればOKです。
あまりに基本すぎるので、もう少し手を加えていきます。囲んだコンテンツをdivでラップして装飾したいと思います。
function.php
//囲み型ショートコードで出力(ボックスを装飾)
function box_func( $atts, $content = null ) {
return '<div class="box">' . $content . '</div>';
}
add_shortcode('box', 'box_func');
CSS
.box{
background: #ffdddd;
border: 1px solid #d25555;
padding: 20px;
}
.boxというdivでラップしましたのでcssで装飾します。ボーダーと背景色を指定しました。
ショートコード
[box]ここが囲まれたコンテンツ[/box]
出力
装飾されたボックスが出力されました。
コードの解説
return '<div class="box">' . $content . '</div>';
$contentにショートコードで囲まれたユーザーが入力したコンテンツが入ります。
また、$contentは、エスケープやエンコードされないのでHTMLを書いてもちゃんとHTMLタグとして出力されます。
囲み型のショートコードに属性を追加する
先ほどの例では必ず.boxというクラスのdivになってしまい応用が効かないので、属性でユーザーがクラス名をつけられるようにしましょう。
function.php
//囲み型ショートコードでユーザーが入力した属性をクラス名として出力
function box_func2( $atts, $content = null ) {
extract( shortcode_atts( array(
'class' => 'no-class',
), $atts ) );
return '<div class="' . esc_attr($class) . '">' . $content . '</div>';
}
add_shortcode('box2', 'box_func2');
CSS
.caution{
background: #ffdddd;
border: 1px solid #d25555;
padding: 20px;
}
.info{
background: #d8f5ff;
border: 1px solid #01a4de;
padding: 20px;
}
.cautionと.infoという2つのクラスをcssで装飾しました。
ショートコード
[box2 class="caution"]ここが囲まれたコンテンツ[/box2]
[box2 class="info"]ここが囲まれたコンテンツ[/box2]
出力
コードの解説
extract( shortcode_atts( array(
'class' => 'no-class',
), $atts ) );
return '<div class="' . esc_attr($class) . '">' . $content . '</div>';
extractはちょっと難しいですが、連想配列に含まれるキーを変数名、値をその変数の値として新しい変数を作成します。今回の例だと配列のキー「class」が変数「$class」となり、ユーザーが入力した値が「$class」の値となります。
そして、ユーザーが値を入力しなかった場合のデフォルトの値として'class' => 'no-class'を定義しています。
extractの詳細はこちら
ショートコードの入れ子
ショートコードはdo_shortcode()を使って入れ子にすることもできます。
function.php
function nest_func( $atts, $content = null ) {
return do_shortcode($content);
}
add_shortcode('nest', 'nest_func');
ショートコード
[nest]ネストしたショートコード[hello][/nest]
出力
ネストしたショートコードhello shortcode!
まとめ
今回はボックスの装飾を2パターン作成しただけですが、事前にクラスの装飾をcssで指定しておけば、幾つでもおしゃれなボックスをショートコードで出力することができます。
もちろんボックスだけではなく文字を装飾したり、アイコンフォントを使ったりとアイデア次第でなんでもできます。ここまで読んでいただいた方はぜひ覚えて使ってみてください。
RELATED ARTICLES
