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

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

    WordPress ショートコード

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

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

    ショートコード一覧

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

    ※ 上記のショートコードの実装は 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 ショートコードの場合と全く同じコードが生成される。

    使用例

    KEEP THIS PLANET CLEAN

    KEEP THIS PLANET CLEAN


    透明な地球

    透明な地球

    投稿に添付されている画像を一覧表示するショートコード。デフォルトでは 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 指定で記事に埋め込むショートコード。YouTubeFlickr などのコンテンツを簡単に埋め込むことができる。

    ※ メディア埋め込み機能を利用可能な 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>
    
    使用例

    関連リンク

    Post Tagged with ,

2 Responsesso far.

  1. […] まとめ:WordPress に標準登録されている 4 つのショートコード ? attosoft.info Blog、はじめから組込で入っているものがあるのですね。 […]

  2. […] WordPress に標準登録されている 4 つのショートコード […]

コメントを残す

メールアドレスが公開されることはありません。