トップページ > WEB制作 > 【WordPress】ショートコード作成の基本中の基本を解説!一番簡単なショートコードを作ります。
WordPress

【WordPress】ショートコード作成の基本中の基本を解説!一番簡単なショートコードを作ります。

仙台の皆さん、こんにちは!今日は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="お問い合わせ"]

今までショートコードを知らなかった方も、ショートコードと意識せずに既に使っているかもしれませんね。

それではまた!仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで!もちろん県外の方も大歓迎です!

関連記事

カテゴリ

タグクラウド