annotation

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

タグ: ,

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

最新情報をお届けします

PS VR

PlayStation VR、12月17日(土)に再販決定

SonyがPlaystation VRを12月17日(土)に販売再開すると発表しました。 PS VRは10月13日の発売以来品薄が続いており、Amazonなどでもプレミアム価格となっています。 17日

cybermonday

Amazonの日本版Cyber Mondayセールは12月6日0時から開催

世界的にはCyber Mondayは先週でしたが、日本では12月第2週がCyber Monday。 ということで、12月6日0時からAmazonでCyber Mondayセールが始まります。 Amaz

main_topics_161205_b

ドミノピザ、他店のどんなクーポン券でも「ピザ全品28%」として利用可能な「年末クーポン大そうじ祭」開催中

ドミノピザが「年末クーポン大そうじ祭」を開催しています。 他店のどんなクーポンでもOK 年末クーポン大そうじ祭は、ドミノピザ以外のどんなクーポンでも「ピザ全品28%OFF」のクーポンとして利用できると

AQUOS L

UQ Mobile、防水防塵でおサイフ機能にも対応したシャープ製AQUOS Lを12月8日に発売

UQ Mobileがシャープ製のSIMフリー端末、AQUOS Lを12月8日に発売すると発表しました。 au AQUOS U SHV37のUQ Mobile向けモデル AQUOS Lはauから発売中の

Amazon Dash

ボタン一つで注文できるAmazon Dash Buttonが日本でもサービス開始

ボタン一つで関連付けられた商品をAmazonで注文できるAmazon Dash Buttonが日本でも開始されました。 ボタン一つで注文可能なDash Button Dash Buttonはボタンを押

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

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

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

honor 8の詳細レビュー HUAWEI P9やZenfone 3と比較してみました

honor 8の詳細レビュー HUAWEI P9やZenfone 3と比較してみました

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

HUAWEI Mate 9の詳細レビュー 5.9インチだけど片手で楽に持てるサイズ感

HUAWEI Mate 9の詳細レビュー 5.9インチだけど片手で楽に持てるサイズ感

HUAWEIの最新モデル、HUAWEI Mate 9を購入したので早速レビューです。 まだ1ShopmobileやExpansys、GearBestなどのECサイトには入荷していなかったので、今回...

(追記:iOS10.1から消せなくなりました)iPhone 7のシャッター音を消す方法

(追記:iOS10.1から消せなくなりました)iPhone 7のシャッター音を消す方法

※2016/10/25追記:iOS10.1へのアップデートで、下記の無音バグは修正されてしまいました。 下記の方法ではシャッター音の無音化は行えません。 必要なら、無音で写真が撮れる代替えアプリ...

海外版の5.5インチZenFone 3、ZE552KLをレビュー 日本版の5.5インチとは仕様が違います

海外版の5.5インチZenFone 3、ZE552KLをレビュー 日本版の5.5インチとは仕様が違います

中国のECサイト GearBestから5.5インチ版のZenFone 3 ZE552KLを提供していただいたので、さっそくレビューしたいと思います。 なお、5.2インチ版 ZE520KLは下記で...

MENU

back to top