WordPressフォーラムプラグイン「wpForo」の添付画像をイメージリンクとして表示するカスタマイズ方法

僕は、WordPressでフォーラムを運営するときwpForoプラグインを利用しています。

このwpForo、デフォルトで画像やファイルを添付できる機能がついているので、不具合の状態を視覚的に見たい時には、非常に重宝しています。

ただ、WordPressデフォルト状態だと、添付したファイルは、画像でもファイルでもすべてテキストリンクとして以下のように表示されます。

wpForo添付ファイルのデフォルト動作。

ただ、これだと内容がよく分かりません。画像を見るにしても「クリックする」という一手間が必要になるので少し面倒です。

なので、この状態を解消すべく「画像ファイルのみイメージリンクとして表示する」という以下のようなカスタマイズを行うことにしました。

イメージリンクでwpForoの添付画像表示

これだと、画像の中身が一目瞭然なので、フォーラムユーザーの利便性も上がるのではないかと思います。

スポンサーリンク
レクタングル(大)広告

カスタマイズの主な手順

カスタマイズに必要な手順は以下の2手順のみ。

  1. functions.phpにコードをコピペ
  2. style.cssにコードをコピペ

2回のコピペで実装できる、比較的簡単なカスタマイズかと思います。

functions.phpにコードをコピペ

まずは、テーマ(子テーマ)のfunctions.phpに以下のコードを追記します。

//wpForoで添付画像をイメージリンクにする
add_filter('wpforo_body_text_filter', function ($text){
  $text = preg_replace('#(<div id="wpfa-\d+?" class="wpforo-attached-file"><a class="wpforo-default-attachment" .*?href="(.+?(\.jpe?g|\.png|\.gif)").*?>).+?(</a></div>)#i', '$1<i class="fas fa-paperclip paperclip"></i><img alt="" src="$2" />$4', $text);
  return $text;
});

wpForoの添付ファイルをカスタマイズするには、wpforo_body_text_filterという「返信本文」を制御するためのフィルターフックを利用します。

「添付ファイル」用のフックはないのか?と探したのですが、それ専用のものは見当たりませんでした。

ですのでwpforo_body_text_filterフックで「返信本文全体となるタグ」を取得して、そのタグを置換処理して返してやるしかないようです。

画像は、jpeg、png、gifのみに対応しています。

style.cssにコードをコピペ

次にテーマ(子テーマ)のstyle.cssに以下を追記します。

/*wpForo添付イメージリンク用*/
.wpforo-attached-file{
  position: relative;
}

.wpforo-attached-file .paperclip{
  position: absolute;
  font-size: 40px !important;
  opacity: 0.6;
  top: -12px;
  left: -13px;
}

これは、「添付ファイルテキストリンク」から「添付ファイルイメージリンク」を変換した際のスタイリング用です。

動作確認

これで、通常画像を添付した時でも以下のようなテキストリンクだったのが

コード画像を添付したテキストリンク

こんな感じで、ファーストビューで何となく分かりやすくなります。

コード画像を添付したイメージリンク

画像ファイル以外を添付した場合は、以前の仕様通りにテキストリンクで表示されます。

以下は、zipファイルを添付した場合。

zipファイルを添付した時。

まとめ

こんな感じで、wpForoに画像ファイルが添付された場合は、イメージリンクで表示された方が、ユーザーの利便性が上がるのではないかと思います。

多くの人の場合「文字列ばかりの解説本」を読むより、「画像を多めに使って説明してある解説本」の方が読みやすいかと思います。

それと同様に、フォーラムを開いた状態で、画像が少しでも多く目に入るようになると、多少なりとも抵抗感は薄れるのではないかなと。

サイト wpForo Forum – WordPress プラグイン | WordPress.org