こんにちは、フリーで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へのリンクも合わせて表示されてます。
ボックスをショートコード化
次にボックスをショートコードで手軽に設置できるようにします。
目標制作物はこちらです。
有料テーマを使われているかたは当たり前のように多様なボックスを使われていますが、
一からオリジナルテーマを作る場合は自分でショートコードを定義しないといけません。
クライアントが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関数で定義したショートコードを呼び出せば大丈夫です。
ショートコードで効率化していこう
今回は初歩の初歩です
吹き出しなどはすでにプラグインがありますし、ショートコードを定義するのはなかなか大変なので割愛させていただきますが、とはいえ使えるようになると便利です。
wordpressの修正案件の中にはショートコード化なんかもあったりするんですね。
そういった時にパパっと実装できるといいです。
何よりプログラミングをしている感じがしてとても楽しいので、みなさんも是非挑戦してみましょう！
それでは、快適なショートコードライフを。
ご寄付を頂けると今後の更新の励みになります！
