【WordPress】ショートコードの作り方と使い方
  • 【WordPress】ショートコードの作り方と使い方
  • 記事公開:2016/03/11
  • 最終更新:2018/05/20

【WordPress】ショートコードの作り方と使い方

WordPressのショートコードに関して詳しく解説しています。WordPressのショートコードをマスターしたい方は必読のコンテンツです。興味のある方は6分間だけこのコンテンツを読んでみてください。

この記事は約 8 分で読めます。

WordPressサイトの常時SSL化はお任せください。

ADhttps://wordpress-supporters.com/wordpress-ssl/

常時SSL化されていないサイトにGOOGLEが警告文を表示させるまであと僅か!
今すぐにでも必要なWordPressサイトの常時SSL化は、プロに丸投げしてください。
今だけ20,000円OFF、GOOGLE対策、リミット間近、サポート充実。

ショートコードとは

WordPresswでサイトを運営していると、投稿や固定ページで頻繁に使う定型文が出てきたり、投稿や固定ページでPHPの処理を行いたい場面に出くわすことがあるかと思います。

そんな時に便利なのが、WordPressの【ショートコード】です。

定型文をショートコード化しておけば、簡単な記述でどんなに長い定型文でも表示することできます。
PHP処理をショートコード化しておけば、投稿や固定ページでもPHP処理を行うことができます。

これってメチャクチャ便利なんですよね!

WordPresswのサイト運営が浅い方は実感が沸かないかもしれません。
ですが、覚えておいて損はありませんよ!

このページを最後まで読んで頂ければ、ショートコードをマスターすることができます。
興味のある方は読み進めてください。

ショートコードを作成してみよう

具体的なショートコードの作成方法をご紹介します。

最初に少しだけ難しい言い回しの説明を書きますと、ショートコードは【functions.php】に予め関数を作成しておき、【add_shortcode】で関数を呼び出して表示させる仕組みです。

説明だけでは?だと思いますので、具体的にいくつかのショートコードを作成しながら説明していきましょう。

定型文を表示するショートコード

最初に定型文を呼び出すショートコードを作成してみましょう。
以下が定型文を呼び出すショートコードのテンプレートです。

function 関数名() {
return "ここに定型文を記述します。";
}
add_shortcode('ショートコード名', '関数名');

【関数名】と【ショートコード名】は任意の名前(半角英数字)でOKです。
ただし、【関数名】と【ショートコード名】は別の名前にしてください。

今回は以下の様にしてみました。
以下のコードをfunctions.phpに記述してください。

function shortcode_test() {
return "ここに定型文を記述します。";
}
add_shortcode('shortcode_01', 'shortcode_test');

あとは、投稿や固定ページで定型文を表示させたい箇所に以下の様に記述します。

[shortcode_01]

記述するときは、テキストエディタで記述してください。
ビジュアルエディタでは正常に動作しません。

上記のように記述すると、記述した箇所に以下の様に定型文が表示されます。

ここに定型文を記述します。

定型文を表示させるショートコードでした。
基本的なショートコードの書き方も理解できたかと思います。

内部リンクのURLを短くするショートコード

内部リンクのURLを短くするショートコードを作成してみましょう。
内部リンクのURLを絶対パスで記述する場合、いちいち記述するのは面倒です。

そこで、以下のコードをfunctions.phpに記述してやります。

function shortcode_link() {
ob_start();
echo home_url();
$td .= ob_get_clean();
return $td;
}
add_shortcode('home', 'shortcode_link');

あとは内部リンクのURLを以下のように記述すればOKです。

[home]/test/

この様に記述すると、このサイトであれば以下の様に表示されます。

https://takayakondo.com//test/

このショートコードが何をしているのかと言うと、テンプレートタグの【home_url()】でサイトのTOPページのURLを取得して【home】のなかに格納しています。

いちいちURLを記述しなくてもこの様にショートコード化しておけば便利ですね。

テーマフォルダの画像を簡単に呼び出すショートコード

テーマフォルダの画像を呼び出す場合、画像URLが非常に長くなります。

例えば、このサイトでテーマフォルダの【images】というフォルダにある【test.jpg】を呼び出そうとすると、以下が画像URLをなります。

https://takayakondo.com/wp-content/themes/テーマファイル名/images/wpc.jpg

長いです・・・こんなのいちいち記述できません。

そこで、以下のコードをfunctions.phpに記述してやります。

function shortcode_images() {
ob_start();
bloginfo('template_directory');
$td .= ob_get_clean();
return $td;
}
add_shortcode('img', 'shortcode_images');

こうしておけば、以下の様に記述するだけで画像を呼び出すことができます。

[img]/test.jpg

同じフォルダにある【test2.jpg】を呼び出す場合は、

[img]/test2.jpg

この様に記述してやるだけでOKです。

このショートコードが何をしているのかと言うと、テンプレートタグの【bloginfo(‘template_directory’)】でテーマファイルのURLを取得して【img】のなかに格納しています。

ショートコード化することで長ったらしい画像パスを記述する必要がなくなりましたね。

ショートコードを投稿や固定ページ以外で使う場合

ショートコードは、投稿や固定ページで使用するものですが、その他の場所でも利用したい場面に出くわすかもしれません。

ここではいくつかのパターンをご紹介します。

テーマファイルで使う場合

テーマファイルでショートコードを使う場合、そのまま記述しても正常に動作しません。

テーマファイルで使う場合は、以下の様に記述しましょう。
ショートコード名は【test】とした場合です。

<?php echo do_shortcode('[test]'); ?>

この様に記述してやれば、テーマファイルでショートコードを利用することができます。

ウィジェットで使う場合

