WordPressでショートコードを作る方法【自己完結型・囲み型】

こんにちは。

ゆうや（@yuyaphotograph）です！

本記事では、WordPressでショートコードを作る方法を紹介します。

「ショートコードを自作してみたい！」

「SANGOテーマでh2を使う時は毎回決まった見出しスタイルを使っているからショートコードで管理したい！」

という方向けです。

それでは見て参りましょう！

WordPressでショートコードを作れるようになろう！
- ショートコード作成の基本
- 囲み型のショートコードの作成方法
まとめ

WordPressでショートコードを作れるようになろう！

ショートコード作成の基本

まずは基本的なショートコードの作り方です。

「任意の文言を表示させる」、ただそれだけのショートコードです笑

functions.php

//「最後まで読んでいただきありがとうございました！」と出力
function ①関数名() {
    return "最後まで読んでいただきありがとうございました！";
}
add_shortcode('②ショートコード名', '①');

↓↓↓ 関数名とショートコード名を入れてみるとこんな感じになります。

functions.php

function thanks_func() {
    return "最後まで読んでいただきありがとうございました！";
}
add_shortcode('thanks', 'thanks_func');

あとは記事の編集画面のビジュアルエディタに[thanks]という感じで設定したショートコード名を[]（ブラケット）で囲んで書いてあげれば表示されます。

ブログの記事では最初の挨拶や締めの言葉ってだいたい同じものを使いますよね。

「同じ文言を毎回毎回入力するのは時間の無駄だな〜」と思う人には上記の基本的なショートコードでも劇的に効率アップにつながりそうですね！

囲み型のショートコードの作成方法

上記で紹介した形のショートコードのことを自己完結型と呼ぶそうで、一方で「ショートコードで囲った文字に何かしらの装飾を施したい」という場合に活躍するのが次に紹介する囲み型のショートコードです。

先ほどのコードとほんの少し変わりますが全然難しくないので安心してください笑

functions.php


function ①関数名( $atts, $content = null ) {
    return '<タグ>' . $content . '</閉じタグ>';
}
add_shortcode('②ショートコード名', '①');

$contentにはショートコードで囲うテキストが入ります。

任意のタグでテキストを囲いたいので、$contentの前後に結合演算子の.を使ってやります。

試しにSANGOテーマで僕がよく使っている、

スタイル > 見出し34 肉球
見出し２（h2）

の２つの装飾をショートコードで再現できるようにしてみます。

以下のようにfunctions.phpに記述してやればうまくいきます。

functions.php

// 見出しスタイル 34 肉球かつh2タグの装飾をテキストに施す
function headline34( $atts, $content = null ) {
    return '<h2 class="hh hh34">' . $content . '</h2>';
}
add_shortcode('headline', 'headline34');

それを書いたらいちいち[headline][/headline]と入力するのはダルいので、「AddQuicktag」にショートコードを登録していつでもワンクリックではきだせるようにするとこまでやれば完了です！(^o^)

まとめ

以上、WordPressでショートコードを作る方法をご紹介しました。

常に作業を楽にする方法を考えてどんどん無駄なタイピングは効率化していきましょ。

最後までご高覧いただきありがとうございました！