先日までに、ショートコードの基本と自己完結型の記事を書きました。
今回は、囲み型のショートコードを作成していきます。
囲み型のショートコードとは？
前回のショートコードの自己完結型を作成でも書きましたがショートコードには自己完結型と囲み型の2つのタイプがあります。
自己完結型
自己完結型はショートコードを一度だけ書いて完結するものになります。閉じるショートコードは不要です。自己完結型の書き方は下記になります。
[shortcode]
自己完結型の記事もチェック
[related id=2223]
囲み型
一方、囲み型は開始のショートコードと終わりのショートコードでコンテンツを囲みます。囲み型の書き方は下記になります。
[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!
WEBデザイナー・フロントエンドのスキルを確実に身につけたい方へ
「WEBデザインやフロントエンドを学びたい」と思い立ったとき、多くの方がまず独学を選びます。
しかし、独学では「何をどこから学べばいいかわからない」「つまずいたときに誰にも聞けない」といった壁にぶつかることも少なくありません。
一方、スクールで学べば、正しい順序で、現場で使えるスキルを効率よく習得することができます。最短ルートでスキルを身につけたい方には、スクール学習がおすすめです。
かすが私は26歳で印刷業からWEBデザイナーを目指して学び始めましたが、やはり独学に限界を感じ短期スクールで学びました。本気でスキルを身につけたいならスクールはマジで行った方が良いです！
- カリキュラムが体系化されているため、基礎から応用まで無駄なく学べる
- 現役のプロから実践的なフィードバックを受けられる
- わからないことをすぐに質問・解決できる環境がある
- 制作課題を通じて、ポートフォリオが作成できる
- 学習仲間や講師とのつながりが、モチベーション維持につながる
- カリキュラムが現場で必要とされる技術に対応しているか
- 現役デザイナー・エンジニアが講師として在籍しているか
- ポートフォリオ制作のサポートが充実しているか
- 卒業後の就職・転職支援が用意されているか
- オンライン・通学など、自分の生活スタイルに合った受講形式か
遠回りせず、確実にスキルを身につけたいなら、プロに教わるのが一番の近道です。
WEBデザイナー・フロントエンドエンジニアとして一歩踏み出したいあなたにぴったりのスクールを、下記の記事でご紹介しています。ぜひチェックしてみてください。
WordPressのショートコード「囲み型」まとめ
今回はボックスの装飾を2パターン作成しただけですが、事前にクラスの装飾をcssで指定しておけば、幾つでもおしゃれなボックスをショートコードで出力することができます。
もちろんボックスだけではなく文字を装飾したり、アイコンフォントを使ったりとアイデア次第でなんでもできます。ここまで読んでいただいた方はぜひ覚えて使ってみてください。
