恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

WordPressのショートコードを自作する方法

投稿日:2018-03-19 更新日:

shortcode

WordPressにはショートコードという機能があります。

ショートコードを使えば、わざわざHTMLタグを記述しなくても、簡単な書き方で複雑なHTMLを挿入することができます。

今回は、そのショートコードを自作する方法を解説します。

ショートコードを自作する方法

ショートコードには、単体で使うタイプと文字列などを囲んで使うタイプの2パターンあります。

単体で使うタイプ。

[short-code]

文字列などを囲って使うタイプ

[short-code]あああ[/short-code]

それぞれの書き方を紹介します。

単体で使うタイプのショートコード

functions.phpに以下のようなコードを記述すると、ショートコードを自作することができます。

function original_shortcode($atts) {
  $html = '<p>_(:З」 ∠)_</p>';
  return $html;
}
add_shortcode( 'kaomoji', 'original_shortcode' );

最後にreturnでHTMLや文字列などを返してあげます。

以上をfunctions.phpに記述したあと、WordPressのテキストエディタで、

[kaomoji]

と入力してプレビューすると、

_(:З」 ∠)_

と表示されます。

属性を付与する

ショートコードには属性を付与することもできます。

以下の例は、属性に記述した記事IDからリンクを生成するショートコードです。

function get_link_shortcode($atts) {
 $id = $atts['id'];
 if( get_permalink( $id ) ) {
   $url = get_permalink( $id );
   $html = '<a href="' . $url . '">' . $url . '</a>';
   return $html;
 }
}
add_shortcode( 'link', 'get_link_shortcode' );

ショートコードの属性は以下のように指定します。

[link id="1"]

今回の例では、記事IDが「1」のリンクが自動で生成されます。

単体で使うタイプのショートコードを生成する関数は、引数が一つだけです。

囲んで使うタイプのショートコード

お次は文字列やHTMLタグなどを囲んで使うタイプのショートコードです。

function wrap_div_shortcode( $atts, $content = "" ) {
  return '<div class="box">' . $content . '</div>';
}
add_shortcode( 'wrap-box', 'wrap_div_shortcode' );

囲んで使うショートコードでは、関数に引数を二つ渡します。

$content の中には囲まれた文字列やHTMLコードが代入されています。

上記の例は、その囲まれた部分を<div class=”box”></div>で囲むショートコードです。

[wrap-box]divで囲まれる箇所[/wrap-box]

このように記述してプレビューすると、以下のように出力されます。

<div class="box">divで囲まれる箇所</div>

属性を付与する

属性を与えることもできます。

function wrap_div_add_class_shortcode( $atts, $content = "" ) {
$class = $atts['class'];
  return '<div class="' . $class . '">' . $content . '</div>';
}
add_shortcode( 'add-class', 'wrap_div_add_class_shortcode' );

上記の例は任意のclassを付与したdivで囲むショートコードです。

[add-class class="red"]divで囲まれる箇所[/add-class]

このショートコードは以下のように出力されます。

<div class="red">divで囲まれる箇所</div>

これはあくまでも例です(この場合HTML手打ちした方が早そう…)。

まとめ

いちいちHTMLをその都度入力するのが面倒な場合、ショートコード化するのが便利なのでおすすめです。

そこまで難しいカスタマイズではないので、積極的に試してみてください。

Related Entries

この記事を書いた人

TAC

TAC

Webデザイナー、フロントエンドエンジニア。 Webデザイン、HTML/CSS、JavaScript、PHP、SEOが専門です。