仙台の皆さん、こんにちは!今日はWordPressのショートコードについて解説します。
ショートコードと聞くと、敷居が高い感じがすると思いますが、基本さえ押さえれば怖いことはありません。
今日は基本を確認しながら一番簡単な文字を出力するだけのショートコードを作りたいと思います。
ショートコードって何?
まずは、ショートコードについて簡単におさらいいておきましょう!ショートコードは「function.phpに書いた関数を[]で囲んだコードで投稿記事内に簡単に呼び出せる!」という、とても便利な機能です。
一番簡単なショートコード
それでは、本日の本題に入ります。
以下が「文字列を表示するだけの一番簡単なショートコード」です。
//ショートコードで「仙台の皆さんこんにちは!」と出力
function helloFunc() {
return "仙台の皆さんこんにちは!";
}
add_shortcode('hello', 'helloFunc');
それでは、一つづつ解説していきます。
まずは、5行目のadd_shortcodeに注目してください。
add_shortcode('hello', 'helloFunc');
add_shortcodeはWordPressで用意されたショートコードを追加するための関数です。
ショートコード名
第1引数'hello'はショートコード名となります。この文字列を投稿入力画面でショートコードとして入力します。
呼び出す関数
第2引数'helloFunc'は呼び出す関数になります。例の場合は2行目~4行目が該当します。
function helloFunc() {
return "仙台の皆さんこんにちは!";
}
つまりadd_shortcode(‘hello’, ‘helloFunc’);の意味は「ショートコードhelloが見つかったら、helloFuncという関数を呼び出す」ということです。
実際に使ってみましょう!
function.phpにコードを加えて保存!
まずは、function.phpにサンプルでも使った以下のコードを加えて保存&アップロードします。
//ショートコードで「仙台の皆さんこんにちは!」と出力
function helloFunc() {
return "仙台の皆さんこんにちは!";
}
add_shortcode('hello', 'helloFunc');
アップロードが済んだらトップページ(サイト内のどのページでもOK)を表示してみてください。function.phpの記述にエラーがあると真っ白な画面になり。何も表示されなくなります。
function.phpを編集する際は、必ずファイルをコピーしてから編集を行ってください。エラーがあっても、すぐに戻せるように必ずコピーを用意しておきましょう!
エディタで呼び出し!
では、実際にエディタでショートコードを使って関数を呼び出してみましょう!
エディタ内では[]でショートコード名を囲んで書き込むだけでOKです。
ショートコードはエディタの「ビジュアル」でも「テキスト」でも両方で使うことができます。
以下のように書き込んで「仙台の皆さんこんにちは!」と出力されていれば成功です!
文字を出力するだけの一番簡単なショートコードでしたが、基本は理解していただけたと思います。簡単ですよね?
ちょとだけ応用編
では、ちょとだけ応用したものを作ってみたいと思います。折角ですから動的に変化させるショートコードを作ってみたいと思います。
先程の例を少し改良して以下のように表示を変えたいと思います。
- 05:00から11:59までは「仙台のみなさん、おはようございます!」
- 12:00から17:59までは「仙台のみなさん、こんにちは!」
- 18:00から04:59までは「仙台のみなさん、こんばんは!」
という感じで時間ごとに挨拶を変えてみたいと思います。
function helloFunc2() {
$time = wp_date("G");//時刻の24時間表記 (0埋め無し)
if($time >=5 && $time <= 12){
$greeting = 'おはようございます!';
}elseif($time >=12 && $time <= 17){
$greeting = 'こんにちは!';
}elseif(($time >=18 && $time <= 23) || ($time >=0 && $time <= 4)){
$greeting = 'こんばんは!';
}
return "仙台の皆さん、".$greeting;
}
add_shortcode('hello2', 'helloFunc2');
実は、この記事の冒頭の赤字のあいさつは文はこのショートコードを使用して表示しています。
どのようになっていますか?条件通りに表示されていたら成功ですね。
まとめ
いかがでしたか?今回紹介したショートコードは基礎の基礎です。
実は、超有名なお問い合わせフォームを作成するプラグイン「Contact Form 7」もショートコードでフォームを出力しています。
[contact-form-7 id="◯◯◯" title="お問い合わせ"]
今までショートコードを知らなかった方も、ショートコードと意識せずに既に使っているかもしれませんね。
それではまた!仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで!もちろん県外の方も大歓迎です!