WordPressのショートコードはとても便利で色々なことができるんですが、今回は囲み型ショートコードを使ってみました。ちなみに囲み型ではない方のショートコードは「WordPressで自分だけのショートコードの作り方」を参考にしてみて下さい。ショートコードに自分がよく使うクラス名をつけたHTMLタグなんかを登録しておくと作業も捗りますよね。囲み型ショートコードはタグ打ちみたいな感覚でめんどくさいHTMLをいちいち打たなくてもいいのでとても便利かと思います。ということで以下使い方です。
[ads_center]
使い方
基本的な使い方はfunctions.phpに以下のように記述して使います。
function link_shortcode( $atts, $content = null ) {
return '<p class="link">' . $content . '</p>';
}
add_shortcode('link', 'link_shortcode');
そして、実際の投稿画面で次のようにして使います。
[link]ここはリンクです[/link] // 出力されるHTML <p class="link">ここはリンクです</p>
ちなみに$contentは、エスケープやエンコードされないのでHTMLを同時に書いても大丈夫みたいです。
[link]<a href="http://bl6.jp/">bl6.jp</a>[/link] // 出力されるHTML <p class="link"><a href="http://bl6.jp/">bl6.jp</a></p>
引数を渡す
引数を渡せるようにするとさらに便利になりますね！渡すようにするにはこんな感じでfunctions.phpに記述していきます。
function link_shortcode( $atts, $content = null ) {
extract( shortcode_atts( array(
'class' => 'link',
), $atts ) );
return '<p class="' . $class . '">' . $content . '</p>';
}
add_shortcode('link', 'link_shortcode');
上記は指定した引数がクラス名として渡されます。実際に使う場合は次のようにして使います。
[link class="sample"]<a href="http://bl6.jp/">bl6.jp</a>[/link] // 出力されるHTML <p class="sample"><a href="http://bl6.jp/">bl6.jp</a></p>
sampleというクラス名を引数として渡しています。何も渡さない場合はデフォルトで指定しているlinkというクラス名が付けられます。
複数の引数を渡したい
さらに複数の引数を渡せるようにするには、単純に渡す引数を追加していくだけ大丈夫です。
function link_shortcode( $atts, $content = null ) {
extract( shortcode_atts( array(
'class' => 'link',
'href' => 'http://bl6.jp/',
), $atts ) );
return '<p class="' . $class . '"><a href="' . $href . '">' . $content . '</a></p>';
}
add_shortcode('link', 'link_shortcode');
実際に使う場合も引数を追加するだけでOKです！
[link class="sample" href="http://b.hatena.ne.jp/"]はてなブックマーク[/link] // 出力されるHTML <p class="sample"><a href="http://b.hatena.ne.jp/">はてなブックマーク</a></p>
こんな感じで自分がよく使うHTMLなんかを登録しておくと記事作成の効率も良くなるかと思います。
で、あとは上記のショートコードをWordPressプラグイン「AddQuicktag」に登録しておくと、さらに楽になるかと思います。AddQuicktagの使い方に関しては以前記事にしていますのでよろしければそちらもどうぞ。
ブログの編集作業が捗るWordPressプラグイン「AddQuicktag」
参考サイト
ショートコード API – WordPress Codex 日本語版
