ここは僕の冷蔵庫。後はあれして食べるだけ。

I love the frozen FOOD.

wordpress には、 shortcode という機能拡張があります。
wordpressの美味しいイベントフックで紹介したフィルターやフックなどとは異なる機能拡張です。

手間を省く

たとえば、こんなことを考えてみます。
画像を記事に張り付けるのだけど、たいてい、その画像の表示方法が決まってると。imgタグで囲むとき

<img src="画像URL" class="fit"/>

のように、classを指定しますよと。
これ、毎回書くの面倒ですよね?おまけに、付与したいclass属性、後で増やしたいなーと思ったとき、「過去の記事どうしよう・・・」と思いませんか?過去の記事に新しいクラスを付与するために、全部の記事を修正するのもね・・・。
こんな手間を省く方法があります。

方法

たとえば、記事中に挿入する画像のURLを、下記のように指定するとします。

[image]画像URL[/image]

上記で指定したとき、実際に表示される画像には、下記のようなタグがついてきたら便利じゃないですか?

<img src=”画像URL” class=”fit”/>

先ほど話をしていたクラスタグなど、自動的に付与されるわけです。
また、

<a href=”画像URL”><img src=”画像URL” class=”fit”/></a>

なんかにも変わってくれたら、もっと助かりますかね?

shortcodeを使おう

こうゆう場合、shortcodeという機能拡張を使います。
function.phpに、このような定義をしてみましょう。

function gemone_image( $attr , $content=null )
{
        return( '<a href="'.$content.'"><img class="fit" src="'.$content.'"/></a>' );
}
add_shortcode('image', 'gemone_image');

そして、wordpressの記事に、先ほどのような

[image]画像URL[/image]

を指定してみてください。なお、画像URLは、「メディア追加」で画像をアップロードしたときのURLをはっておきましょう。

記事をプレビューしてHTMLソースをみてみてください。imgageで指定したurlがimgタグに変換されましたか?

shortcodeの定義方法

先ほど、記事中に「 image 」(shortcode名)を指定すると、 aタグや img タグに置き換わりましたよね。
shortcodeを使うと、 image という名前に対して、置き換え方法 が定義できます。

function 置き換える関数( $attr , $content=null )
{
    return( 置き換えた結果の文字列 );
}
add_shortcode('shortcode名', '置き換える関数');

add_shortcodeは、shortcode名に対して「置き換える関数」を関連ずけを行っています。
さて、実際によびだされる「置き換える関数」には、$attrや$contentという変数が、引数で指定されてますね。

[image]画像URL[/image]

記事中で上記のような呼び出し方をすると、$contentには「画像URL」が代入されてます。
$attr文字ですが、

[image title=”画像タイトル”]画像URL[/image]

のように、属性を指定した場合に、代入されます。

function gemone_image( $attr , $content=null )
{
    extract(shortcode_atts(array(
        'title' => ''
    ), $attr));

    return( '<a title=".$title." href="'.$content.'"><img class="fit" src="'.$content.'"/></a>' );
}
add_shortcode('image', 'gemone_image');

こんな感じで、imageで指定されたtitleを使うことができます。

アイデア次第で、とても幅が広い機能が実装できますよ!
是非お試しあれ!

参考

参考記事


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

CAPTCHA