WordPressにはショートコードという機能があります。
ショートコードを使えば、わざわざHTMLタグを記述しなくても、簡単な書き方で複雑なHTMLを挿入することができます。
今回は、そのショートコードを自作する方法を解説します。
ショートコードを自作する方法
ショートコードには、単体で使うタイプと文字列などを囲んで使うタイプの２パターンあります。
単体で使うタイプ。
[short-code]文字列などを囲って使うタイプ
[short-code]あああ[/short-code]それぞれの書き方を紹介します。
単体で使うタイプのショートコード
functions.phpに以下のようなコードを記述すると、ショートコードを自作することができます。
function original_shortcode($atts) {
$html = '<p>_(:З｣ ∠)_</p>';
return $html;
}
add_shortcode( 'kaomoji', 'original_shortcode' );最後にreturnでHTMLや文字列などを返してあげます。
以上をfunctions.phpに記述したあと、WordPressのテキストエディタで、
[kaomoji]と入力してプレビューすると、
_(:З｣ ∠)_と表示されます。
属性を付与する
ショートコードには属性を付与することもできます。
以下の例は、属性に記述した記事IDからリンクを生成するショートコードです。
function get_link_shortcode($atts) {
$id = $atts['id'];
if( get_permalink( $id ) ) {
$url = get_permalink( $id );
$html = '<a href="' . $url . '">' . $url . '</a>';
return $html;
}
}
add_shortcode( 'link', 'get_link_shortcode' );ショートコードの属性は以下のように指定します。
[link id="1"]今回の例では、記事IDが「1」のリンクが自動で生成されます。
単体で使うタイプのショートコードを生成する関数は、引数が一つだけです。
囲んで使うタイプのショートコード
お次は文字列やHTMLタグなどを囲んで使うタイプのショートコードです。
function wrap_div_shortcode( $atts, $content = "" ) {
return '<div class="box">' . $content . '</div>';
}
add_shortcode( 'wrap-box', 'wrap_div_shortcode' );囲んで使うショートコードでは、関数に引数を二つ渡します。
$content の中には囲まれた文字列やHTMLコードが代入されています。
上記の例は、その囲まれた部分を<div class=”box”></div>で囲むショートコードです。
[wrap-box]divで囲まれる箇所[/wrap-box]このように記述してプレビューすると、以下のように出力されます。
<div class="box">divで囲まれる箇所</div>属性を付与する
属性を与えることもできます。
function wrap_div_add_class_shortcode( $atts, $content = "" ) {
$class = $atts['class'];
return '<div class="' . $class . '">' . $content . '</div>';
}
add_shortcode( 'add-class', 'wrap_div_add_class_shortcode' );上記の例は任意のclassを付与したdivで囲むショートコードです。
[add-class class="red"]divで囲まれる箇所[/add-class]このショートコードは以下のように出力されます。
<div class="red">divで囲まれる箇所</div>これはあくまでも例です（この場合HTML手打ちした方が早そう…）。
まとめ
いちいちHTMLをその都度入力するのが面倒な場合、ショートコード化するのが便利なのでおすすめです。
そこまで難しいカスタマイズではないので、積極的に試してみてください。
