work.log

元エンジニアの備忘録的ブログ

WordPressのショートコードAPIが便利すぎる

投稿:2013-07-23 14:43  更新:

WordPress の機能 ショートコード API が便利すぎるのでメモします。

ショートコードは主に投稿記事で何かしらの表示・処理をさせたい場合に使います。

使い道としては [my-info] のようなショートコードを作成して、投稿記事に“内容が変わる可能性がある情報”を表示させるだとか、アフィリエイト広告を表示するコードを作成してバナー張り替えの手間をなくすとか色々あると思います。

今回は意外と面倒くさい href 属性 を勝手に貼ってくれるようなショートコードを書いてみました。

まずはショートコード API の使い方をざっくりと確認してみたいと思います。

WordPressのショートコードAPIを利用する

簡単な使い方は functions.php に処理を書いて、add_shortcode() で登録してあげるとオリジナルのショートコードが投稿記事等で利用できるようになります。

以下で何パターンかサンプルを書いてみました。

文字列を表示するショートコードの例

設定された文字列を表示させるサンプルです。呼び出しは [mystr] といった具合です。

function my_code_str() {
        $str = "<p>WordPressにショートコードを追加する。</p>\n";
        return $str;
}
add_shortcode( 'mystr', 'my_code_str' );

引数をショートコードに渡す場合の例

引数は配列で渡ります。呼び出しは [myarr hoge] のように。

function my_code_arr( $args ) {
        $str = "<p>引数は $args[0] です。</p>\n";
        return $str;
}
add_shortcode( 'myarr', 'my_code_arr' );

プログラム内での利用を考えると連想配列で渡したほうが使い勝手が良いかもです。

function my_code_arr( $args ) {
        $str = "<p>引数は $args[hoge] です。</p>\n";
        return $str;
}
add_shortcode( 'myarr', 'my_code_arr' );

この場合のショートコードは [myarr hoge=”huga”] という感じになります。

範囲内の投稿データをショートコードに渡す場合の例

[shortcode] ? [/shortcode] で囲んだ内容に対して処理を行いたい場合は以下のように。

$content にショートコードで囲んだ範囲内の文字列が入ります。

function my_code_link( $args, $content ) {

        $str = "<a href='$content' title='外部リンク' target='_blank'>$content</a>\n";

        return $str;
}
add_shortcode( 'mylink', 'my_code_link' );

[mylink]http://example.jp/[/mylink] とすると href 属性 が付いた a 要素が返ってきます。

複数のURLに対してhref属性をつけるショートコード

今回の本題です。

1 つの URL に対して href 属性 を付けるだけなら上記サンプルで十分ですが、複数の URL に対して一気に処理しつつ a 要素で囲む文字列はそれぞれ任意のものを設定というのをやってみました。

とりあえずコードはこんな感じです。

function my_code_range( $args, $content ) {

        $pattern = '/(.+)\s(http(|s):\/\/[-_.!~*\'()a-zA-Z0-9;\/?:@&=+$,%#]+)/';
        $replace = '<a href="\2" title="\1" target="_blank">\1</a>';

        $str  = "<blockquote>\n";
        $str .= "参考にしたページ\n";
        $str .= preg_replace( $pattern, $replace, $content );
        $str .= "</blockquote>\n";

        return $str;
}
add_shortcode( 'myrange', 'my_code_range' );

“文字列” + “半角スペース” + “URL” で記述した文字列をショートコードで囲みます。

[myrange]
リンク1 https://worklog.be/
リンク2 http://yahoo.co.jp/
リンク3 http://google.co.jp/
[/myrange]

これが実行されると以下のように表示されます。

参考にしたページ
リンク1
リンク2
リンク3

いつも参考にさせてもらったページの URL を blockquote 要素で囲んで表示させているのですが、一つづつリンク貼ったりするのが若干面倒と思ってたので作ってみました。

WordPress のショートコード API は簡単に使えるし本当に便利です!