カスタムフィールドにアップロードしたファイルをダウンロードするUIを、本文内に追加したい案件がありました。
- クライアント側で定期的にPDFファイルを差し替える必要がある
- ボタンのUIは、aタグにclassを振ることで実装しており、差し替えの際にaタグに「class=”button”」を追加してほしい、などとはもちろんお願いできない
という理由からです。
Advanced Custom Fieldの「ファイル」フォーマットで返り値をファイルのURLに指定
カスタムフィールドを使用するためのUIにはおなじみ、「Advanced Custom Field」を使用しています。
返り値をファイルのURLに指定します。
カスタムフィールドを使用していると、
のようなショートコードは使えますが、これだけだと、URLが表示されるだけです。
function.phpに以下のコードを追加
「entry-pdf」というカスタムフィールド名で投稿しています。
//-----------------------------------------------
// ショートコードで申込書PDFファイルを呼び出す
//-----------------------------------------------
function inpostEntryPDF() {
$field = get_post_meta(get_the_ID(), 'entry-pdf', true);
$field = esc_url(wp_get_attachment_url($field));
if($field){
$html = '<a href="'.$field.'" target="_blank" class="button large">申込書ダウンロード</a>';
}
return $html;
}
add_shortcode('viewEntryPDF', 'inpostEntryPDF');
本文内にショートコードを追加
[viewEntryPDF]
これで以下のようなUIから該当のファイルを添付すると・・・
指定した位置でダウンロードボタンを配置することができます。
管理が楽ですね♪