まとめ：WordPress に標準登録されている 4 つのショートコード

• By attosoft
• Posted in WordPress
• On June 4, 2010
• 2 Comments.

WordPress には標準で使用可能なショートコードがいくつか登録されていますが、そのタグ一覧や使い方を説明した資料はあまり見かけません。

たとえば WordPress の公式オンラインマニュアル (ドキュメント) である WordPress Codex では、ショートコード API を使用してカスタムショートコードを作成する方法については説明されていますが、WordPress に標準登録されているショートコードについてはあまり触れられていません。その他の Web サイトなどでもだいたい同じような状況です。

ショートコードのメインはカスタムショートコードの作成であって、標準登録されているショートコードに有用なものは少ないですが、自分用のメモも兼ねて WordPress に標準登録されているショートコードをまとめてみました。

ショートコード一覧

WordPress 2.9 以降 (2.9 – 3.1) に標準で登録されているショートコードの一覧は次のとおり。

• Caption ショートコード
• wp_caption ショートコード
• Gallery ショートコード
• embed ショートコード

※ 上記のショートコードの実装は wp-includesmedia.php にある。なおショートコード (タグ) は add_shortcode 関数によって登録される。

※ カスタムショートコードを作成するためのサンプルとして、wp-includesshortcodes.php に footag, bartag, baztag ショートコードの (コメントアウトされた) 実装がある。

Caption ショートコード

キャプションを設定するショートコード。投稿編集エリアで画像をキャプション付きで挿入すると自動的に記述される。

記述例

[caption caption="My Caption" width="100"] ... [/caption]

※ Caption ショートコードでは id, align, width, caption 属性がサポートされる。align 属性は配置方法を表し、alignnone (なし), alignleft (左), aligncenter (中央), alignright (右) のいずれかを指定する。align 属性を省略した場合は alignnone が指定されたとみなされる。

生成されるコード

<div class="wp-caption alignnone" style="width: 100px">
    ...
    <p class="wp-caption-text">My Caption</p>
</div>

使用例

wp_caption ショートコード

Caption ショートコードと同じ処理を行うショートコード。おそらく caption タグが上書き登録された場合を想定して、別名タグが登録されているものと思われる。

記述例

[wp_caption caption="My Caption" width="100"] ... [/wp_caption]

※ wp_caption ショートコードでサポートされる属性は Caption ショートコードと同じく id, align, width, caption 属性の 4 つ。

生成されるコード

<div class="wp-caption alignnone" style="width: 100px">
    ...
    <p class="wp-caption-text">My Caption</p>
</div>

※ Caption ショートコードの場合と全く同じコードが生成される。

使用例

Gallery ショートコード

投稿に添付されている画像を一覧表示するショートコード。デフォルトでは 3 列のサムネイル画像が表示される。

記述例

[gallery]

[gallery columns="4" size="medium"]

※ Gallery ショートコードでは id, columns, size 属性などがサポートされる。詳しくはギャラリーショートコードの使い方 – 設定を参照。

生成されるコード (抜粋)

<style type='text/css'>
    #gallery-id {
        margin: auto;
    }
</style>

<!-- see gallery_shortcode() in wp-includes/media.php -->
<div id='gallery-id' class='gallery galleryid-1234'>
    <dl class='gallery-item'>
        <dt class='gallery-icon'>
            <a href="attachment-url" title="foo">
                <img src="image-url"
                    class="attachment-thumbnail"
                    alt="bar" title="baz" />
            </a>
        </dt>
        <dd class='gallery-caption'>My Caption</dd>
    </dl>
    
    <br style="clear: both" />
</div>

使用例

embed ショートコード

動画や画像などのメディアを URL 指定で記事に埋め込むショートコード。YouTube や Flickr などのコンテンツを簡単に埋め込むことができる。

※ メディア埋め込み機能を利用可能な Web サイトの一覧については Embeds – このメディア埋め込み機能を使えるサイトは？ (WordPress Codex) を参照。

記述例

[embed]URL[/embed]

※ embed ショートコードでは width, height 属性がサポートされる。詳しくは embed ショートコードのオプションを参照。

※ 自動埋め込み (管理パネル – 設定 – メディア設定 – 埋め込み) が有効な場合は [embed] タグの記述を省略できる。独立した行に URL のみ (リンクは設定しない) を記述すると自動的に埋め込まれる。

生成されるコードの例

<object width="450" height="250">
    <param name="foo" value="bar"></param>
    <embed src="media-url" type="baz"
        width="450" height="250"></embed>
</object>

使用例

関連リンク

• ショートコード API – WordPress Codex 日本語版
• WordPress: 抜粋時は内容を出力しない single ショートコード
• ASCII.jp：面倒な処理を1行に！WordPressのショートコードAPI
• WordPressのショートコードをマスターするチュートリアル | コリス