サイト制作や運営をしていると住所や問い合わせ先など同じ内容を何度も入力したり、アドセンスのコードを決まった場所に入れたりという場面に遭遇します。
その度に毎回入力していたのでは効率が悪いですよね。
WordPressにはそういった場合に作業効率をアップさせる「ショートコード」と呼ばれる機能があります。
今回は実際の現場で使えるショートコードの作り方と設置方法を紹介します。
CONTENTS
ショートコードの基本的な作り方と使い方
function.phpにショートコードを記述する
具体的な記述に関しては後ほど紹介しますが、まずは基本的な部分。
新しくショートコードを作る場合はfunction.phpに記述をしていきます。
function.php
function 関数名() {
return '表示する内容が入ります';
}
add_shortcode('ショートコード名', '関数名');【関数名】と【ショートコード名】は任意の名前（半角英数字）でOK。
ただし、【関数名】と【ショートコード名】は別の名前にする必要があります。
投稿ページや固定ページ内で使う場合
[ショートコード名]本文内に上記の記述をすればショートコードの内容が出力されます。
※ショートコードを記述する場合はビジュアルモードでも自分の環境では問題なく使えましたが、テキストとして認識される場合もあるようですので「テキストモード」で作業を行った方が無難です。
テンプレートでショートコードを使う場合
ショートコードは基本的にPHPが使用できない投稿・固定ページに記述します。
ただ、ある程度コーディングが出来る人であればショートコードをテンプレートの方に使いたい場合も多くあると思います。
そんな場合はテンプレート内でこのように記述します。
<?php echo do_shortcode('[ショートコード名]'); ?>自作のショートコードだけでなく、プラグインのショートコードを使う場合によくこの記述をします。
例えば「MW WP Form」で作成したフォームをテンプレートで出力させる場合だとこのようになります。
<?php echo do_shortcode(''); ?>ウィジェット（テキスト）でショートコードを使う場合
固定ページや投稿ページと同じように記述しても、そのままではウィジェットに反映されません。
ウィジェット（テキスト）でショートコードを使う場合はfunction.phpに以下のコードを記述します。
add_filter('widget_text', 'do_shortcode' );ここまでは基本的なショートコードの使い方です。
ここからは具体的な例を踏まえてウィジェットの作り方を紹介していきます。
ショートコード作成例
住所や問い合わせ先など定型文を表示する
記事の最後に住所や問い合わせ先などを載せたい場合に便利なショートコードです。
まずfunction.phpにショートコードを作成します。
function shortcode_address() {
return '〒100-0001 東京都千代田区・・・';
}
add_shortcode('address', 'shortcode_address');このショートコードを使用すると以下のようになります。
//記述するショートコード
[address]
//出力結果
〒100-0001 東京都千代田区・・・これでもいいんですがCSSで見た目を整えたりする場合はタグで囲ってクラスをつけたいですよね。
その場合はこのようにfunction.phpに記述します。
function shortcode_address() {
return '<p class="address">〒100-0001 東京都千代田区・・・<br>hogeビル</p>';
}
add_shortcode('address', 'shortcode_address');このショートコードを使うとこうなります。
//記述するショートコード
[address]
//出力結果
<p class="address">〒100-0001 東京都千代田区・・・<br>hogeビル</p>きちんとタグとクラスが出力されてますね。<br>タグを使った改行も可能です。
例えば今回のように住所をショートコードを使って出力していた場合、住所変更があってもfunction.phpの記述を変更するだけで同じ箇所をまとめて変更可能です。
サイトurl（トップページ）のパスを取得する
内部リンクへのurlを短く記述したい場合などに使います。
http://…とコピペでもいいのですがメンテナンス性を考慮するとショートコードを使った方が早くて簡単かと思います。
funtion.phpに以下を記述
function shortcode_home() {
return home_url( '/' );
}
add_shortcode('home', 'shortcode_home');このブログの場合はこうなります。
//記述するショートコード
[home]/hoge/
//出力結果
https://oku-log.com/hoge/テーマフォルダのパスを取得する
例えばテーマフォルダに格納されている画像へのパスを記述しようとするとサイトurlよりもさらに長くなり、可読性も下がります。
そんな時はfunction.phpにこの記述。
function shortcode_templateurl() {
return get_bloginfo('template_url');
}
add_shortcode('template_url', 'shortcode_templateurl');出力例はこちら。
//記述するショートコード
[template_url]/image/hoge.jpg
//出力結果
サイトurl/wp-content/themes/テーマ名/image/hoge.jpgメディアではなくてテーマフォルダにFTPで直接アップした画像なんかを取得する際に便利です。
文章を特定のタグで囲む
特定の部分をcssなどを反映させるために特定のタグで囲いたい場合があると思います。
<div class="red">内容が入ります</div>このように直接投稿内にタグを記述してもいいのですが、クラス名が複数あったり長かった場合は面倒ですね。
そんな時はfunction.phpにこの記述。
function shortcode_red($atts, $content = null) {
return '<div class="red">' . $content . '</div>';
}
add_shortcode('red', 'shortcode_red');反映するとこのようになります。
//記述するショートコード
[red]内容が入ります[/red]
//出力結果
<div class="red">内容が入ります</div>属性を追加して商品の値段に消費税を足した合計金額を表示する
金額を表記するときに毎度計算するのは辛いのでショートコードを使って自動で金額を算出できるようにします。
今までのものより若干複雑になりますが、まずはこちらをfunction.phpに。
function including_tax($attr) {
$price = floor($attr[0]*1.08);
return '<div class="price">' . $price . '円<span class="textSmall">（税込）</span></div>';
}
add_shortcode('price', 'including_tax');簡単に説明しますとショートコードに入力した金額に消費税（1.08）を掛けて合計金額を出します。
※php関数の「floor」で小数点以下を切り捨てています。
そしてその金額をpriceというクラスがついたdivタグで囲み、さらに円（税込）という表記も自動で出力させます。
実行結果はこのようになります。
//記述するショートコード （金額を指定しなかった場合）
[price]
//出力結果
<div class="price">0円<span class="textSmall">（税込）</span></div>
//記述するショートコード（端数の出ない金額を入れた場合）
[price 1000]
//出力結果
<div class="price">1080円<span class="textSmall">（税込）</span></div>
//記述するショートコード（端数が出る場合は端数を切り捨て）
[price 1111]
//出力結果
<div class="price">1199円<span class="textSmall">（税込）</span></div>まとめ
いかがでしたでしょうか。今回は実際に使えそうなショートコードを紹介してみました。
これを応用してご自身の用途にあったショートコードを作成してみてはいかがでしょうか。
