WP-Nicodo Manual

2009年12月10日 3

WP-Nicodo 使い方をまとめたページです。

使用方法

このプラグインは WordPress のショートコード機能を使用しています。

サンプルコードの中のショートコードに WP-Nicodo が反応しないように、サンプルコード内のタグ名は、先頭を全角にしています。実際に使用する場合は nicodo を nicodo にしてください。

記事の本文に以下の形式でコードを記述する事で、ニコニコ動画から取得した情報が埋め込まれます。

ショートコードの指定例
[nicodo]sm******[/nicodo]

タグ内に動画の ID ( sm****** のような形式 ) を指定する事で、その ID が示す動画の情報を取得し、適切な HTML への置き換えを行います。

また、ショートーコードでは以下のパラメータをサポートしています。

パラメータ 動作
display 未指定 動画情報はプラグイン設定で指定された方式で表示されます。
default 動画情報はニコニコ動画のブログパーツ方式形式で表示されます。
template 動画情報はユーザ定義のテンプレート ( HTML/CSS ) 形式で表示されます。
player 動画情報の代りにニコニコ外部プレーヤーが表示されます。
width 数値 ニコニコ外部プレーヤーの幅を数値で指定します。未指定の場合はプラグイン設定で指定された大きさになります。
height 数値 ニコニコ外部プレーヤーの高さを数値で指定します。未指定の場合はプラグイン設定で指定された大きさになります。

例えば以下のように指定する事で、動画の表示方法をショートコードごとに切り替えられます。

既定
[nicodo]sm******[/nicodo]

標準
[nicodo display="default"]sm******[/nicodo]

テンプレート
[nicodo display="template"]sm******[/nicodo]

プレーヤー
[nicodo display="player" width="400" height="300"]sm******[/nicodo]

ショートコードの入力補完機能

WP-Nicodo 1.1 から、投稿やページ編集画面のエディタのツールバーにショートコード挿入用のボタンを追加するようにしました。ボタンは、以下のスクリーンショットのように表示されます。

ショートコード ボタン

ショートコード ボタン

このボタンを押すと、記事にショートコードのひな形が挿入されます。ショートコードの記述を簡単に行いたい場合にご利用ください。

テンプレートについて

動画情報の表示方法を独自のものにする場合は、テンプレート機能を使用します。

テンプレートは、HTML とキーワードの組み合わせで記述します。見た目に関する部分を分離する為に、スタイルシートと組み合わせられるようになっています。

キーワードは動画のサムネイルやコメント数などに対応しており、これらを HTML 内に指定する事で、その部分が対応する情報に置き換えられます。

例えば以下のような指定では、動画へのリンクが付いたタイトルと、サムネイルだけが表示されます。

<a href="watch_url" target="_blank">[title]</a><br />
<img src="[thumbnail_url]" />

テンプレートに指定できるキーワードの一覧は、管理画面に記載されています。

プラグインの初期状態では、私の作成したテンプレートとスタイルシートを設定しているので、カスタマイズの参考にして下さい。

プレイヤーについて

WP-Nicodo 1.1 から、ニコニコ外部プレーヤーに対応しました。

ニコニコ外部プレーヤーとは、ニコニコ動画 SP1 からサポートされた機能で、指定された動画と簡易版の再生プレーヤーをページに貼り付けられます。


COMMENTS

  • すとらいぷぱんつ
    2010年6月20日 6:23 PM

    はじめまして。WP-Nicodoを今日導入してみたのですが、とても感動しました!
    そこで質問を一つ、エディタでひな形をボタン一つで表示させることができますよね?
    そのひな形を変更したいのですが、何処を弄れば良いでしょうか?
    お忙しい所失礼します。。。

  • 2010年6月20日 8:15 PM

    ひな型とは[nicodo][/nicodo] のことでしょうか?

    もしそうであれば、WP-Nicodo の js フォルダ内の mce.js と quicktag.js に定義されています。これらは JavaScript のソースになっているので、テキストエディタや Eclipse などで開き、該当部分を編集してみてください。

    ただし、JavaScript の文字コードは UTF-8N になっているので、テキストエディタを使用する場合は文字コードを識別できるもの ( EmEditor、秀丸エディタ、TeraPad、…etc ) を選んでください。ちなみに Windows 付属のメモ帳では、UTF-8 は編集できるのですが、UTF-8N はサポートしていないようです。

  • 2011年6月19日 2:25 PM

    はじめまして、本日から使用させて頂きます。
    シンプルで使いやすくて素晴らしいと感じました。

    ありがとうございます。