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

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

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

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

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

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

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

カスタマイズの主な手順

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

functions.phpにコードをコピペ
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;
}

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