WordPress

WordPressでのショートコードの作り方と使い方【まとめ】

2017/11/17

サイト制作や運営をしていると住所や問い合わせ先など同じ内容を何度も入力したり、アドセンスのコードを決まった場所に入れたりという場面に遭遇します。
その度に毎回入力していたのでは効率が悪いですよね。

WordPressにはそういった場合に作業効率をアップさせる「ショートコード」と呼ばれる機能があります。

今回は実際の現場で使えるショートコードの作り方と設置方法を紹介します。

ショートコードの基本的な作り方と使い方

function.phpにショートコードを記述する

具体的な記述に関しては後ほど紹介しますが、まずは基本的な部分。
新しくショートコードを作る場合はfunction.phpに記述をしていきます。

function.php

【関数名】と【ショートコード名】は任意の名前(半角英数字)でOK。
ただし、【関数名】と【ショートコード名】は別の名前にする必要があります。

投稿ページや固定ページ内で使う場合

本文内に上記の記述をすればショートコードの内容が出力されます。
※ショートコードを記述する場合はビジュアルモードでも自分の環境では問題なく使えましたが、テキストとして認識される場合もあるようですので「テキストモード」で作業を行った方が無難です。

テンプレートでショートコードを使う場合

ショートコードは基本的にPHPが使用できない投稿・固定ページに記述します。
ただ、ある程度コーディングが出来る人であればショートコードをテンプレートの方に使いたい場合も多くあると思います。
そんな場合はテンプレート内でこのように記述します。

自作のショートコードだけでなく、プラグインのショートコードを使う場合によくこの記述をします。
例えば「MW WP Form」で作成したフォームをテンプレートで出力させる場合だとこのようになります。

ウィジェット(テキスト)でショートコードを使う場合

固定ページや投稿ページと同じように記述しても、そのままではウィジェットに反映されません。
ウィジェット(テキスト)でショートコードを使う場合はfunction.phpに以下のコードを記述します。

ここまでは基本的なショートコードの使い方です。
ここからは具体的な例を踏まえてウィジェットの作り方を紹介していきます。

ショートコード作成例

住所や問い合わせ先など定型文を表示する

記事の最後に住所や問い合わせ先などを載せたい場合に便利なショートコードです。
まずfunction.phpにショートコードを作成します。

このショートコードを使用すると以下のようになります。

これでもいいんですがCSSで見た目を整えたりする場合はタグで囲ってクラスをつけたいですよね。
その場合はこのようにfunction.phpに記述します。

このショートコードを使うとこうなります。

きちんとタグとクラスが出力されてますね。<br>タグを使った改行も可能です。
例えば今回のように住所をショートコードを使って出力していた場合、住所変更があってもfunction.phpの記述を変更するだけで同じ箇所をまとめて変更可能です。

サイトurl(トップページ)のパスを取得する

内部リンクへのurlを短く記述したい場合などに使います。
http://…とコピペでもいいのですがメンテナンス性を考慮するとショートコードを使った方が早くて簡単かと思います。

funtion.phpに以下を記述

このブログの場合はこうなります。

テーマフォルダのパスを取得する

例えばテーマフォルダに格納されている画像へのパスを記述しようとするとサイトurlよりもさらに長くなり、可読性も下がります。
そんな時はfunction.phpにこの記述。

出力例はこちら。

メディアではなくてテーマフォルダにFTPで直接アップした画像なんかを取得する際に便利です。

文章を特定のタグで囲む

特定の部分をcssなどを反映させるために特定のタグで囲いたい場合があると思います。

このように直接投稿内にタグを記述してもいいのですが、クラス名が複数あったり長かった場合は面倒ですね。
そんな時はfunction.phpにこの記述。

反映するとこのようになります。

属性を追加して商品の値段に消費税を足した合計金額を表示する

金額を表記するときに毎度計算するのは辛いのでショートコードを使って自動で金額を算出できるようにします。
今までのものより若干複雑になりますが、まずはこちらをfunction.phpに。

簡単に説明しますとショートコードに入力した金額に消費税(1.08)を掛けて合計金額を出します。
※php関数の「floor」で小数点以下を切り捨てています。
そしてその金額をpriceというクラスがついたdivタグで囲み、さらに円(税込)という表記も自動で出力させます。

実行結果はこのようになります。

まとめ

いかがでしたでしょうか。今回は実際に使えそうなショートコードを紹介してみました。
これを応用してご自身の用途にあったショートコードを作成してみてはいかがでしょうか。

SPONSORED LINK

シェアはこちらから

関連記事