WordPressの投稿内でよく使う文章やHTMLはショートコードを作っておくと便利です。
ショートコードで出来ることを簡単に説明すると、例えば[greeting]というショートコードタグを投稿内容に書くだけで
【こんにちは！いつもブログを読んでいただきありがとうございます。シンス株式会社代表の越水です。】
という挨拶文を記事中に表示させる、ということができるようになります。
今回はそんな便利なWordPressのショートコードを作る方法をご紹介します。
ショートコードはfunctions.phpに設定を書けばOK
単純に決まったテキストやHTMLを表示させるだけであれば、以下のコードを参考にfunctions.phpにショートコードの設定を書いてあげればOKです。
|
1 2 3 4 |
function greeting_txt() { return '<span class="hoge">こんにちは！いつもブログを読んでいただきありがとうございます。</span>'; } add_shortcode('greeting', 'greeting_txt'); |
このコードであればショートコード[greeting]を使用することでgreeting_txt関数が呼び出されて設定したHTMLが表示されるようになります。
このようにWordPressのショートコード機能はとっても簡単に利用することができます！
オリジナルショートコードにクラスなど属性を加えたい時
ショートコードの機能が使いこなせてくると、だんだん「後からクラスが加えられたらいいのにな」とか「ショートコード内のリンクを後から書き換えたい」とカスタマイズしたくなってきます。
そんな時は次のようにショートコードのつくると便利です。
|
1 2 3 4 5 6 7 8 |
function btn_link( $atts, $content = null ) { extract( shortcode_atts( array( 'class' => '', 'href' => '', ), $atts ) ); return '<div class="color-blue ' . $class. '"><a href="'.$href.'">' . $content . '</a></div>'; } add_shortcode('btn', 'btn_link'); |
これでクラス名やリンクを後から書き換え可能なショートコードが作れます。例えば、
[btn class=long href=https://since-inc.jp/]シンス株式会社[/btn]
という引数を持ったようなショートコードを書くことで、
|
1 |
<div class="color-blue long"><a href="https://since-inc.jp/">シンス株式会社</a></div> |
というHTMLを出力させることができます。
先に示したコードにあるshortcode_atts()内の配列で初期値を設定しておけば、ショートコードで引数を渡さなくてもあらかじめ決まった値を設定することが可能です。
ショートコード機能は使いこなせるようになると、WordPressカスタマイズの幅がグッと広がるので試してみてください。
それではまた！
PCもスマホもタブレットも。様々なデバイスに最適化したホームページ制作をいたします。
