ブログ記事の画像にコメントを追加できる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を使っているので反映してくれないのだけれども……。

タグ: ,

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

最新情報をお届けします

HUAWIE novaとnova lite発表 若者向けアピールのミドルクラス 2月24日発売

HUAWEI Japanが日本市場向けにHUAWEI nova、nova Liteを発表しました。 どちらも2月24日に発売となります。 若者向けのnovaとnova lite 「日本市場向けに」とい

Amazon、音声リモコンが標準装備になった新型Fire TV Stickの予約を開始 4月6日発売

Amazonが新型Fire TV Stickの予約受付を開始しました。 発売は4月6日、価格は4980円です。 この新型、米国では昨年10月に発売されていますが、大きな変更点として、パーソナルアシスタ

3(さ)月10(と)日は「たけのこの里の日」に オリジナルVRゴーグルが当たるキャンペーンを2月28日から開始

3月10日は「さ(3)と(10)の日」ということでたけのこの里の記念日になったそうです。 たけのこの里と言えば、きのこの山ですが、こちらはすでに8月11日の山の日が記念日として制定されています。 「山

フレキシブルアームなタブレットスタンドが思いのほか便利そう

COSUPAさんのご厚意で、スマートフォン・タブレット用のフレキシブルアームスタンドをご提供いただきました。 この手の製品は以前からありますが、正直なところ「グラグラしたり自重で垂れ下がってきて使い物

AndroidになったNuAns NEO [Reloaded]発表 おさいふ対応、防水防塵で5月に発売

トリニティがWindows 10 Mobileで販売したNuAns NEO。 その後継機となるNuAns NEO [Reloaded]が発表されました。 NuAns NEO [Reloaded] 発表

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

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

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

AndroidになったNuAns NEO [Reloaded]発表 おさいふ対応、防水防塵で5月に発売

AndroidになったNuAns NEO [Reloaded]発表 おさいふ対応、防水防塵で5月に発売

トリニティがWindows 10 Mobileで販売したNuAns NEO。 その後継機となるNuAns NEO [Reloaded]が発表されました。 NuAns NEO [Reloaded]...

Amazon、音声リモコンが標準装備になった新型Fire TV Stickの予約を開始 4月6日発売

Amazon、音声リモコンが標準装備になった新型Fire TV Stickの予約を開始 4月6日発売

Amazonが新型Fire TV Stickの予約受付を開始しました。 発売は4月6日、価格は4980円です。 この新型、米国では昨年10月に発売されていますが、大きな変更点として、パーソナ...

HUAWEI P9よりもおススメ! honor 8の詳細レビュー

HUAWEI P9よりもおススメ! honor 8の詳細レビュー

上位機種のHUAWEI P9と同等のスペックを持つhonor 8の詳細レビュー。HUAWEI P9やASUS ZenFone 3と比較しながら紹介します。...

「HUAWEI P9」と「HUAWEI P9 lite」どちらを買うか悩んでいる人のためスペックを比較

「HUAWEI P9」と「HUAWEI P9 lite」どちらを買うか悩んでいる人のためスペックを比較

HUAWEI P9とP9 lite、どちらを購入するか悩んでいる人のために、スペック比較と選ぶためのポイントになりそうな箇所をピックアップしてみました。...

MENU

back to top