WordPressのコメント本文へ画像をアップロードできるようにするプラグイン「Comment Images Reloaded」

公開日:2017年3月6日 コミュニケーション コンテンツ追加 画像・動画
Knowledge Base Wordpress ディスカッション
Wordpressのコメント欄といえば「名前」「メールアドレス」「ウェブサイト」とともにあるのが「コメントの本文」。標準の状態ではこの部分はテキストとhtmlタグが使えるようになっています。

まあ、書かれていることに対してのコメントなのですからこんなもん??かもしれません。でも、何か技術的な情報に対してコメント欄を使って質問されたり、共感するコメントで「こんな風だよ~」と画像を付けられるようになっていたりすると単なるコメント以上のコミュニケーション機能として使えるようになりますね。

「Comment Images Reloaded」はコメント欄本文へ画像のアップロードができるようにするプラグイン。もちろん巨大なファイルがどんどんアップロードできないように画像の数や1枚当たりの大きさなども指定できるようになっています。

これを使えばペットのかわいさ自慢を行うサイトなど、通常であればユーザー登録してもらってバックエンドから投稿してもらう、プラグインなどを使ってフロントエンドから投稿してもらう機能を追加するといったサイトもコメント欄を使って簡単に作れるようになりますね。

そしてコメント欄にはもう一つ、返信機能が最初から備わっていますから、掲示板の代わりとしても活用できるようになるのもうれしいところです。

この「フロントエンドからの投稿」「ユーザー登録」「掲示板機能」という3つの機能はそれぞれプラグインを使えば実装することはできても、デザインを統一したり、ルールを設定したりするのが結構大変だったりして結局いい加減な形で追加されたり、途中で挫折したりすることの多い機能です。

コメント欄はユーザー登録なしでも投稿できますし、完全にフロントエンドからの投稿機能ですし、最初からテーマの中でいい感じに表示できるようになっていますし、返信機能もありますから、ここに画像のアップロード機能が加われば・・・コメント欄の新しい使い方が見えてきそうですね。

【Comment Images Reloaded】プラグインの基本的な機能・できること

  1. コメント欄へ画像のアップロードができる機能を追加
  2. アップロードできる画像の数やサイズを制限
  3. 表示する画像サイズを指定できる
この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. 有料版と無料版がある場合、テストは原則無料版のみで実施しています
  4. テスト環境については本文中に記載しています
  5. 使用方法で紹介しているショートコードやコードなどをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

【Comment Images Reloaded】プラグインの設定画面や表示の日本語化と翻訳

当サイトで私が翻訳した【Comment Images Reloaded】プラグインの日本語化ファイルを配布しています。

翻訳ファイルは

からダウンロードできます(ダウンロードの方法や日本語の適用方法なども解説しています)

翻訳することで設定が容易になり、重要な項目の設定漏れも少なくなりますから日本語化をお勧めします。

【Comment Images Reloaded】プラグインのインストールと設定

インストール方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

を参照ください

【Comment Images Reloaded】プラグインの基本的な使い方

設定はダッシュボードから「設定」→「Comment Images Reloaded」で行います

項目は

  1. 画像の大きさ
  2. アップロードできる画像の数
  3. 最大画像サイズ
  4. アップロードボタン前に表示する文字列
  5. 画像の拡大/Magnific Popup jQuery pluginを使うことで画像の拡大が有効になります

などです。また、設定画面で「全て無効にする」にチェックを入れるとこの機能を停止してコメント欄に表示されないようにすることができます。

【Comment Images Reloaded】プラグインの便利な使い方・カスタマイズ方法など

より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、Wordpressのプラグイン公式配布ページには書かれていない事柄などを紹介します。

コメントフォームの任意の場所へアップロードボタンを追加する方法

このプラグインについてコメントにて質問いただいた内容です。コメント欄へ画像アップロードを追加するという目的のプラグインなので当然標準のコメント欄下へ画像アップロードのボタンが表示されてしまいますね。これを別の場所へ移動できないか?というものです。

この方法についてはプラグインの公式ページに説明が書かれていますがちょっと端折られていて分かりにくいので詳しく説明していきます。

手順1 コメントフォームを置き換える

