ショートコードとは
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です。
https://takayakondo.com/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');
こうしておけば、以下の様に記述するだけで画像を呼び出すことができます。
https://takayakondo.com/wp-content/themes/official/test.jpg
同じフォルダにある【test2.jpg】を呼び出す場合は、
https://takayakondo.com/wp-content/themes/official/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のショートコードをマスターしてはいかがでしょう!
覚えておけば、サイト運営の幅も広がりますよ!
参考になりました!ありがとうございます。
feedlyのボタンがうまく挙動していないようです。(ちょっと気になりました)
参考になったようでよかったです!
feedlyボタンの件もありがとうございます。
正常に動作するよう修正いたしました。