プログラミング

wordpressのショートコードの使い方入門編【5分で解説】

こんにちは、フリーでweb制作を行なっているしょーごです。

今回はwordpressでよく使われるショートコードを紹介しようと思います。

田所くん
田所くん
ショートコード!?あれって関数みたいなやつでしょ?難しそう…
遠野さん
遠野さん
使えなくても困らないんじゃないの?
しょーご
しょーご
いや、使えると色々便利だよ!めんどくさい入力が簡単になるからぜひ使って欲しい!

本記事ではfunctions.phpをいじっていきます。記述をミスるとホームページが真っ白になるので、直接”テーマを編集”から記述を加える際は自己責任でお願いします。

お試しはローカル環境で!

記事の最初の挨拶をショートコード化

物は試し、簡単な実例を早速見ていきましょう。

ショートコードとは、頻出の長ったらしい記述を短いコードで表示するものです。

記事の最初に毎回、『こんにちは、〜の〜です』と名乗りますが、めんどくさいのでショートコードで簡単に表示できるようにしましょう。

基本はphpの関数の書き方と一緒です。

//functions.phpに記載
function hello_func() {
return"こんにちは、フリーでweb制作を行なっているしょーご(<a href="https://twitter.com/samuraibrass?lang=ja">@samuraibrass</a>)です。";
}
add_shortcode('hello', 'hello_func');

これで[hello]というショートコードが使えるようになりました。

一応簡単に説明すると、まずfunction〜で関数名を自由に命名します。

return内に実行したい処理を記述し、最後のadd_shortcode関数で実際に打つショートコード名(今回はhello)を定義しました。

投稿画面で本文に[hello]と入力してみます。


表示してみます。

Twitterへのリンクも合わせて表示されてます。

田所くん
田所くん
挨拶は毎回書く定型文&頻出文だし、良さげっすね!
遠野さん
遠野さん
毎回Twitterリンク貼るのめんどくさかったからいいかも
しょーご
しょーご
次はクライアントワークに使える例を紹介するよ!

ボックスをショートコード化

次にボックスをショートコードで手軽に設置できるようにします。

目標制作物はこちらです。

有料テーマを使われているかたは当たり前のように多様なボックスを使われていますが、

一からオリジナルテーマを作る場合は自分でショートコードを定義しないといけません。

クライアントがHTML,CSSを使って実装することは大きな負担になるので、最低限は自分で実装できるようにしておきましょう。

//functions.php(ボックスを装飾)
function box_func( $atts, $content = null ) {
return '<div class="red-box">' . $content . '</div>';}
add_shortcode('red-box', 'box_func');
/*css*/
.red-box{
    background: #ffdddd;
    border: 1px solid #d25555;
    padding: 20px;
}

定義したショートコード名は[red-box]です。

一気に複雑になった感じがしますが、$contentが投稿画面で入力される[red-box]と[/red-box]の間に入力される文を出力します。

returnでボックスを表現するためのdivタグを出力し、class名にもred-boxと名付けました。

あとはclass名red-boxに適用するcssも入力すれば完成です。

それでは実際にショートコード、[red-box]を入力していきます。

ボックスのように、投稿画面から中に内容を記述する場合、以下のように『囲み型』で記述します。

先ほどの[hello]は単独で使用できたため、『自己完結型』と呼ばれます。

これでボックスが表示されます。

田所くん
田所くん
わかったようでわからないような…
遠野さん
遠野さん
テーマ作成者ってすごかったんだね
しょーご
しょーご
最後はテンプレートタグにもショートコード適用しちゃうよ!

テンプレートタグをショートコードでわかりやすく

みなさんwordpressでテンプレートタグを使って画像を表示する際、imgタグに毎回『<?php echo get_template_directory_uri(); ?>』って入力してませんか?

//index.phpなど
<img src="<?php echo get_template_directory_uri(); ?>/img/~.png"/>

ちょっと長すぎるので、ショートコードで短くしちゃいましょう。

まずはfunctions.phpです。

//get_template_directory_url()をimg_urlに置換え
function dir_url() {
	echo get_template_directory_url();
}
add_shortcode('img_url', 'dir_url');

これでショートコード定義完了です。

img_urlでget_template_directory_url()をecho(出力)するという処理です。

ただしこのショートコードはこれまでと違い、投稿画面で入力するものではなくfront-page.phpやindex.phpなどテンプレートファイルで使うものです。

この場合はもう一手間かかります。

//テンプレートファイル
<img src="<?php do_shortcode('[img_url]'); ?>/img/~.png"/>

使用したい任意の場所でdo_shortcode関数で定義したショートコードを呼び出せば大丈夫です。

田所くん
田所くん
<?php echo get_template_directory_uri(); ?>ぐらいチートシートでコピペして使ってるし、こっちの方が手間そうで草
遠野さん
遠野さん
確かに微妙かも…
しょーご
しょーご
初歩の初歩だからね、頻出で長ったらしいコードほど、ショートコード化する意義が生まれるよ。関数と一緒だね。
しょーご
しょーご
あとショートコードで実装していくと、デザインに変更を加えたくなった時に、ショートコード内の処理を書き換えるだけでいいから、保守が楽だね。ちなみに僕らも実はショートコードだから(吹き出し)
遠野さん
遠野さん
田所くん
田所くん
しょーご
しょーご
遠野さんしっかり!田所くんは転生しようとしないで

ショートコードで効率化していこう

今回は初歩の初歩です

吹き出しなどはすでにプラグインがありますし、ショートコードを定義するのはなかなか大変なので割愛させていただきますが、とはいえ使えるようになると便利です。

wordpressの修正案件の中にはショートコード化なんかもあったりするんですね。

そういった時にパパっと実装できるといいです。

何よりプログラミングをしている感じがしてとても楽しいので、みなさんも是非挑戦してみましょう!

それでは、快適なショートコードライフを。