WordPress用『ショートコード』の作り方と使用例【ブロガー向け】

この記事では、WordPress用ショートコードの作り方について解説しています、「記事中でよく使う〇〇をショートコードで簡略化させたい」という方は是非どうぞ。

WordPress用『ショートコード』の作り方

完成イメージ紹介

上記が完成イメージとなります、エディタ内にショートコードを設置するとあらかじめ設定してあるテキストが表示されるといった感じのベタなやつです。

使用頻度の高いテキストやパターン化されたものはショートコードでまとめておくと、記事を書く時の時短にもなりますし、内容修正時にはショートコードを調整するだけなので、メンテナンスも楽になるメリットがあります。

実装手順について【2ステップでOK】

1. テンプレートコードをコピペ
2. 表示させたい値（テキスト等）を設定

ショートコード化と言っても難しい事は一切なく、2ステップで簡単に実装することができます、こちらで用意したコードを指定の場所にコピペして、表示させたいテキストに変更すれば完成です。

①：テンプレートコードをコピペ

下記コードを使用テーマの中にある[functions.php]の一番下にコピペしてください。

※リスク回避のためテーマは必ず子テーマを使用しましょう、何かあっても責任は一切負いません、言ったかんな（脅し）

// オリジナルショートコード
function tmt_short_code() {
return <<< EOF
ショートコード化に成功しました！！
EOF;
}
add_shortcode('mycode', 'tmt_short_code');

管理画面「外観 > テーマエディター（テーマの編集）」で編集する方のためにスクショも載せておきます（下）

②：表示させたい値（テキスト等）を設定

// オリジナルショートコード
function tmt_short_code() {
return <<< EOF
ショートコード化に成功しました！！
改行OK！！
<p>タグを入れても大丈夫、自由にカスタマイズしよう！</p>
EOF;
}
add_shortcode('mycode', 'tmt_short_code');

最後にショートコードで表示させたいテキストやタグを設定すれば完了です、お疲れさまでした。

ショートコードの使用例【ブロガー向け】

今回紹介したショートコードは実際にどのように使えばいいのか、ブロガー向けではありますが使用例をいくつか紹介しておきたいと思います。

• アドセンスコードの埋め込み
• CTAの設置・定型文のパッケージ化
• アフィリエイトリンクの設置

アドセンスコードの埋め込み

// オリジナルショートコード
function tmt_short_code() {
return <<< EOF
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
   style="display:block; text-align:center;"
   data-ad-layout="in-article"
   data-ad-format="fluid"
   data-ad-client="ca-pub-〇〇〇〇〇〇〇〇〇"
   data-ad-slot="〇〇〇〇〇〇〇〇〇"></ins>
<script>
   (adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOF;
}
add_shortcode('mycode', 'tmt_short_code');

アドセンスコードの埋め込みは自動化している人が多いと思いますが、例外的に任意の箇所にアドセンスコードを表示させたい時は上記のような感じでショートコードにまとめておくといつでも使えるので便利です。

CTAの設置

CTAをショートコードにまとめておくと便利です、「Twitterでは～」「LINE@に登録すると～」なんかもCTAの一つでして、よく使う割には内容が同じものはショートコードで管理すると楽です。

他にも使用頻度の高い定型文的なものもショートコードにしておくと便利です、注意書きとか締め分とか色々あると思います。

アフィリエイトリンクの設置

ブログ全体で推している商品（アフィリエイト）はショートコードでまとめていつでも使えるようにすると便利です。

例えば、物販系ブロガーはAmazonの商品リンク、ゲームブロガーはアプリのDLリンク、マネタイズ記事へのリンクなんかもありかと思います。

終わりに：ありそうな質問まとめ

ショートコードを実装する上で「ありそうな質問」を先読みして答えておきます、実際に質問があれば追加していこうと思います。

ショートコードを複数作りたい

// オリジナルショートコード１
function tmt_short_code() {
return <<< EOF
ショートコード１つ目やで！！
EOF;
}
add_shortcode('mycode', 'tmt_short_code');

// オリジナルショートコード２
function tmt_short_code2() {
return <<< EOF
ショートコード２つ目やで！！
EOF;
}
add_shortcode('mycode2', 'tmt_short_code2');