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. 使用方法で紹介しているショートコードやコードなどをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

WordPressの掲示板プラグインbbpressにユーザーランキング機能を追加するプラグイン「bbPress User Ranks Lite」

WordPressのメディアアップロード時に不要なサイズの画像が生成されるのを防ぐプラグイン「Stop Generating Image Sizes」

WordPressの掲示板プラグイン「bbpress」について細かい設定変更ができるプラグイン「bbPress Toolkit」


【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. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

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

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

これがコメントフォームのすべての要素になります。「<?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. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

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

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

を挿入すれば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のエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

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

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

とすればいいわけです。

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

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

Wordpressの本

Amazonの人気商品楽天市場の人気商品
いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..

1,738 円 (税込)
基本情報ジャンル建築・理工フォーマット本出版社インプレス発売日2019年07月ISBN9784295006664発売国日本サイズ・ページ280p 21×19cm関連キーワード 9784295006664 出荷目安の詳細はこちら>>楽天市場内検索 『在庫あり』表記について 
WordPressセキュリティ大全 [ 吉田哲也 ]

WordPressセキュリティ大全 [ 吉田哲也 ]

2,420 円 (税込) 送料込
吉田哲也 秀和システムワードプレスセキュリティタイゼン ヨシダテツヤ 発行年月:2019年10月18日 予約締切日:2019年06月19日 ページ数:224p サイズ:単行本 ISBN:9784798058900 吉田哲也(ヨシダテツヤ) 有限会社TY Planning代表取締役。webコンサルタント・上級ウェ..
楽天ウェブサービスセンター CS Shop
ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


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

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

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


【スポンサーリンク】


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

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

関連情報