【WordPress】記事内でリンクしたPDFなどのファイル容量を自動表示する(プラグイン不使用)

公的機関のサイトを構築する際などに、稀に「リンクしたファイルのファイル容量を併記してほしい」という要望がある場合があります。

そんなときに簡単なスニペットで実装できるコードをご紹介。

やりたいこと

下の図は、文字列にPDFへのリンクを設定したものですが、多くの場合は左のように単純に色が変わるといった形で、デフォルトもしくはCSSによる設定がなされていると思います。

今回は、右のように同じリンク設定でも[容量]が文字列としてオシリに追加され、PDFアイコンまで表示されるようにしてみましょう。

PDFリンクにファイル容量自動表示

まずはPDFアイコンの自動追加

こちらは個人的にはメンテナンス性を考慮してjavascriptとCSSで実装していますが、後述するPHPでまとめてやってしまってもかまわないかと思います。

javascript

まだまだ使われているjqueryを使います。ページのロードが完了したタイミングで、ソースの中からpdfへリンクしている箇所を見つけ、「.pdfLink」というクラスをaタグに追加しています。

こちらは、全ページで共有している外部jsなどに書き込んでおくと良いでしょう。

$(document).ready(function(){
    $('a[href$=".pdf"]').addClass('pdfLink');
    $('a[href$=".pdf\n"]').addClass('pdfLink');
});

CSS

こちらも共有しているcommon.cssなどに追加しておきます。アイコンはAdobeでダウンロードできますよ。

.pdfLink {
    background: url(icon_pdf.png) no-repeat right center;
    padding-right: 22px;
    margin-right: 5px;
    display: inline-block;
}

aタグに対して付与するのですが、右側に余白を設けてそのスペースにアイコンを表示させます。リンク文字列途中での改行を回避したり、あとに続く文章がある場合に右側に少し余白を設けるためにdisplay: inline-blockにしてmarginを設定しています。

この時点でこんな感じになりました。

ジャックピニャコラーダの部分ですね。

本題の自動ファイル容量表示

こちらはプラグインなどは使用せず、テーマファイルのfunction.phpにコードを追加します。

function.php(コピペでOK)

dispFileSizeという関数を作り、フィルターフック「the_content」で実行させています。

3行目はファイルにリンクしている箇所を拾ってくるための正規表現ですが、pdf以外もついでに色々と追加しています。

続いて検索置換でコールバック関数を利用します。先程のパターンを元に検索し、ファイルのURL を取得していますが、8行目でURLはABSPATH(サーバパス)に変換しています。

これは次の行でPHPの関数「filesize()」を使う際にABSPATHでないと容量を取得できないためです。

容量表示のための単位についてはWordPressの関数「size_format()」を使ってフォーマットしています。

最後に全部くっつけて置換して終わりですね。

function dispFileSize($content) {
    global $post;
    $pattern = "/<a(.*?)href=('|\")([\w\/:%#\$&\?\(\)~\.=\+\-]+?).(pdf|doc|docx|xls|xlsx|rtf)('|\")(.*?)>(.*?)<\/a>/";
    echo preg_replace_callback(
        $pattern,
        function ( $matches ) {
            $fileURL = $matches[3].'.'.$matches[4];
            $filePath = str_replace( home_url('/'),ABSPATH,$fileURL );
            $pubSize = size_format( filesize( $filePath ) );
            return '<a'.$matches[1].'href='.$matches[2].$matches[3].'.'.$matches[4].$matches[5].$matches[6].'>'.$matches[7]."[".$pubSize.']';
        },
        $content
    );
}
add_filter('the_content', 'dispFileSize');

 

コードは短くシンプルなので簡単に設置できて希望の結果が得られると思います。

冒頭でも述べたように、アイコン表示もPHPに書いてしまって構わないと思いますが、わざわざアイコンを表示しなくても、文字だけで[PDF:123KB]と書いてしまってもいいかもしれません。

結果は以下のようになりました。

  • 実装は自己責任でお願いします。

関連記事

82 2
我が家の中学2年生の一人息子は、小学6年生の2学期末から3学期にかけて保健室登校をしていました。今は、友人にも恵まれ部活に熱中したりと中...
100 2
突然ですが私ホラー映画鑑賞をするのが趣味でして、今回は最近観た中でもかなり面白かった映画をご紹介します!※少々ネタバレを含みます。 映...
411 4
写真をイラスト風にしてみた。 前回はホワイトバランスについて書きました。 今回は写真をイラスト風に加工してみたいと思います。 ...
155 2
普段はサッカーに興味もない私ですが、夫と息子が大のサッカー好き。中でもヨーロッパのチームが好きで、もちろんサッカーゲーム(ウイニングイレ...
132 2
コロナ問題で外出自粛が叫ばれるようになって1年余。 職業柄、好きな旅行を封じた人、他県にいけなくなった人、家からほとんど出れなくな...
145 2
誰でもかかる"心の病気" 「ストレス社会」とも言われる現代では、およそ40人に1人の人が心の病気を抱えており、生涯を通じて5人に1人が...
183 2
一昔前は、名前は知っていてもなかなか手を出しづらかった(金銭的に?)アドビ社のPhotoshop、最近ではスマホやタブレットで気軽に利用...