WordPressで自作のショートコードを作成してウィジェットで使う方法

WordPressでオリジナルのショートコードを作成して、ウィジェットのカスタムHTML(またはテキスト)で使う方法を紹介します。

各ページ共通で表示するような情報や、ASPから提供された広告タグなどをショートコードに置き換えて使ったりできるので、覚えておくと役に立つカスタマイズなんじゃないかと思います★

WordPressのショートコードについて

WordPressのショートコードは、お問い合わせメールやインスタグラムの写真連携など、プラグインによって発行されたものを使う機会が多いんじゃないかと思いますが、まずそもそもショートコードって何?ってお話から手短に。

Contact Form 7であれば、[contact-form-7 id=”1″ title=”コンタクトフォーム”]みたいなのがショートコードです。固定ページなどの本文に貼るとメールフォームが表示されます。

で、例えばこのコード、1行で簡潔にまとめられているんだけど、実際は裏側で複雑なプログラム処理が行われています。

プログラムの命令文って投稿本文では使えない(書いても実行できない)し、ブログの複数箇所にメールフォームを設置したい場合に、都度PHPのコードを書いていくのはとても面倒なので、1行の短いコードで処理を代用できるようにしたものがショートコードなんです。

オリジナルのショートコード作成と使い方

WordPressでは、プラグインによって発行されたもの以外にも、自分だけのオリジナルのショートコードを作成することができます。

具体的な方法は以下で解説しますが、先にポイントだけまとめるとこんな感じ。

オリジナルのショートコードの作成と使い方のポイント
  • functions.phpで、add_shortcode(‘ショートコードの名前’, ‘ショートコードの内容’);を定義する
  • 投稿本文やウィジェットなど、そのショートコードを使いたい場所で、[ショートコードの名前]を書く

「ショートコードの内容」の部分が少し難しいかもしれない(というか、処理の内容による)ので、今回はASPの広告コードをfunctions.phpに指定しておいて、ショートコードで出力するというケースを例に、サンプルコードを紹介していきたいと思います。

自作のショートコードを作成してウィジェットで使用する手順

まずはテーマフォルダ内のfunctions.phpを編集します。

A8のバナー広告をショートコードで出力する処理を書いてみることにしますね。
※以下のサンプルコードからはアフィリンクを外していますので、A8で提供されたコードは3-5行目の部分にそのまま貼り付けて使うようにしてください。

function ad_sample() {
    return '
    <a href="/" rel="nofollow">
    <img border="0" width="300" height="250" alt="" src="https://www28.a8.net/svt/bgt"></a>
    <img border="0" width="1" height="1" src="https://www14.a8.net/0.gif" alt="">
    ';
}
add_shortcode('ad', 'ad_sample');

次に、上記で作成した[ad]というショートコードを、カスタムHTMLかテキストのウィジェットに貼ってみましょう。
WordPressで自作のショートコードを作成してウィジェットで使う方法

これでブログを見てみると、広告バナーが表示されるようになると思います。
WordPressで自作のショートコードを作成してウィジェットで使う方法

ウィジェットでショートコードが使えない場合の原因と確認ポイント

ショートコードをウィジェットに貼り付けても何も起こらない場合は、以下の3つの原因を疑ってみてください。

ウィジェットでショートコードを使えない場合の原因
  1. ウィジェットでショートコードを使うこと自体が有効になっていない
  2. 「ショートコードの内容」が間違っている(処理をミスっている)
  3. 「ショートコードの名前」が半角カッコで囲まれていない

ウィジェットでショートコードを使うこと自体が有効になっていない

カスタムHTMLやテキストウィジェットにショートコードを貼り付けても、何も表示されない(処理が行われない)場合は、再びfunctions.phpを開いて、以下のコードを追加してみてください。

add_filter( 'widget_text' , 'do_shortcode' );

テーマによっては、もしかするとウィジェット内でショートコードを使えないままになっている可能性があるので、add_filter( 'widget_text' , 'do_shortcode' );で使用できるように設定する必要があります。

「ショートコードの内容」が間違っている(処理をミスっている)

今回のような広告タグの管理であれば、ASPで発行されたコードが間違いなくペーストされているかを確認してみてください。

テキストの改行箇所がおかしかったり、クォーテーションマーク、ダブルクォーテーションマークの使い方をミスすると、処理が失敗することがあります。

「ショートコードの名前」が半角カッコで囲まれていない

ショートコードの名前は全角カッコではなく、半角カッコで囲まないと実行されません。

functions.phpでのショートコードの作成が難しい場合は?

今回はfunctions.phpによるショートコード自作方法を紹介しましたが、

「PHPの書き方がわからない…」
「そもそもテーマファイルを触ることができない…」

などの理由で、functions.phpを使った管理が難しい場合もあると思います。

そんなときは、Post Snippetsプラグインを使うことで同様のことが可能になるので、こちらの関連記事も合わせて参考にしてもらえると嬉しいです。

Post SnippetsでJSや広告タグをスニペット登録してショートコードを発行する方法

2019年7月5日

・・・

最後まで読んでいただき、ありがとうございました★

ブログを始めるならWordPressテーマSTORKがオススメ

理由は以下の記事でまとめています。

【STORK】有料テーマ購入を迷う人にストークをオススメする7つの理由2021年版

2019年6月1日

綺麗なデザインが最初から用意されているので、「ブログを書きたい」と思った時からすぐに始めることができます。しかも、執筆に便利なツールも一通りそろっているので、「書くことだけ」に集中できるという、ブロガーにとってはとても魅力的なテーマです。

是非STORKを試してみてくださいね★

関連記事

コメントを残す

ABOUTこの記事をかいた人

STORKのテーマやプラグインなど、WordPressを使ったアフィリエイトに関する記事を中心に紹介しています。そのほかにもMacやiPhone、HTML、CSS、Javascript、PHPなどの記事もちょこちょこ書いています★