WordPressショートコードでいつもの投稿を楽にしよう!

WordPress

WordPressで記事を書いていて、
『毎回この言葉打ってるなぁ』とか『いつもメモ帳から定型文コピペしてるけど面倒くさいなぁ』と感じてませんか?

今回はそんな悩みを解決できる、WordPressのショートコードについて解説していきます。
使い方と、どんな場面で活きてくるのか、紹介します。

目次

ショートコードとは

あらかじめ作っておいた機能を、短いコードで呼び出して使えるWordPressの便利なツールです。
あえて機能と言いましたが、呼び出すものは主に文章です。

ただし、この文章をただ定型文として登録しておくだけではなく、プログラミングで処理をした結果を返せるので便利なのです。

例えば、毎回記事のはじめに言う自己紹介で考えてみましょう。
こんな文章を、投稿画面で打ったとします。

■通常バージョン

「こんにちは」から始まるはじめの文章を毎回打つのって面倒ですよね。
これにショートコードを使うと、このようになります。

■ショートコードバージョン

はじめに言ってた自己紹介が[jikoshoukai]に変わりましたね。
これがショートコードです。

自己紹介文を[jikoshoukai]の位置に挿入してるわけですね。

そして自己紹介文を作ってくれる[jikoshoukai]を、裏であらかじめ定義しておきます。
設定の仕方は次の章へ。

イメージしやすいように補足です。
VBAをやったことある方向けに言うと、カスタム関数と同じようなものですね。
独自の関数を作って、それをセルに適用する。そんなイメージです。

ショートコードの作成方法と使い方

※ここからのカスタマイズ作業を本番環境で行う場合は、念の為バックアップをとってください。また、カスタマイズはテーマを直接変更するのではなく、子テーマを変更することをオススメします

編集するのは「functions.php」というファイルです。
ファイルの場所は、[wp-content/themes/(テーマ名)]の中です。

まずは、このfunctions.phpの一番下に移動して、このようなコードを追加します。

// 自己紹介文
function jikoshoukai_func(){  // ①
    return "こんにちは、うどん野郎です。<br>今日も元気にカレーうどんの汁を白シャツに飛ばして行きます(^o^)";  // ②
  }
add_shortcode('jikoshoukai', 'jikoshoukai_func');  // ③

コードの解説です。
jikoshoukai_func
機能がわかる名前を付けます。複数の単語を繋げたい場合は、この例のようにアンダーバー「_」を使いましょう。ハイフンで区切ると、予期しない動作になる可能性があります。
(リンク先の[概要]参照→  ショートコード API)

return "こんにちは、(略)";
return + "呼び出したい文章" + ;
と書きます。呼び出したい文章をダブルコーテーションで囲うのと、最後にセミコロンをつけるのを忘れずに。
ここを変更すると色んなことができます!
例えば、「カレーうどん」「すだちうどん」「天ぷらうどん」をランダムに表示するなんてこともできます。

もし他の文章と文字が小さかったり、書式が違う場合は、呼び出したい文章を<p>タグで囲ってみてください。

add_shortcode('jikoshoukai', 'jikoshoukai_func');
add_shortcodeのカッコの中に、jikoshoukai と jikoshoukai_func があります。
■jikoshoukai_funcの方は、①と同じものを設定します。
■jikoshoukaiの方は、呼び出し名です。ここに書いた名前を記事投稿ページで書いて呼び出します。
どちらもシングルコーテーションで囲うのを忘れずに。

設定はこれで完了!
記事投稿ページにて、挿入したい場所に[jikoshoukai]と書いておけば、自己紹介文が挿入されます。

こう書いておけば

こう出ます!

応用

少し応用編も紹介しておきます。
「定型文を出すのはいいけど、一部分だけは毎回ちょっと変更したいな」、といった場面があると思います。

例えば、この例で行くと、白シャツ⇒黒シャツ カレーうどん⇒カルボナーラ に変えたいと考えたとします。

そんなとき、わざわざfunctions.phpを修正したり、新しく[jikoshoukai2]を作ったりするのは面倒です。

そこで登場するのが、引数です。
引数とは、プログラムに渡す値のことを言います。
さっき書いたコードに、引数を追加することで、処理をもっと汎用的に使えるようにします。
完成イメージを見るとわかりやすいと思います。

(完成イメージ)
[jikoshoukai food="カルボナーラ" clothes="黒シャツ"]

jikoshoukaiの後に、"黒シャツ"と"カルボナーラ"を渡していますね。これが引数です。

さて、functions.php側のコードはどうするかというと、、引数の追加に合わせてこんな風に変えます。

function jikoshoukai_func($atts){  // ④
	extract(shortcode_atts(array(
		'food'=>"カレーうどん",
		'clothes'=>"白シャツ"
    ),$atts));
    
    return "<p>こんにちは、うどん野郎です。<br>今日も元気に${food}の汁を${clothes}に飛ばして行きます(^o^)<p>";  // ⑤
  }
add_shortcode('jikoshoukai', 'jikoshoukai_func');

色々追加されましたね。
簡単に補足しておくと、

$atts
指定した引数の配列です。
shortcode_atts(array('food'=>"カレーうどん", 'clothes'=>"白シャツ"), $atts)
これで、引数を省略された属性にデフォルト値をセット、そして認識できない属性を除去しています。foodを指定しなかったら"カレーうどん"に、foodでもclothesでもないcolorが指定された除去されるようになっています。
extract
配列から変数を作成します。引数の配列を元に、food と clothesという変数を作っています。


"今日も元気に${food}の汁を${clothes}に飛ばして行きます"
文章の中に④で作った変数の値を展開しています。
"今日も元気に". $food ."の汁を". $clothes ."に飛ばして行きます"
と同じ意味です

実際にやってみます。こう打つと、

こう出ます。

もしこの説明で理解できなければ、各項目を自分なりに変更してみると、わかるようになると思います。
応用に挑戦した時点で一歩踏み出してます!頑張ってください。

ショートコードが活きる場面

ショートコードが活きる場面は、

  • 定型文
  • 総記事数とか最新記事へのリンクとか、開くたびに表示を変えたい部分があるとき
  • 問い合わせフォームなど、複雑なパーツを出力したい時

などですね。

現状特に不満なくブログを投稿している方でも、SEOで成果をだすために内部リンクを貼ったり、効率を考えるようになると、必ずと言っていい程必要になってきます。

私も最初は何も考えずにブログを更新していました。
でも今よりもっとアクセス数を伸ばしたいとか、カスタマイズしてもっと見やすくしたいとか考えたときに必要になってきました。

この記事を見て、もっとブログがよくなりそうだなとか、もっと楽になりそうだなとか思ったら是非やってみてください!

スポンサードリンク

ITリテラシー・プログラミングのまとめ記事