【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]と書いてしまってもいいかもしれません。

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

  • 実装は自己責任でお願いします。
CCBot/2.0 (https://commoncrawl.org/faq/)   

関連記事

329 3
よくぞ金曜日までたどりつきました! 今回は「おもしろGIFアニメ集」好評?につき、これまで380個掲載したものの中から、特に面白い...
156 2
普段ホラー映画ばかり観る私、中でも好きなのがPOV(カメラの視線と登場人物の視線を一致させるようなカメラワークで撮影された作品)映画や、...
223 4
街なかを歩いていると、大きな建物の壁や屋上などで、大きな文字や写真が貼られた広告を目にします。 それを今回は、Photoshopで...
46 2
これまでホテルやレストラン・料亭での結婚式を中心に100組近くの披露宴司会を担当してきた40代女性MCの備忘録。披露宴の裏側やハプニング...
61 2
2021年最も日本で売れたバイク。それがホンダ「Rebel250」。 その台数はなんと大台にのって12,048台! 売れすぎです...
64 2
皆さんGWをいかがお過ごしでしょうか。 私はもちろんホラー映画を堪能しました。 そのホラー映画というのが、『トロール・ハンター』やア...
76 3
最近あまり使わなくなっていた映像用のカラーチェッカー(X-Rite ColorChecker Passport Video)の使い方を忘...