WordPress ショートコードを追加する

ショートコードは複数行に書かれた処理をまとめた短いコードのこと。頻繁に使うコードやタグ、単語などを短い少しのコードにすることができます。長くなる文字を何度も書く必要がなくなるといったメリットがあります。設定はfunctions.phpですることができます。追加する方法と呼び出し方を紹介します。

単体系

<img>タグのようにタグ、文字列などをそのまま表示するタイプのショートコード。終了タグがあります。

ショートコード


[box]

functions.php

function add_sc_box() {
    $tag = '<div></div>';
    return $tag;
}
add_shortcode('box', 'add_sc_box');

パラメータ、属性を付与する

idclassといった独自に属性を追加できるタイプのショートコード。
属性名は自分の好きなものを設定できます。

ショートコード


[box id="box1" class="large border"]

functions.php

function add_sc_box( $atts ) {
    extract(shortcode_atts(array(
        'id' => "",
        'class' => "",
    ), $atts));

    $tag = '<div id="'.$id.'" class="'.$class.'"></div>';
    return $tag;
}
add_shortcode('box', 'add_sc_box');

コンテンツを包括する

<div></div>のように囲んだテキストを包括して出力するタイプのショートコード。

ショートコード


[box]ショートコードを表示[/box]

functions.php

function add_sc_box( $atts, $content ) {
    extract(shortcode_atts(array(
        'id' => "",
        'class' => "",
    ), $atts));

    $id = $atts['id'];
    $class = $atts['class'];

    $tag = '<div id="'.$id.'" class="'.$class.'">'.$content.'</div>';
    return $tag;
}
add_shortcode('box', 'add_sc_box');

コンテンツを包括する(タグを入れ子にする)

コンテンツを包括するショートコードを入れ子にするためのショートコードです。

ショートコード


[box][inner]ショートコードを表示[/inner][/box]

functions.php

function add_sc_box( $atts, $content ) {
    extract(shortcode_atts(array(
        'id' => "",
        'class' => "",
    ), $atts));

    $id = $atts['id'];
    $class = $atts['class'];

    $tag = '<div id="'.$id.'" class="'.$class.'">'.do_shortcode($content).'</div>';
    return $tag;
}
add_shortcode('box', 'add_sc_box');

phpで追加したショートコードの呼び出す

do_shortcode()で呼び出すことができます。

<?php echo do_shortcode('box]'); ?>

Wodpress デザイナーの私的メモ帳

条件分岐

投稿関連

固定ページ関連

カテゴリー関連

タクソノミー、ターム関連

プラグイン

その他

MW WP Form

  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいデザイナーです。 趣味でアプリ開発(ペア、デザイン担当)やNuxt.jsやらをいじってますが、やばいな~と感じつつネットの波に取り残されないようにワカッタこと、キヅイタことをカキカキします。