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]'); ?>
デザインを本で学びたい人向けの記事
Wordpress デザイナーの私的メモ帳
設計編
基本
投稿関連
固定ページ関連
カテゴリー関連
タクソノミー、ターム関連
テンプレート作成
- category.php カテゴリー専用テンプレートを作る
- archive.php カスタム投稿タイプ専用テンプレートを作る
- taxonomy.php カスタムタクソノミー、タームページを作る
- get_template_part() 外部ファイル・テンプレートを読み込む