ショートコードを作る

2016年12月26日Wordpress

投稿画面又は、投稿画面よりPHPコードを直接追加したかったので、直接、フォームにphpコードを書けないものかと思ったのですけど、どうも最終的には、ショートコードで表示する方法よさそうです。プラグインで可能にする方法もありましたが、どうもやり方が今では推奨されない内容で、こちらはやめておくことにしました。

//functions.php
function Hello_japan() {
   return "SumiDai.NET すみだいねっと";
}
add_shortcode('hello', 'hello_japan');

上記のコードで投稿画面より[hello] とすると、SumiDai.NET すみだいねっと が表示されます。

---

他には、引数に複数の値を設定したり、デフォルト値を設定したい場合は、下記のように設定可能です。初期値では、第1引数がred　第2引数がblueです。従って、引数設定なしで、ショートコードを読み込むと、デフォルト値が表示されます。また変更したい場合は、[hello color1=green color2=pink] のような指定で、設定できます。

//functions.php
function Hello_japan($argument){
extract(shortcode_atts(array( 'color1' => 'red', 'color2' => 'red' ), $argument));
   return "<div style=' color: ". $color1  ." ;'>SumiDai.NET</div>
   　　　　　<div style=' color: ". $color2  ." ;'>SumiDai.NET</div>";
}
add_shortcode('hello', 'hello_japan');

//メモ
shortcode_atts() デフォルト設定wordpress関数

---

その他　下記はいくつかのサンプルです。

サンプル1 最近の、記事一覧を表示する。

//functions.php
function recent_posts($atts){
   extract(shortcode_atts(array( 'posts' => 1, ) , $atts)); //デフォルトは1記事

   $return_string = '<ul>';
   query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
   if (have_posts()) :
      while (have_posts()) : the_post();
         $return_string .= '<li>'. get_post_time('Y.m.d D') .'<a href="'.get_permalink().'">'.get_the_title().'</a></li>';
      endwhile;
   endif;
   $return_string .= '</ul>';

   wp_reset_query();
   return $return_string;
}
add_shortcode('hello', 'recent_posts');

サンプル2 メニューを取得するショートコード

function menu_function($atts, $content = null) {
   extract(
      shortcode_atts(
         array( 'name' => null, ),
         $atts
      )
   );
   return wp_nav_menu(
      array(
          'menu' => $name,
          'echo' => false
          )
   );
}
add_shortcode('menu', 'menu_function');

サンプル3 Google Mapを表示する。

function googlemap_function($atts, $content = null) {
   extract(shortcode_atts(array(
      "width" => '640',
      "height" => '480',
      "src" => ''
   ), $atts));
   return '<iframe width="'.$width.'" height="'.$height.'" src="'.$src.'&output=embed" ></iframe>';
}
add_shortcode("googlemap", "googlemap_function");

サンプル4 Googleチャート

function chart_function( $atts ) {
   extract(shortcode_atts(array(
       'data' => '',
       'chart_type' => 'pie',
       'title' => 'Chart',
       'labels' => '',
       'size' => '640x480',
       'background_color' => 'FFFFFF',
       'colors' => '',
   ), $atts));

   switch ($chart_type) {
      case 'line' :
         $chart_type = 'lc';
         break;
      case 'pie' :
         $chart_type = 'p3';
         break;
      default :
         break;
   }

   $attributes = '';
   $attributes .= '&chd=t:'.$data.'';
   $attributes .= '&chtt='.$title.'';
   $attributes .= '&chl='.$labels.'';
   $attributes .= '&chs='.$size.'';
   $attributes .= '&chf='.$background_color.'';
   $attributes .= '&chco='.$colors.'';

   return '<img title="'.$title.'" src="http://chart.apis.google.com/chart?cht='.$chart_type.''.$attributes.'" alt="'.$title.'" />';
}
add_shortcode('chart', 'chart_function');

サンプル5　PDF出力

function pdf_function($attr, $url) {
   extract(shortcode_atts(array(
       'width' => '640',
       'height' => '480'
   ), $attr));
   return '<iframe src="http://docs.google.com/viewer?url=' . $url . '&embedded=true" style="width:' .$width. '; height:' .$height. ';">Your browser does not support iframes</iframe>';
}
add_shortcode('pdf', 'pdf_function');