WordPressカスタマイズ
先日までに、ショートコードの基本と自己完結型の記事を書きました。
今回は、囲み型のショートコードを作成していきます。
囲み型のショートコードとは？
前回のショートコードの自己完結型を作成でも書きましたがショートコードには自己完結型と囲み型の2つのタイプがあります。
自己完結型
自己完結型はショートコードを一度だけ書いて完結するものになります。閉じるショートコードは不要です。自己完結型の書き方は下記になります。
[shortcode]
自己完結型の記事もチェック
LINK
囲み型
一方、囲み型は開始のショートコードと終わりのショートコードでコンテンツを囲みます。囲み型の書き方は下記になります。
[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」の詳細はこちら
PHP: extract – Manual
ショートコードの入れ子
ショートコードは「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で指定しておけば、幾つでもおしゃれなボックスをショートコードで出力することができます。もちろんボックスだけではなく文字を装飾したり、アイコンフォントを使ったりとアイデア次第でなんでもできます。
でもショートコードの数が増えたり属性が増えたりして複雑になったら結局覚え切れなくなりそう、と思うかもしれません。そこで便利なのが「AddQuicktag」というプラグインです。よく使うコードを登録しておいて入力画面でボタンクリックだけで入力できます。幾つでも登録できるし、わかりやすい名前もつけれます。今回で言ったら「cautionボックス」、「infoボックス」という名前で登録しておけばショートコードを覚える必要もなく入力画面でボタン一発で使えるのでとても便利です。
関連記事
