【WordPress】ショートコードを使って記事を書く

WordPressで構築するとき、カスタムフィールドと同様によく使うのはショートコードです。
ショートコードとは、例えば、[hoge]と書くだけで

<div class="hoge">ほげ</div>

というHTMLコードが出力される便利な機能です。

書き方

//functions.php
function my_clearfix( $atts, $content = null ) {
  return '<div class="clearfix">'.esc_html( $content ).'</div>';
}
add_shortcode( 'clearfix', 'my_clearfix' );

こうして、エディター上で

[clearfix]
<img src="example.jpg" alt="example" style="float: left;">
テキストテキスト
[/clearfix]

<!-- 出力結果 -->
<div class="clearfix">
<img src="example.jpg" alt="example" style="float: left;">
テキストテキスト
</div>

こう書けば、中の要素に対してclearfixが適応されるので（CSS側で.clearfixに対してclearfixの記述をしておく必要があります）、都度HTMLコードでclearfixを書く必要がなくなります。

また、ショートコードに対して変数を与えることも出来ます。

書き方

//functions.php
function my_class_shortcode( $atts, $content = null ) {
   extract( shortcode_atts( array(
     'class' => 'hoge',
   ), $atts ) );
   return '<div class="'.esc_attr($class).'">'.$content.'</div>';
}
add_shortcode('myclass', 'my_class_shortcode');

エディター上ではこう書きます。

[myclass class="fuga"]fugaクラスがついたdivに囲まれます[/myclass]

<!-- 出力結果 -->
<div class="fuga">fugaクラスがついたdivに囲まれます</div>

初期値としてhogeという値が与えられているので、[myclass]＊＊＊[/myclass]と書くと、

<div class="hoge">＊＊＊</div>

と、.hogeに囲まれることになります。

また、ショートコードは基本的にメインエディターのみしか使えません。
カスタムフィールドで使用する場合は、出力するテンプレートにこう書きます。

<?php echo apply_filters( 'the_content', get_post_meta( $post->ID, 'my_custom_field', true ) ); ?>

もしAdvanced custom fieldsやCustom Field Suiteなどのカスタムフィールドプラグインを使用している場合は、
get_post_meta( $post->ID, 'my_custom_field', true )の部分をプラグインの推奨記述に書き換えてください。

その他、ウィジェットに使う場合は、functions.phpにこのように追記します。

// ウィジェットのタイトル
add_filter( 'widget_title', 'do_shortcode' );

// テキストウィジェット
add_filter( 'widget_text', 'do_shortcode' );

上手く使えば、HTMLを使わずに記事を書くことも出来ます。
カスタムフィールドを使うまでもないものは、ショートコードを使ってみるのはいかがでしょうか？

参考：: ショートコードAPI

素敵なショートコードライフを！

おまけ

ショートコードに限らず、カスタムフィールドでも私は値に対してエスケープ処理を入れるクセをつけました。
エスケープ処理の関数を入れておけば、もしPHPやJavascriptのコードを書かれたときに処理が走らないので安心です。
WordPress関数の中には元々エスケープ処理が含まれている関数もあるので、何でもかんでもエスケープしなければ！と過敏になることはありませんが、カスタムフィールドやショートコード、get_○○を出力する場合などは意識しています。