WordPress用のWeb連珠盤プラグインを用意しています。この記事ではその利用方法を説明します。
WordPressプラグインのダウンロード
まず以下のファイルをダウンロードします。
WordPressへのインストール
Web連珠盤プラグインをインストールするWordpressの管理画面にログインし「プラグイン > 新規追加」に移動し「プラグインのアップロード」をクリックします。
すると上の画面になるので「ファイルを選択」ボタンをクリックし先ほどダウンロードしたwp-webrenjuboard.zipをアップロードします。無事、インストールが終わると次の画面になります。
ここで「プラグインを有効化」ボタンをクリックするとインストール完了です。
WordPressブログでの利用方法
ブログ記事内に
[webrenjuboard]...[/webrenjuboard]
というコードをWordpressエディタのテキストモードで埋め込むことでWeb連珠盤を表示することができます。
例えばもっともシンプルな例として
[webrenjuboard][/webrenjuboard]
を入力すると以下のようなWeb連珠盤が表示されます。
デフォルトだと’Viewer’モード（棋譜の再生のみ）になりこれ以上特に操作ができないので棋譜データを与えてみます。棋譜データはSGF形式をサポートしており
- SGFデータ直接記入
- SGFファイル指定
の2つの読込方法があります。
SGFデータの直接記入
[webrenjuboard]と[/webrenjuboard]の間にSGFデータを記入することで読み込むことができます。例えば松月定石の出だしをSGFデータにすると
(;GM[4]FF[4]CA[UTF-8]AP[Web Renju Board:1.0.0]ST[0]SZ[15]PB[Black]PW[White];B[hh];W[hg];B[hi];W[hj];B[ih])
になるのでSGFデータを間に記載した
[webrenjuboard](;GM[4]FF[4]CA[UTF-8]AP[Web Renju Board:1.0.0]ST[0]SZ[15]PB[Black]PW[White];B[hh];W[hg];B[hi];W[hj];B[ih])[/webrenjuboard]
を記事に記載すると
と棋譜を再生できるようになります。
SGFファイル指定
SGFファイルを読み込む場合、[webrenjuboard]タグにurl属性を指定します。
[webrenjuboard url='(SGFファイルのパス)'][/webrenjuboard]
動作オプション
以下の属性を指定することでWeb連珠盤をカスタマイズすることが出来ます。
- width: ピクセル単位で表示幅を指定。例：
width='600' - movenumber: 開始時に何手目を表示するか指定。例：
movenumber='3' - viewport: 表示範囲を「left, top, right, bottom」の順に指定（座標は0から始まる）。Autoとすると自動で周辺範囲が指定される。例：
viewport='3,3,11,11' - mode: 以下の5つの表示モードから指定。例：
mode='horeditor' - image: 画像を表示
- viewer: 棋譜の再生のみ（デフォルト）
- vereditor/horeditor: 盤面編集モード（それぞれメニューを下／横に表示）
- problems: 問題解答モード
- boardtheme: 以下の4つのテーマから指定。例：
boardtheme='Dark' - TrueColor: 実際の盤面の色合（デフォルト）
- Simple: シンプルな色合
- BookStyle: 書籍風の色合
- Dark: 灰色をベースとした色合
例えば
- 幅: 600px
- 開始手数: 3手目
- 表示範囲: 4路～12路
- モード: 盤面編集モード（横メニュー）
- ボードテーマ: 書籍風
としたい場合、
[webrenjuboard width='600' movenumber='3' viewport='3,3,11,11' mode='horeditor' boardtheme='BookStyle'](;GM[4]FF[4]CA[UTF-8]AP[Web Renju Board:1.0.0]ST[0]SZ[15]PB[Black]PW[White];B[hh];W[hg];B[hi];W[hj];B[ih])[/webrenjuboard]
を記載すると
が表示されるようになります。
表示位置を中央寄せに変更
デフォルトではWeb連珠盤は左寄せで表示されます。これを中央寄せに変えたい場合は管理画面の「外観 > カスタムCSS」に移動し
div.renju_board{
margin: auto;
}
を追加すると中央寄せで表示されるようになります。