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

タグ: ,

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

最新情報をお届けします

BIGLOBEのエンタメフリーオプション、2月にも対象サービスが追加される予定

BIGLOBEが提供しているYoutubeやAbemaTVなどのデータ通信がカウントされない「エンタメフリー・オプション」ですが、2月中にも対象サービスが追加されるようです。 エンタメフリーオプション

格安SIMを利用しているスマートフォンはiPhone 5Sが最多 MMD研究所主催の勉強会で格安SIMの最新動向を聞いてきた

MMD研究所主催のMVNO勉強会「2016年の振り返りと2017年に向けて」に参加してきました。 この勉強会、今回が第4回目ということですが、私は今回が初参加。 「報道メディア、ライター向けの勉強会」

AUKEY、日替わりで対象製品が半額になる「当日だけのお買い得」キャンペーン、対象製品が最大79%オフの「2017新春セール」を開催

AUKEYが1月23日~2月6日の間、日替わりで対象製品を半額で購入できるというキャンペーン、そして1月23日~2月1日には「2017新春セール」として対象製品が最大79%オフになるキャンペーンを実施

Android 7.0 Nougatではタスクボタンのダブルタップで直前に表示していたアプリに切り替え可能

Android 7.0 / 7.1 Nougatでは以前にも紹介したマルチウィンドウ機能やイースターエッグなど、存在がわからない機能があるのですが、そんな中の一つにタスクボタン(マルチタスクボタン)の

1月27日発売のFREETEL RAIJIN(雷神)、Amazonで約3,000円安く予約受付中

FREETELの最新機種、RAIJIN(雷神)が1月27日(金)に発売となります。 大容量バッテリを搭載したFREETEL RAIJIN(雷神) 5.5インチの大画面にバッテリは5,000mAhという

Android 7.0 Nougatではタスクボタンのダブルタップで直前に表示していたアプリに切り替え可能

Android 7.0 Nougatではタスクボタンのダブルタップで直前に表示していたアプリに切り替え可能

Android 7.0 / 7.1 Nougatでは以前にも紹介したマルチウィンドウ機能やイースターエッグなど、存在がわからない機能があるのですが、そんな中の一つにタスクボタン(マルチタスクボタン...

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

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

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

AUKEY、日替わりで対象製品が半額になる「当日だけのお買い得」キャンペーン、対象製品が最大79%オフの「2017新春セール」を開催

AUKEY、日替わりで対象製品が半額になる「当日だけのお買い得」キャンペーン、対象製品が最大79%オフの「2017新春セール」を開催

AUKEYが1月23日~2月6日の間、日替わりで対象製品を半額で購入できるというキャンペーン、そして1月23日~2月1日には「2017新春セール」として対象製品が最大79%オフになるキャンペーンを...

FREETEL、299円の全プラン対応パックに3か月間データ容量が増量されるAmazonプライム会員限定プランを提供中 ただし価格は322円

FREETEL、299円の全プラン対応パックに3か月間データ容量が増量されるAmazonプライム会員限定プランを提供中 ただし価格は322円

最近、ドコモからの費用増に伴い、初期費用の値上げが行われているMVNO(格安SIM)ですが、そんな中でもダントツに安い初期費用299円で提供しているFREETELの全プラン対応パック。 その全プ...

1月27日発売のFREETEL RAIJIN(雷神)、Amazonで約3,000円安く予約受付中

1月27日発売のFREETEL RAIJIN(雷神)、Amazonで約3,000円安く予約受付中

FREETELの最新機種、RAIJIN(雷神)が1月27日(金)に発売となります。 大容量バッテリを搭載したFREETEL RAIJIN(雷神) 5.5インチの大画面にバッテリは5,000mA...

MENU

back to top