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

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

設計編

基本

投稿関連

固定ページ関連

カテゴリー関連

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

テンプレート作成

Advance Custom Fieldの使い方

プラグイン

その他

MW WP Form

Contact Form 7

事例

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

プロフィール

kura

個人開発歴5年以上。サイト開発・運営。 ペアでエンジニアとアプリ開発しています。

このサイトではWEBデザイン初心者向けになるべく分かりやすいように解説したり、WEBデザインの便利ツール紹介、開発したりしています。

note