WordPressに独自ショートコードのサンプルコード集【入れ子もOK!】

WordPressに独自ショートコードのサンプルコード集【入れ子もOK!】

WordPress

WordPressのショートコードの実装の仕方をご紹介します!!

単純なものから値を付与したり複雑なもの、ショートコードの入れ子の仕方も解説します。サンプルコードつき。※ この記事は2021年6月に大幅メンテナンスしました。

この記事の対象

  • WordPressを少し改造したり、カスタマイズできる
  • WordPressでブログをカスタマイズしたい
  • HTMLやCSSがわかる
かみーゆ
かみーゆ

カンタンな実装から順番に紹介していきます!!!

ショートコードの作り方

ショートタグは投稿でphpの代わりに使えるワードプレス専用のタグです。

ショートコードAPI

変数や関数が使えるのでとっても便利です。

たとえば、サイトの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_unautopdo_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 );

まとめ

ショートコードはうまく使うと超便利!装飾の幅も広がり記事やページがめっちゃ華やかになります。

ただ、テーマの乗り換えをするときに使えないショートコードなども出てきた後々大変にはなることもありますので、メンテナンス性を考えて、うまく利用しましょう!

皆さんのコーディングライフの一助となれば幸いです。

今回も最後までお読みいただきありがとうございました。

この記事を書いた人

かみーゆ/フロントエンドエンジニア

資金ゼロからフィリピンで起業した海外ノマドエンジニア。IT業界10年以上でテクニカルディレクター(技術責任者)・エンジニア講師・ブリッジSEを経てLenzTechnologies Inc.を設立し、代表を務める。CMS concreteCMSエバンジェリスト。テックブログ以外も「磨耗しない人生」や「海外ノマド」のライフスタイルについて発信。好きなものは肉とハイボール。