Web Design Leaves

 [myshortcode foo="apple" bar="orange"] 

array( 'foo' => 'apple', 'bar' => 'orange' )

shortcode_atts( $defaults_array, $atts );

function greeting_callback($atts) {
  extract(shortcode_atts(array(
    'greet' => 'Hello',
    'who' => 'my friend',
  ), $atts));
  $output = '<p>'. $greet . ', ' . $who . '!</p>';
  return $output;
}
add_shortcode('greeting', 'greeting_callback');

<p>Good Morning, my friend!</p>

function my_shortcode_handler( $atts, $content = null )

function my_content_callback($atts, $content = null) {
  return '<p>'. esc_html($content) .'</p>';
}
add_shortcode('my_content', 'my_content_callback');

<p>&lt;a href=&#8221;example.com&#8221;&gt;Test&lt;/a&gt;</p>

function my_content_callback($atts, $content = null, $tag) {
  return '<p class="'. esc_attr($tag). '">Shortcode Name: '. esc_html($tag) .'</p>';
}
add_shortcode('my_content', 'my_content_callback');

<p class="my_content">Shortcode Name: my_content</p>

function test_callback($atts, $content) {
  return sprintf(
  '<div>%s</div>'. "\n",
  $content //エスケープ処理せずにそのまま出力
  );
}
add_shortcode('test', 'test_callback');

[test] <a href="#">test</a> [/test]

<div> <a href="#">test</a> </div>

function test_callback($atts, $content) {
  return sprintf(
  '<div>%s</div>'. "\n",
  $content //エスケープ処理せずにそのまま出力
  );
}
add_shortcode('test', 'test_callback');

[test] test
'test'

test [/test]

<div> test<br>
‘test’<p></p>
<p>test </p></div>

<pre>[test]test
'test'

test[/test]</pre>

<pre><div>test
'test'

test</div>
</pre>

[test]<pre>test
'test'

test</pre>[/test]

<div><p></p>
<pre>test
'test'

test</pre>
<p></p></div>

//コンテンツを p 要素で囲んで出力するショートコード
function my_content_callback($atts, $content = null) {
  return '<p>'. esc_html($content) .'</p>';
}
add_shortcode('my_content', 'my_content_callback');

//サイトのタイトルを出力するショートコード
function my_site_title_cb() {
  return esc_html(get_bloginfo('name'));
}
add_shortcode('my_site_title', 'my_site_title_cb');

[my_content] サイトのタイトル： [my_site_title] [/my_content]

<p> サイトのタイトル： [my_site_title]  </p>

function my_content_callback($atts, $content = null) {
  //do_shortcode($content) でショートコードを再帰的に実行
  return '<p>'. esc_html( do_shortcode($content) ) .'</p>';
}
add_shortcode('my_content', 'my_content_callback');

function my_content_callback2($atts, $content = null) {
  extract(shortcode_atts(array(
    'elem' => 'p',
  ), $atts));
  $output = '';
  if(!empty($content)) {
    $output = sprintf(
      '<%s>%s</%s>', //出力するフォーマット文字列
      esc_html($elem), //属性の elem に指定された値
      do_shortcode($content) , //ショートコードタグで囲まれた文字列
      esc_html($elem) //属性の elem に指定された値
    );
  }
  return $output ;
}
add_shortcode('my_content2', 'my_content_callback2');

function my_content_callback3($atts, $content = null) {
  extract(shortcode_atts(array(
    'elem' => 'p',
  ), $atts));
  $output = '';
  if(!empty($content)) {
    $output = sprintf(
      '<%s>%s</%s>', //出力するフォーマット文字列
      esc_html($elem), //属性の elem に指定された値
      do_shortcode($content) , //ショートコードタグで囲まれた文字列
      esc_html($elem) //属性の elem に指定された値
    );
  }
  return $output ;
}
add_shortcode('my_content3', 'my_content_callback3');

[my_content2 elem='p'] パラグラフ [my_content3 elem='span' ] スパン [/my_content3] パラグラフ [/my_content2]

<p> パラグラフ <span> スパン </span> パラグラフ </p>

function googlemap_callback($atts){
  extract(shortcode_atts(array(
    'api' => 'xxxxxxxxxx',  //API キー
    'zoom' => '14',
    'lat' => '',
    'lng' => '',
    'id' =>'gmap',
    'multi' => ''  //地図を複数表示する場合は1を指定（空文字や0以外を指定）
  ), $atts));

  if($lat && $lng){
    $output = '';
    if(!$multi) {
      $output = '<script src="https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key=' .$api. '" async defer></script>';
    }
    $output .= '<div class="map_wrapper"><div id="'.$id. '" class="gmap"></div></div>';
    $output .= '<script>';
    $output .= <<<EOF
    var map;
    google.maps.event.addDomListener(window, 'load', function(){
      map = new google.maps.Map(document.getElementById('$id'), {
      center: {lat: $lat, lng: $lng},
      zoom: $zoom
    });
  })
  </script>
EOF;
  }else{
     $output = '<p>地図の位置情報（緯度/lat 経度/lng）が指定されていません。</p>';
  }
  return $output ;
}
add_shortcode('googlemap', 'googlemap_callback');

[googlemap lat='40.748441' lng='-73.985664'multi='1']

<?php echo do_shortcode( "[googlemap lat='40.748441' lng='-73.985664'multi='1']" ); ?>

