本文にスキップ

WEB技術

【jQuery】ファイルへのリンクにファイル名も表示させる

公開日:更新日:2020.07.14

WordPressでPDF等のファイルへのリンクを貼り付けた時に、アップロード後に付けたタイトルと共に、「アップロード時のファイル名」も自動で表示させたいという時の解決方法です。

↓何もしない場合のリンクはこんな感じで、
猫との暮らし

↓設定した後はこんな感じで表示されます。(アップロード時のファイル名が出る)
猫との暮らし(CatsLife.pdf)

通常、PDFなどにリンクを貼った場合、ウェブサイトへのリンクと同じ様な表示になるのでバージョン5.0以降の新しいブロックエディターではリンクにボタンが付けられる様になりましたね。

しかしカスタムフィールドを使ってエディターを追加している場合はこの機能が使えないのと、表示されているタイトルと実際にダウンロードするファイル名が一致しないので「何をダウンロードしているのか分からない。紛らわしい」というお話を頂きました。日本語あるある~!

悩みました。
できればプラグインなしで解決したい。
pdf、xlsx、xls、docx、doc、zipの時だけファイル名を併記させたい。
通常のエディターでもカスタムフィールドでも対応させたい!

jQueryありがとう。

//File Extention
 function addFile(){
   $("a[href$='.pdf'],a[href$='.xlsx'],a[href$='.xls'],a[href$='.docx'],a[href$='.doc'],a[href$='.zip']").append(function() {
   var url = $(this).attr("href");
   var filename_ex = url.match(".+/(.+?)([\?#;].*)?$")[1];
   return '('+ filename_ex +')'
   });
 }
 $(function(){addFile();});

ここへ至るまでに参考にさせていただいたサイトはこちらです。
ありがとうございました。

http://www.90zbear.com/web-develop/js/421/

jQueryでリンク先PDFのキャッシュ対策をするスニペット | 90zbear.com

https://qiita.com/gorton/items/ded2d128ded9c9f732e8

URLからファイル名を取得する正規表現 (Qiita:@gortonさん)

コメントを残す

© 2010 ebicology : エビコロジー.