WordPressのショートコードの実装の仕方をご紹介します!!
単純なものから値を付与したり複雑なもの、ショートコードの入れ子の仕方も解説します。サンプルコードつき。※ この記事は2021年6月に大幅メンテナンスしました。
この記事の対象
- WordPressを少し改造したり、カスタマイズできる
- WordPressでブログをカスタマイズしたい
- HTMLやCSSがわかる
カンタンな実装から順番に紹介していきます!!!
ショートコードの作り方
ショートタグは投稿でphpの代わりに使えるワードプレス専用のタグです。
変数や関数が使えるのでとっても便利です。
たとえば、サイトのURLのショートタグを作りたいときのコードの書き方はこんな感じ。functions.phpに追記するだけです。
function home_url(){
$home = esc_url( home_url() );
return $home;
}
add_shortcode('URL', 'home_url');
add_shortcode
関数でショートコードとして呼び出すことができます。
add_shortcode(ショートコード名, 関数);
投稿記事内にショートコードを利用できるようになります。
<a href="[URL]">トップページ</a>
ヘビーに使うバナーをショートコードとして登録し呼び出す
バナーやコンバージョンエリアを呼び出すのに便利です。
function banner(){
$banner = '<div>';
$banner .= '<a href="' . esc_url( home_url() ) . '/campaign/">';
$banner .= '<img src="' . esc_url( get_bloginfo('template_url') ). '" alt="キャンペーンバナー" width="700" heigth="250">';
$banner .= '</img>';
$banner .= '<div>';
return $banner;
}
add_shortcode('banner', 'banner');
記事内でバナー表示したいところに追加します。
キャンペーンやってるよ!!
[banner]
ショートコードに引数を使って値を追加する
次はショートコードに値(引数)を追加する方法です。
現在はextract
を使う方法は推奨されてません。
先ほどのバナーのショートコードを改造してみます。
function banner( $atts ){
$atts = shortcode_atts(
array(
//取得したい値のキー
'page' => '',
'src' => '',
),
$atts,
'banner'//ショートコード名
);
$banner = '<div>';
//同じサイト内のスラッグなど
$banner .= '<a href="' . esc_url( home_url( $atts['page'] .'/' ) ). '">';
$banner .= '<img src="' . esc_url( $atts['src'] ) . '" alt="キャンペーンバナー" width="700" heigth="250">';
$banner .= '</a>';
$banner .= '<div>';
return $banner;
}
add_shortcode( 'banner', 'banner' );
これで画像とリンク先を差し替えることができるようになります。
[banner page="campaign2" src="https://hogehoge.com/images/banner.png"]
ショー トコード内に文を入れる
ショートとタグの中に文も追加できます。
カンタンなものでこんな装飾もできますし、吹き出し装飾なんかも作れます。
function box( $atts, $content ){
$atts = shortcode_atts(
array(
//取得したい値のキー
//デフォルト値を入れておいてあげても○
'label' => '',
),
$atts,
'box'//ショートコード名
);
$box = '<div class="box">';
$box .= '<h2>'. esc_html( $atts[ 'label']) . '</h2>';
//同じサイト内のスラッグなど
$box .= $content;
$box .= '<div>';
return $box;
}
add_shortcode( 'box', 'box' );
[box label="ポイント"]ここに文章が入ります[/box]
コンテンツだけ追加したいとき
コンテンツだけ追加したいときは、第一引数をnull
か''
あたりにしておきます。
function box( $atts = null, $content ) {
return '<div>' . $content . '</div>';
}
ショートコードの入れ子
ショートコードは装飾にめっちゃ便利ですが、入れ子にしたいこともあります。
そんなときはshortcode_unautop
とdo_shortcode
を使います。
function box( $atts, $content ){
$content = do_shortcode( shortcode_unautop( $content ) );
//省略
return $box;
}
先ほど作ったショートコードを例にとると、装飾の中にショートコードを含めることができるようになります。
[box label="ポイント"]
ただいまキャンペーン中です。
[banner]
[/box]
そのほか、ショートコードで便利なTips
そのほかショートコードで便利な方法がいくつかあるので、まとめておきます。
テンプレート内(phpファイル内)で呼び出す
テンプレート内ではdo_shortcode
関数を使 って呼び出します。
echo do_shortcode('[box]');
ショートコードを取り除く
逆にサイトの説明などにショートコードが抜き出しで出てしまうことがあります。そんなときはstrip_shortcodes
でショートコードが取り除けます。
strip_shortcodes( $content );
まとめ
ショートコードはうまく使うと超便利!装飾の幅も広がり記事やページがめっちゃ華やかになります。
ただ、テーマの乗り換えをするときに使えないショートコードなども出てきた後々大変にはなることもありますので、メンテナンス性を考えて、うまく利用しましょう!
皆さんのコーディングライフの一助となれば幸いです。
今回も最後までお読みいただきありがとうございました。
かみーゆ/フロントエンドエンジニア