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

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

単体系

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

ショートコード

[box]

functions.php

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

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

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

ショートコード

[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]'); ?>

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選