コメントフォームはWordpressの基本フォームを呼び出しているだけのテーマが多いので、テーマの中で「<?php comment_form(); ?>」と書かれている場所を見つけます。大抵はcomment.phpなどというファイルに書かれています。

これではバクッとコメントフォーム自体が呼び出されてしまうので、元々コメントフォームを構成しているコードと置き換えます。ちょっと長いですが、

<div id=”testcomment” class=”comment-respond”>
<h3 id=”reply-title” class=”comment-reply-title”>コメントを残す <small><a rel=”nofollow” id=”cancel-comment-reply-link” href=”/?p=1#respond” style=”display:none;”>コメントをキャンセル</a></small></h3>
<form action=”http://example.com/wp-comments-post.php” method=”post” id=”commentform” class=”comment-form” novalidate>
<p class=”comment-notes”>メールアドレスが公開されることはありません。 <span class=”required”>*</span> が付いている欄は必須項目です</p>
<p class=”comment-form-author”>
<label for=”author”>名前 <span class=”required”>*</span></label>
<input id=”author” name=”author” type=”text” value=”” size=”30″ aria-required=’true’ />
</p>
<p class=”comment-form-email”>
<label for=”email”>メールアドレス <span class=”required”>*</span></label>
<input id=”email” name=”email” type=”email” value=”” size=”30″ aria-required=’true’ />
</p>
<p class=”comment-form-url”>
<label for=”url”>ウェブサイト</label>
<input id=”url” name=”url” type=”url” value=”” size=”30″ />
</p>
<p class=”comment-form-comment”>
<label for=”comment”>コメント</label>
<textarea id=”comment” name=”comment” cols=”45″ rows=”8″ aria-required=”true”></textarea>
</p>
<p class=”form-allowed-tags”>
次の<abbr title=”HyperText Markup Language”>HTML</abbr> タグと属性が使えます: <code><a href="" title=""> <abbr title=""> <acronym title=""> <b> <div cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> </code>
</p>
<p class=”form-submit”>
<input name=”submit” type=”submit” id=”submit” value=”コメントを送信” />
<input type=’hidden’ name=’comment_post_ID’ value=’1′ id=’comment_post_ID’ />
<input type=’hidden’ name=’comment_parent’ id=’comment_parent’ value=’0′ />
</p>
</form>
</div>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

これがコメントフォームのすべての要素になります。「<?php comment_form(); ?>」の場所へそのままコピペすると表示できます(環境によりますからテストしてから実装してくださいね)

プラグインの設定項目を変更する

ダッシュボードから「設定」→「設定」→「Comment Images Reloaded」を開きます。

英語のままだと「Upload file input」の右にある「Check it to disable automatic show file upload field」にチェックを入れます

これでコメントフォーム下(送信ボタン下)へ自動挿入されるのが解除されます

任意の場所にアップロード項目を追加する

自動挿入を解除したら、上のコードの中でアップロードボタンを挿入したい場所へ

<p><?php if (function_exists(“the_cir_upload_field”)) { the_cir_upload_field(); } ?></p>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

を挿入すればOKです。

例えば送信の真上に入れるなら上のコードの

<p><?php if (function_exists(“the_cir_upload_field”)) { the_cir_upload_field(); } ?></p>
<p class=”form-submit”>
<input name=”submit” type=”submit” id=”submit” value=”コメントを送信” />
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

とすればいいわけです。

前述しましたが、使っているテーマごとにどこでコメント欄の表示をさせているのか、どんな要素で構成されているのかが異なりますので、実際のサイトでテストしていただくしかありません。

元に戻す自身がなければ断念してそのまま使用することをおすすめします

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

1,944 円 (税込) 送料込
<p>WordPressによるWebサイト作成の基本を一から学べる書籍です。1日8時間の勤務時間内に読むことができる程度に解説内容を絞り込み,初心者・新人が最初の1冊目として読むのにふさわしい内容となっています。本書ではローカル環境にWordPressをインストールしてWebサイト..
サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

3,456 円 (税込) 送料込
<p>プラグインの開発から運用までを網羅</p> <p>※この電子書籍は固定レイアウト型で配信されております。固定レイアウト型は文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。</p> <p>CMSのデファクト・スタン..
楽天ウェブサービスセンターCS Shop

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報