macoblog

「ゲーム × プログラミング」で生きていく

MMORPGに人生捧げてみ?

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

WordPress

この記事では、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リンク、マネタイズ記事へのリンクなんかもありかと思います。

スポンサードサーチ


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

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

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

・回答:ショートコード名と関数名を変更すれば同じように使えます(被ってはいけないルールがある)、下に実装例を置いておきます。
// オリジナルショートコード1
function tmt_short_code() {
return <<< EOF
ショートコード1つ目やで!!
EOF;
}
add_shortcode('mycode', 'tmt_short_code');

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

WEBトマト
「ありそうな質問・・・あまり思いつきませんでした。笑、、、正しく質問して頂ければ可能な限りお答えしたいと思いますので、その時はTwitterからDMください、フォローしていただければ返信率高いです(強欲)」