ブログ記事の画像にコメントを追加できるWordPressのプラグイン「Demon Image Annotations」を導入してみた

2013.5.31 (更新日:2016.03.02)
annotation

画像の好きな箇所にコメントを残せるWordpressのプラグイン「Demon Image Annotations」を導入してみました。同じ目的の他のプラグインがあるとは思いますが、これを選んだ理由は……特にありません。もし、もっといいプラグインがあれば教えてください。

うちのブログみたいに海外記事の紹介がメインだったりすると使いどころが微妙ですが、自分で撮った写真をたくさん載せているサイトだと面白いのではないかと思います。

使い方

annotation2

画像の上にマウスカーソルを持ってくるとコメントが表示されます。また画像の左上に「コメントの追加」というリンクが出るので、それをクリックすると上の画像のように入力欄が現れます。黄色い四角の枠をドラッグして移動し、場所を決めたらコメントを入れてOKを押します。サイズの変更も可能です。そうすると、その場にコメントが表示されます。

インストール

プラグインの新規追加で「Demon Image Annotations」をインストールします。ただし、まだ有効化はしないでください。実はこのプラグイン、デフォルト状態では日本語が使えません。

プラグインの改造

まず、日本語が使えるように修正します。プラグイン編集から「Demon Image Annotations」を選び、imageannotation.phpを編集します。

最後のほうにある下記の部分を見つけます。

 if($wpdb->get_var("show tables like '$table_name'") != $table_name) {
      $sql = "CREATE TABLE IF NOT EXISTS `".$table_name."` (
      `note_ID` int(11) NOT NULL AUTO_INCREMENT,
      `note_img_ID` varchar(30) NOT NULL,
      `note_comment_ID` int(11) NOT NULL,
      `note_author` varchar(100) NOT NULL,
      `note_email` varchar(100) NOT NULL,
      `note_top` int(11) NOT NULL,
      `note_left` int(11) NOT NULL,
      `note_width` int(11) NOT NULL,
      `note_height` int(11) NOT NULL,
      `note_text` text NOT NULL,
      `note_text_ID` varchar(100) NOT NULL,
      `note_editable` tinyint(1) NOT NULL,
      `note_date` datetime NOT NULL,
      PRIMARY KEY (`note_ID`)
    ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=21 ;";

ここの最後の一行、「CHARSET=latin1」を「CHARSET=utf8」に書き換え、保存します。

これで日本語が使えるようになるので、プラグインを有効化します。もしこの書き換えを行う前にプラグインを有効にしてしまうと、このプラグインが利用するテーブルが日本語が使えない設定で作成されてしまい、後から上記の書き換えを行っても修正はできません。またプラグインを削除してもテーブルは残るため、再インストールしてもダメ。その場合は、phpMyAdminなどを使い、データベースの修正を行う必要があります。

設定

annotation

プラグインを有効にすると管理画面にメニューが追加されるので、そこから設定を行います。最低限設定しなければならないのは、「content wrapper :」の部分。

「content wrapper :」で指定したCSSのClassやIDで囲まれた範囲内の画像にのみコメントの追加が可能となります。その他の設定はほぼデフォルトのままでも問題ないと思います。

「Admin Only」を「はい」にするとコメントの追加は管理者のみが可能となります。

なお、デフォルトではコメントを追加するリンクの文字は「Add Note」となっています。うちでは「コメントを追加」に書き換えていますが、これはプラグイン編集で「jquery.annotate.js」にある文字列を書き換えれば変更できます。

これで登録したコメントは、Wordpressのコメント欄にも表示が可能です。うちはDisqusを使っているので反映してくれないのだけれども……。

タグ: ,

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

HUAWEI nova liteの安いけどおススメのケース ケースで迷ってたらとりあえず買って損はしない

現在一押しのミドルクラス端末、HUAWEI nova liteのケースを購入してみました。 買ったのは、NILLKINというブランドのケース。 TopAce Huawei Nova Lite 専用ケー

ウェアラブル翻訳機「ili」を持って台湾に行こう! ログバーがiliのモニターを募集中

話した言葉を瞬時に翻訳してくれる旅行に特化したウェアラブル翻訳機「ili」が、モニターを募集をしています。 関連:話した言葉を瞬時に翻訳!ウェアラブル翻訳機「ili(イリー)」は海外旅行をもっと身近に

あなたの一票でシリーズ化! Amazonがオリジナル作品でシリーズ化してほしいものを選ぶアンケート調査を実施中

Amazonプライムビデオで、日本未公開のAmazonオリジナル作品のパイロット版(第1話)を観て、今後その続きを観たい(シリーズ化してほしい)と思った作品を選ぶというアンケート調査を行っています。

Android O Developer Preview 1をNexus 5Xに焼いてみた 今のところ違いはよくわからない

公開されたAndroid Oの開発者プレビュー1を早速Nexus 5Xに入れてみました。正直なところ、新機能についてはまだ実感できないというか、対応しているアプリがないので試せてはいないのですが、なん

Prime Musicを聴くだけ! 抽選で5,000円のAmazonギフト券が当たるキャンペーンがスタート

AmazonがPrime Musicを聞くと2000名に5000円のAmazonギフト券が当たるというキャンペーンを開催しています。 プライム会員限定のキャンペーンですが、無料期間中でも参加OKとなっ

スマホの画面をテレビに出力できるMiracast(ミラキャスト)の使い方

スマホの画面をテレビに出力できるMiracast(ミラキャスト)の使い方

名前だけは聞いたことはあるものの、使っている、活用しているという話をあまり聞かないMiracast(ミラキャスト)、どんなものかと思って実際に使ってみました。 ...

HUAWEI nova liteのコスパは異常 同価格帯の端末では競合がいない

HUAWEI nova liteのコスパは異常 同価格帯の端末では競合がいない

HUAWEIが若者向けのシリーズとしてあらたに投入したのnova、その下位モデルという位置づけのnova liteを購入してみました。 nova liteは公式ショップや量販店では販売しておらず、...

HUAWEI P10 lite発表 スペックはnova liteよりもやや上で価格は約3万5000円

HUAWEI P10 lite発表 スペックはnova liteよりもやや上で価格は約3万5000円

HUAWEIがMWCで発表したフラッグシップ、P10/P10 Plusに続き、廉価版となるP10 liteを発表しました(ただし、HUAWEIのサイト上では確認できず、画像やスペックはGSMAre...

Androidを搭載したVAIO Phone A発表 24800円で4月7日発売

Androidを搭載したVAIO Phone A発表 24800円で4月7日発売

VAIOはWindows 10 mobileを搭載したVAIO Phone Bizを発売中ですが、同じ筐体にAndroidを搭載したVAIO Phone Aを発表しました。 発売は4月7日。VAI...

HUAWEI nova liteの安いけどおススメのケース ケースで迷ってたらとりあえず買って損はしない

HUAWEI nova liteの安いけどおススメのケース ケースで迷ってたらとりあえず買って損はしない

現在一押しのミドルクラス端末、HUAWEI nova liteのケースを購入してみました。 買ったのは、NILLKINというブランドのケース。 ...

MENU

back to top