プラグイン無しで表示させるGoogleマップ・QRコード・期間限定内容表示のショートコードと実装方法

ショートコード無しで実装するイラスト

ショートコードで毎回HTMLで書いていたソースをショートコードで表示できるようにすることで、毎日の記事更新がグッと楽になります。

今回は、プラグイン無しでfunctions.phpにPHPコードをコピペするだけで表示させる、Googleマップ・QRコード・期間限定内容表示のショートコードと実装方法についてご紹介します。

ショートコードを使用する際は、それに紐づく関数を functions.php の任意の場所に追加してから使用しましょう。

注意
functions.phpをいじる場合、ftpで必ずバックアップを取ってから行い、テーマ本体ではなく子テーマの方に関数をコピペするようにしましょう。

Googleマップを表示させるショートコード

コーポレートサイトや飲食店では、アクセスマップの表示が欠かせず今は地図を表示していないサイト自体が珍しいくらいです。

以下はGoogleマップをショートコードで使用する関数と、ショートコードです。

コードを表示する

functions.php

add_shortcode("googlemaps", "show_googlemaps");
function show_googlemaps($atts, $content = null) {
extract(shortcode_atts(array(
"width" => '640',
"height" => '480',
"src" => ''
), $atts));
return '<iframe width="'.$width.'" height="'.$height.'" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0" src="'.$src.'&output=embed"></iframe>';
}

ショートコード

[googlemaps width=”任意の横幅” height=”任意の縦幅” src=”GoogleマップのURL”]

QRコードを表示するショートコード

以下の関数とショートコードを記述すれば、任意のURLをショートコードに書くだけで生成から埋め込みまで行ってくれます。

コードを表示する

functions.php

add_shortcode('qrcode', 'show_qrcode');
function show_qrcode($atts) {
extract(shortcode_atts(array(
'str' => 'http://example.com',
'size' => '80',
), $atts));
return '<img src="https://chart.googleapis.com/chart?chs=' . $size . 'x' . $size .
'&cht=qr&chl=' . $str . '&choe=UTF-8 " alt="QR Code"/>';
}

ショートコード

[qrcode str=”任意の文字列” size=”任意”]

期間限定で内容を表示するショートコード

期間限定で表示するものを、終了に準じて削除するのを忘れてしまわないよう自動で表示・非表示をするショートコードです。

このショートコードで、あらかじめ設定した期間だけにメッセージが表示されるので、間違えることもなく、簡単に実装でき、以下を子テーマの functions.php に追記する形でコピペします。

コードを表示する

functions.php

//キャンペーン(指定期間中のみ表示)
add_shortcode('campaign', 'campaign_shortcode');
if ( !function_exists( 'campaign_shortcode' ) ):
function campaign_shortcode( $atts, $content = null ) {
  extract( shortcode_atts( array(
    'from' => null, //いつから(開始日時)
    'to' => null, //いつまで(終了日時)
    'class' => null, //拡張クラス
  ), $atts, 'campaign' ) );
  
  //内容がない場合は何も表示しない
  if (!$content) return null;
  //現在の日時を取得
  $now = date_i18n('U');
 
  //いつから(開始日時)
  $from_time = strtotime($from);
  if (!$from_time) {
    $from_time = strtotime('-1 day');
  };
 
  //いつまで(終了日時)
  $to_time = strtotime($to);
  if (!$to_time) {
    $to_time = strtotime('+1 day');
  };
 
  //拡張クラス
  if ($class) {
    $class = ' '.$class;
  }
 
  $tag = null;
  if (($from_time < $now) && ($to_time > $now)) {
    $tag = '<div class="campaign'.esc_attr($class).'">'.
      // date_i18n('開始日時:Y年m月d日 H時i分s秒', $from_time).'<br>'.
      // date_i18n('終了日時:Y年m月d日 H時i分s秒', $to_time).'<br>'.
      $content.
    '</div>';
  }
 
  return $tag;
}

ショートコードと使用方法

ショートコードは、from に開始日時を指定し、toには終了日時を指定することで使用ができ、以下は記述の一例ですが、日時のスペースや記述方法が以下に準拠して動作します。

気をつけたいのは、桁数を崩さないよう9時の場合、09として頭の「0=ゼロ」の記述も必ず行うようにしましょう。

[campaign from="2020-12-06 00:09:00" to="2020-12-09 23:59:59"]
送料無料キャンペーン中
[/campaign]

もう既に始まっているもので、終了日時を指定する場合は、fromは記載せずに to のみ指定し、開始日時が分かっていて終了日時が未定の場合は、fromオプションのみを利用して記述します。

参考サイト

参考 指定期間中だけ内容を表示するキャンペーンショートコードの実装方法寝ログ