4,710 views
この記事は最終更新から 2429日 が経過しています。
やりたいこと
ワードプレスの投稿やウィジェット内で野球のスコアボードを表示したい。
高校野球の結果であったり、
少年野球の結果であったり、
草野球の結果であったり、
プロ野球の結果であったり。
こんな風に表示されます。( ↓ 本プラグインで表示)
1 | 2 | 3 | 4 | 5 | 6 | R | |
GIANTS | 0 | 0 | 0 | 1 | 0 | 0 | 1 |
合鴨軍団 | 0 | 0 | 2 | 0 | 0 | X | 2 |
使い方
ショートコード [bb_scoreboard] で表示できます。
このショートコードには5個のパラメータを与えます。
1) size= : 文字サイズ [rem]
2) tm1 : チーム名(先攻)
3) tm2 : チーム名(後攻)
4) scr1 : スコア(先攻)
5) scr2 : スコア(後攻)
※スコアは各イニングの得点を「/」で区切って繋げます。合計点は不要です。例) 0/0/2/0/4/0/0
記述例
[bb_scoreboard size=”1.5″ tm1=”TITANS” tm2=”草巨人軍” scr1=”2/0/0/1/0/0/1″ scr2=”0/0/4/5/0/0/X”]
↓ 上記のショートコードを使用して本プラグインで表示 ↓
1 | 2 | 3 | 4 | 5 | 6 | 7 | R | |
TITANS | 2 | 0 | 0 | 1 | 0 | 0 | 1 | 4 |
草巨人軍 | 0 | 0 | 4 | 5 | 0 | 0 | X | 9 |
プログラム
スコアボードのデザインを変更したい場合は、proc_output_css()内のCSSを変える。
bbscoreboard.php
<?php /* Plugin Name: Baseball ScoreBoard */ if (class_exists('BBScoreBoard')) { $bb_scoreboard = new BBScoreBoard(); } class BBScoreBoard { ////////////////////////////////////////////////////////////////////// public function __construct() { add_action('wp_head', array($this,'proc_output_css'), 9999); add_shortcode('bb_scoreboard', array($this, 'proc_shortcode')); add_filter('widget_text', 'do_shortcode'); } ////////////////////////////////////////////////////////////////////// public function proc_output_css(){ echo <<< EOM <style type="text/css"> div#BBScoreBoard{ display: inline; margin: 3px; padding: 0; } div#BBScoreBoard table{ border: 3px #bb0 solid; background-color: #060; } div#BBScoreBoard td{ text-align: center; padding: 3px; border: 1px #ffe solid; color: #fff; } div#BBScoreBoard .borderB_thick{ border-bottom-width:2px; } div#BBScoreBoard .borderR_thick{ border-right-width:2px; } div#BBScoreBoard .borderL_thick{ border-left-width:2px; } </style> EOM; } ////////////////////////////////////////////////////////////////////// // args['size'] : text size [rem] // args['tm1'] : team name #1 // args['tm2'] : team name #2 // args['scr1'] : score #1 , separator='/' ex) 0/0/1/0/0/1 // args['scr2'] : score #2 public function proc_shortcode($args){ $html = ""; $size = 'font-size:'.$args['size'].'rem !important;'; $table_class = 'tc_'.str_replace('.','_',$args['size']); //------------------------------------------------------------------ $ary_tm = array(); $ary_tm[] = $args['tm1']; $ary_tm[] = $args['tm2']; //------------------------------------------------------------------ $ary_scr = array(); $ary_scr[] = explode('/', $args['scr1']); $ary_scr[] = explode('/', $args['scr2']); $nScr = max(count($ary_scr[0]), count($ary_scr[1])); //------------------------------------------------------------------ // display innings $html .= '<tr><td class="borderB_thick borderR_thick"></td>'; for($i=1 ; $i <= $nScr ; $i++){ $html .= '<td class="borderB_thick">'.$i.'</td>'; } $html .= '<td class="borderB_thick borderL_thick">R</td></tr>'; //------------------------------------------------------------------ // display score foreach($ary_scr as $idx => $scr){ $html .= '<tr><td class="borderR_thick">'.$ary_tm[$idx].'</td>'; for($i=0 ; $i < $nScr ; $i++){ $html .= '<td>'.$scr[$i].'</td>'; } $html .= '<td class="borderL_thick">'.array_sum($scr).'</td></tr>'; } //------------------------------------------------------------------ return <<< EOM <style type="text/css"> div#BBScoreBoard .{$table_class} td{ {$size} </style> <div id="BBScoreBoard"><table class="{$table_class}" style="width:100%">{$html}</table></div> EOM; } } // end of class ?>
今後やりたいこと
1) 設定画面を作成し、デザインを自由に編集できるようにすること。
2) 複数デザインを登録できるようにすること。
2017.11.20追記 : 脱Fewer than 10
2017年9月4日に本プラグインをWORDPRESS公式ディレクトリに公開して約2か月半、
やっとActive installationsが Fewer than 10ではなくなりました!
世界中の数千万人のワードプレスユーザーの中の二十数人がこのプラグインをインストール後に削除しないでいてくれる…
なんとも嬉しいではないですか。
どの国の人がどんな試合で使っているのか?
とっても興味がありますが、誰がインストールしたか?の情報は知る術がないのです…
いつかどこかで偶然ふらっと見かけたら嬉しいなぁ
突然失礼します。
やっとうれしいプラグインに出会えてダウンロードさせていただきました。
が、ブログ中に載せた場合、どうしてもスコアボード自体のセンタリングができません。
なにかヒントがありましたらありがたいです。
よろしくお願いいたします。