obara【WordPress】ショートコードを使って記事を書く
WordPressで構築するとき、カスタムフィールドと同様によく使うのはショートコードです。
ショートコードとは、例えば、[hoge]と書くだけで
1 | <div class="hoge">ほげ</div> |
というHTMLコードが出力される便利な機能です。
書き方
1 2 3 4 5 | //functions.phpfunction my_clearfix( $atts, $content = null ) { return '<div class="clearfix">'.esc_html( $content ).'</div>';}add_shortcode( 'clearfix', 'my_clearfix' ); |
こうして、エディター上で
1 2 3 4 5 6 7 8 9 10 | [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を書く必要がなくなります。
また、ショートコードに対して変数を与えることも出来ます。
書き方
1 2 3 4 5 6 7 8 | //functions.phpfunction 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'); |
エディター上ではこう書きます。
1 2 3 4 | [myclass class="fuga"]fugaクラスがついたdivに囲まれます[/myclass]<!-- 出力結果 --><div class="fuga">fugaクラスがついたdivに囲まれます</div> |
初期値としてhogeという値が与えられているので、[myclass]＊＊＊[/myclass]と書くと、
1 | <div class="hoge">＊＊＊</div> |
と、.hogeに囲まれることになります。
また、ショートコードは基本的にメインエディターのみしか使えません。
カスタムフィールドで使用する場合は、出力するテンプレートにこう書きます。
1 | <?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にこのように追記します。
1 2 3 4 5 | // ウィジェットのタイトルadd_filter( 'widget_title', 'do_shortcode' );// テキストウィジェットadd_filter( 'widget_text', 'do_shortcode' ); |
上手く使えば、HTMLを使わずに記事を書くことも出来ます。
カスタムフィールドを使うまでもないものは、ショートコードを使ってみるのはいかがでしょうか？
- 参考：
- ショートコードAPI
素敵なショートコードライフを！
おまけ
ショートコードに限らず、カスタムフィールドでも私は値に対してエスケープ処理を入れるクセをつけました。
エスケープ処理の関数を入れておけば、もしPHPやJavascriptのコードを書かれたときに処理が走らないので安心です。
WordPress関数の中には元々エスケープ処理が含まれている関数もあるので、何でもかんでもエスケープしなければ！と過敏になることはありませんが、カスタムフィールドやショートコード、get_○○を出力する場合などは意識しています。
＊私がよく使うもののみを載せております。他にもesc_sqlやesc_jsなどが用意されています。