ウィジェットでショートコードを使う場合、そのまま記述しても正常に動作しません。

ウィジェットでショートコードを使う場合は、functions.phpに以下のコードを記述します。

add_filter('widget_text', 'do_shortcode' );

このコードを記述しておけば、ウィジェットでもショートコードを利用できるようになります。
ショートコードの書き方は投稿や固定ページと同じです。

[test]

上記のように記述すればOKです。

まとめ

WordPressのショートコードに関してのお話でした。

WordPressでサイトを運営していけば、いずれショートコードは必要になってきます。
この機会にWordPressのショートコードをマスターしてはいかがでしょう!

覚えておけば、サイト運営の幅も広がりますよ!

今回のコンテンツに関する疑問点、WordPressの操作方法やプラグインに関するご質問など、下記の無料メールサポートからお気軽にお問い合わせください。

回答できるお問い合わせには、全て回答をさせていただきます。

無料メールサポート

必須メールアドレス
必須サポートを希望する内容

確認事項

上記で入力していただいたメールアドレスに回答メールをお送りいたします。メールを受信できるメールアドレスをご記入ください。

質問に対する回答は、基本的に24時間以内の返信を心がけておりますが、質問が集中した場合、最長で返信に72時間のお時間を頂戴いたします。

当方で回答できる質問には全て回答をさせていただきます。ただし、全ての質問に対して明確な回答をご提供できるわけではありません。

個人情報保護法その他の法令に基づき開示が認められる場合を除き、あなたの個人情報を第三者に開示することはありません。個人情報保護法及び行政書士法に基づき個人情報等を厳重に管理し機密保持に努めるものとします。ただし、情報の漏洩、消失、他者による改ざん等が完全に防止されることについての保証は一切行いません。

ご記入いただいた個人情報は、質問に対する回答の送信と、メールマガジンの配信にのみ使用させていただきます。

上記のフォームから無料メールサポートご利用された方は、定期的または不定期に、Wordpress関連の最新情報、Wordpressのカスタマイズ方法、Wordpress関連のプレゼント企画や、広告などが掲載された「takayakondo.com」が発行するメールマガジンが配信されることに同意したものとします。

メールマガジンへは、「takayakondo.com」運営者によって後日に代理登録をさせていただきます。代理登録されるまでに、しばらく時間を要する場合がございます。

メールマガジンは、利用者の判断でいつでも購読を解除することができます。

この記事が気に入ったら【いいね】しよう!

WordPressサイトの常時SSL化はお任せください。

ADhttps://wordpress-supporters.com/wordpress-ssl/

常時SSL化されていないサイトにGOOGLEが警告文を表示させるまであと僅か!
今すぐにでも必要なWordPressサイトの常時SSL化は、プロに丸投げしてください。
今だけ20,000円OFF、GOOGLE対策、リミット間近、サポート充実。

Wordpressサイトのカスタマイズで
お困りではありませんか?

あなたのWordpressサイトを、ご希望に沿ってカスタマイズいたします。
次に該当する方は、お気軽にご相談下さい。

  • Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしたいが、自分でカスタマイズする暇がない。カスタマイズが得意な人に丸投げしたい。
  • Wordpressサイトをカスタマイズしてみたが、上手くカスタマイズできなかった。カスタマイズ経験が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしてみたら、バグが発生して困っている。正常に動作するように正しくカスタマイズしてほしい。

一つでも該当する方は、以下のリンクからチェックしてみてください。

詳細を確認する

現在、上記サービスは別ドメインで運用しております。
ドメインは異なりますが、わたしが提供させていただいているサービスです。

著者:takaya kondo

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

  • 2016-01-12

    WordPressの投稿や固定ページにYOUTUBE動画を設置する方法

    WordPressの記事にYOUTUBE動画を設置する最も簡単な方法をご紹介します。コピペだけで設置できる方法なので簡単ですよ!参考にしてください。 記事を読む

  • 2015-01-13

    WordPressのテキストエディタにプラグインを使わずオリジナルボタンを設置する方法

    WordPressのテキストエディタにオリジナルボタンを追加する方法をご存知ですか?頻繁に利用するタグを呼び出すオリジナルボタンを設置するだけでも、作業効率は大きく向上します。今回は、プラグインを使うことなく、WordPressのテキストエディタにオリジナルボタンを追加する方法をご紹介いたします。 記事を読む

  • 2015-02-14

    WordPressのゴミ箱を一定間隔で自動的に空にする方法

    WordPressのゴミ箱を一定間隔で自動的に空にする方法をご紹介します。ゴミ箱に溜まったデータを定期的に整理したい方はご覧下さい。コピペでカスタマイズすることができます。 記事を読む

  • 2015-09-05

    プラグイン不要!固定ページの拡張子に.htmlを付ける方法

    WordPressで固定ページの拡張子に.htmlを付ける方法をご紹介。プラグインを使う方法もありますが、今回はプラグインを使わない方法です。簡単ですので参考にしてください。 記事を読む

  • 2015-10-06

    【WordPress】ユーザーの総数を表示する方法

    WordPressで管理しているユーザーの総数を表示する方法をご紹介します。複数の人間で運営している場合などで、何人で運営しているかを表示したいときなどに使えるカスタマイズです。参考にしてください。 記事を読む

    2件のコメント

  • 通りすがり
    2017年10月13日 12:05 PM

    参考になりました!ありがとうございます。
    feedlyのボタンがうまく挙動していないようです。(ちょっと気になりました)

    • 管理人
      2017年11月4日 1:15 AM

      参考になったようでよかったです!

      feedlyボタンの件もありがとうございます。
      正常に動作するよう修正いたしました。

コメントを残す


(必須)