WordPressのショートコードを自作したい！【vol.2】【めもめも】

＊旧ブログ（あんど+BLOG）からの転載です。

どうも！すんです。
前回投稿したWordPressのショートコードを自作したい！【vol.1】【めもめも】
の続きになります！

今回はvol.2ということで、前回もちょっと触れた「囲み型ショートコード」の自作方法について、めもしていきたいと思います。

前回のおさらい！囲み型ショートコードとは、

[ショートコード名]...囲まれてしまった。[/ショートコード名]

↑このような形のもの。です。

では！早速！！

囲み型ショートコードの自作方法について！

今回も、function.phpにソースを書き込んでいきます。

例として、囲んだ文字の大きさと、色を変えることができるショートコードを作ってみます。

function 関数名( $atts, $content = null ) {
    $val =<<<EOS
       <span style="color:#00f; font-size:24px;">{$content}</span>
EOS;
    return $val;
}
add_shortcode('ショートコード名', '関数名');

↑上記の形で、自分でショートコード名と関数名を決め作成すると、
囲んだ文字が青色でフォントサイズが24pxになります。

今回は、spanタグを使用しましたが、もちろんその他のタグを使用してショートコードを作る事もできますよ！

実際に関数名とショートコード名を入れてみると…

function sun( $atts, $content = null ) {
    $val =<<<EOS
       <span style="color:#00f; font-size:24px;">{$content}</span>
EOS;
    return $val;
}
add_shortcode('test2', 'sun');

↑こんなかんじ！

前回の記事同様、
関数名を「sun」に。ショートコード名は「test2」にしてみました。

実際に作ったショートコードを使う時は、

[test2]文字色とサイズを変えたい文字はここに入れてね[/test2]

↑こんなかんじ！

その他にも、

特定のクラス属性を持ったタグで囲みたい！

function content1( $atts, $content = null ) {
    $val =<<<EOS
       <div class="content1">{$content}</div>
EOS;
    return $val;
}
add_shortcode('content1', 'sun');

↑こんなかんじで作ると、

[content1]content1のクラスを持ったdivに囲まれてしまった。[/content1]

content1のクラスを持ったdivタグで囲うことができます。

自己完結型ショートコードに続き囲み型ショートコードの自作方法も紹介してみましたが、
…ショートコードって、便利。ですね。

囲み型ショートコードも応用していけば色々な場面で活躍してくれそうです。

投稿者プロフィール

sun

今年の目標：ひ弱キャラ脱却

最新の投稿

• jQuery2017.05.19ドロワーメニュー実装に使える！jQueryプラグインDrawerについて
• css2017.04.21CSSのpositionプロパティについてちょっとまとめてみた
• サービス2017.03.17無料で出品してみませんか？マーケットプレイス型ECサービス「カウトコ」って？
• css2017.01.20CSSだけでできちゃう！hover時の面白いボタンエフェクト