WordPressのショートコードって便利ですよね。
最近ショートコードで集中して勉強する必要があったので、忘れないように忘備録として残します。
ここ記事では
- 自己完結型
- 囲み型
- 属性追加
の3つのテクニックをプラグイン無しで使用できるようにまとめてあります。
なので、超簡単にコピペで使えるって内容にまとめてありますので、めちゃくちゃ初心者向けですｗ
Contents
自己完結型
WordPressの投稿画面で[obake]と入力するだけで
↓↓↓出力↓↓↓
おばけはかっこいい！
と表示される様に設定してみます。
以下のコードを「function.php」の最下に追加します。
function obake_func() {
return "おばけはかっこいい！";
}
add_shortcode('obake', 'obake_func');
【記事内に入力するショートコード】
[obake]
【出力】
おばけはかっこいい！
はい、簡単ですね。
コピで使うとなると
obake→設定したいショートコード名に差し替える
obake_func→適当な関数名
に差し替えてください。
returnの部分でダブルクォーテーションの中に出力したいものを入力してください。
囲み型
次は囲み型です。
囲み型は要素をショートコードで囲みます。
例としてWordPressの投稿画面に入力してみると
[obake]おばけ[/obake]
↓↓↓出力↓↓↓
お前んちおばけやしき
あら、おばけとしか入力してないのに「お前んちおばけやしき」と悪口に変わりましたね。
これが囲み型の特徴で「お前んち」と「やしき」はショートコードで包むように設定してあるからです。
実際にこれをコードにすると
function obake_func( $atts, $content = null ) {
return "お前んち{$content}やしき";
}
add_shortcode('obake', 'obake_func');といった所になります。
1行目で囲み型にする命令を書いてあります。
囲み型にする時は{$content}が必須で、ここが投稿画面のショートコードで囲った中身が表示されます。
「$content」の周りを「お前んち」「やしき」で囲むことで
「お前んちおばけやしき」と出力されます。
ダブルクォーテーション「””」で要素を囲むと文字列として処理されます。
でも「$content」は文字列ではなく変数ですよね？文字列として処理されては困ります。
そこで{}で囲んで{$content}と言う形にすると変数展開されて使用できます。
属性を入力できるようにする
属性を入力できるようにすると使い勝手が向上します。
どういうことかと言うと
例としてWordPressの投稿画面に入力してみると以下のような事ができます。
[obake src=”obake.jpg” name=”おばけ”]おばけの参上だ！[/obake]
↓↓↓出力されるコード↓↓↓
<div>＜img src=”obake.jpg” name=”おばけ”>おばけの参上だ</div>
実際にこれをコードとして書くと
function obake_func( $atts, $content = null ) {
extract( shortcode_atts( array(
'src' => '',
'name' => '',
), $atts ) );
return "<div><img src='{$src}' name='{$name}'>{$content}</div>";
}
add_shortcode('obake', 'obake_func');
少しややこしくなりましたね！
3行目と4行目は属性を定義しています。（src属性とname属性）
もっと属性が必要であれば行ごとコピーして増やしてください。
逆に1つでいいなら行ごと消してください。
returnに関しては先程と同様にダブルクォーテーションを使って全てを梱包します。
$srcと$nameの部分については文字列ではないので先程の$contentsと同様に{}で囲みます。
{$src}と{$name}になります。
こうする事によって投稿ページに
[obake src=”obake.jpg” name=”おばけ”]おばけの参上だ！[/obake]
と入力すればユーザー側でもsrc属性とname属性を好きに入力できるようになります。
属性も使えれば応用が聞いていろいろな事ができます。
めっちゃ便利ですのでお試しください。
