Web連珠盤WordPressプラグインの利用方法

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;
}

を追加すると中央寄せで表示されるようになります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です