function googlemap_callback($atts){
  extract(shortcode_atts(array(
    'api' => 'xxxxxxxxxx',  //API キー
    'zoom' => '14',
    'lat' => '',
    'lng' => '',
    'id' =>'gmap',
    'title' => '所在地', //マーカーにマウスオーバーした際に表示される文字
    'animation' => 'DROP', //マーカー表示時のアニメーション（または BOUNCE）
    'content' =>'',  //情報ウィンドウに表示するコンテンツの文字
    'link_text' =>'',  //情報ウィンドウに表示するリンク文字
    'link_url' => '', //情報ウィンドウに表示するリンクの URL
    'multi' => ''
  ), $atts));
  //情報ウィンドウに表示するリンクの初期化
  $link = '';
  //リンク文字が指定されていればリンクの URLを使ってリンクを作成
  if($link_text) {
    $link = '<a href="http://'. $link_url . '">' .$link_text .'</a>';
  }
  //コンテンツの文字が指定されていればその後にリンクを追加
  $content .= ($content) ? '<br>'. $link : $link;

  //緯度と軽度が指定されていれば地図を生成
  if($lat && $lng){
     $output = '';
    if(!$multi) {
      $output = '<script src="https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key=' .$api. '" async defer></script>';
    }
    $output .= '<div class="map_wrapper"><div id="'.$id. '" class="gmap"></div></div>';
    $output .= '<script>';
    $output .= <<<EOF
    var map;
    var map_center = {lat: $lat, lng: $lng};
    google.maps.event.addDomListener(window, 'load', function(){
      map = new google.maps.Map(document.getElementById('$id'), {
      center: map_center,
      zoom: $zoom
    });

    //マーカー
    var marker = new google.maps.Marker({
      position: map_center,
      map: map,
      title: '$title',
      animation: google.maps.Animation.$animation
    });

    //コンテンツの文字かリンクが指定されていれば情報ウィンドウとクリックイベントを設定
    if('$content' || '$link') {
      //情報ウィンドウ
      var infoWindow = new google.maps.InfoWindow({
        content: '$content'
      });

      //マーカーのクリックイベント
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.open(map, marker); //marker の位置に情報ウィンドウを表示
      });
    }
  });
</script>
EOF;
  }else{
     $output = '<p>地図の位置情報（緯度/lat 経度/lng）が指定されていません。</p>';
  }
  return $output ;
}
add_shortcode('googlemap', 'googlemap_callback');

[googlemap lat='40.748441' lng='-73.985664' content='コンテンツ' link_text='Link' link_url='example.com']

function googlemap_callback($atts){
  extract(shortcode_atts(array(
    'api' => 'xxxxxxxxxx',  //API キー
    'zoom' => '14',
    'address' => '', //表示する地図の住所（必須）
    'id' =>'gmap',
    'title' => '所在地', //マーカーにマウスオーバーした際に表示される文字
    'animation' => 'DROP', //マーカー表示時のアニメーション（または BOUNCE）
    'content' =>'',  //情報ウィンドウに表示するコンテンツの文字
    'link_text' =>'',  //情報ウィンドウに表示するリンク文字
    'link_url' => '', //情報ウィンドウに表示するリンクの URL
    'multi' => ''
  ), $atts));
  //情報ウィンドウに表示するリンクの初期化
  $link = '';
  //リンク文字が指定されていればリンクの URLを使ってリンクを作成
  if($link_text) {
    $link = '<a href="http://'. $link_url . '">' .$link_text .'</a>';
  }
  //コンテンツの文字が指定されていればその後にリンクを追加
  $content .= ($content) ? '<br>'. $link : $link;

  //住所が指定されていれば地図を生成
  if($address){
     $output = '';
    if(!$multi) {
      $output = '<script src="https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key=' .$api. '" async defer></script>';
    }
    $output .= '<div class="map_wrapper"><div id="'.$id. '" class="gmap"></div></div>';
    $output .= '<script>';
    $output .= <<<EOF
    var map;
    google.maps.event.addDomListener(window, 'load', function(){

      var target = document.getElementById('$id');
      //ジオコーディングのインスタンスの生成
      var geocoder = new google.maps.Geocoder();

      geocoder.geocode({ address:"$address" }, function(results, status){
        if (status === 'OK' && results[0]){
          //マップのインスタンスを変数に代入
          var map = new google.maps.Map(target, {
            center: results[0].geometry.location,
            zoom: $zoom
          });

          //マーカーの生成
          var marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: '$title',
            animation: google.maps.Animation.$animation
          });

          //コンテンツの文字かリンクが指定されていれば情報ウィンドウとクリックイベントを設定
          if('$content' || '$link') {
            //情報ウィンドウ
            var infoWindow = new google.maps.InfoWindow({
              content: '$content',
              pixelOffset: new google.maps.Size(0, 5)
            });

            //マーカーのクリックイベント
            marker.addListener('click', function() {
              infoWindow.open(map, marker); //marker の位置に情報ウィンドウを表示
            });
          }
        }else{
         alert('失敗しました。理由: ' + status);
         return;
        }
      });
  });
</script>
EOF;
  }else{
     $output = '<p>地図の住所（address）が指定されていません。</p>';
  }
  return $output ;
}
add_shortcode('googlemap', 'googlemap_callback');

[googlemap address='20 W 34th St, New York, NY 10001' content='コンテンツ' link_text='Link' link_url='example.com']

<?php echo do_shortcode( "[googlemap address='20 W 34th St, New York, NY 10001' content='コンテンツ']" ); ?> 

<?php
  $address = esc_attr(get_post_meta( get_the_ID(), 'address', true));
  if($address) {
    echo do_shortcode( '[googlemap address="' . $address . '"]' );
  }
?>