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

どうも!すんです。
前回投稿した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タグで囲うことができます。

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

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

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

どうも。すんです。

今回は、WordPressのショートコードの自作方法について!

まず、WordPressで使うショートコードとは。

投稿記事内や特定のテンプレートファイルにて、
テキストやhtml、自作のプログラムなどを挿入することができるものです。

上手く使うと、とっても便利なものです。
作業効率も、ぐーーーーんとアップする!かもしれません。

ではさっそく、ショートコードの自作方法!について

「function.php」に書き込む!

簡単に書くと、こういった感じで記述していきます。

function 関数名() {
    $str =<<<EOS
        表示したい文字列や画像、htmlタグなどなど。をここに記述します
EOS;
    return $str;
}
add_shortcode('ショートコード名', '関数名');

例えば、

function sun() {
    $str =<<<EOS
        酒は飲んでも飲まれるな。
EOS;
    return $str;
}
add_shortcode('test', 'sun');

といった形でfunction.phpに記述した場合、
[test]というショートコードを記事内に書けば

酒は飲んでも飲まれるな。

と、ショートコードを書いた場所に表示されます。

テンプレートファイルに記述する場合は

<?php
echo do_shortcode('[test]');
 ?>

↑こんな感じです。

今回は簡単な文字列が呼び出せるショートコードを例としてあげましたが

たとえば特定の記事を呼び出したりだとか、ブログのタイトルを呼び出したりだとか。
もっと実用的なショートコードをつくることももちろん!可能です。

これはまた次の機会に。

今回めもしたのは、
「自己完結型ショートコード」の自作方法について。

自己完結型ショートコードとは、

[ショートコード名]

↑のようにショートコードひとつ記述するだけで終わり!
っていうもののことをいうみたいです。

その他に、
「囲み型ショートコード」というものもあり、

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

↑のようなものです。

囲み型ショートコードの自作方法についても、またの機会に
めもしたいと思います。