カスタムフィールドにアップロードしたファイルをダウンロードする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から該当のファイルを添付すると・・・

指定した位置でダウンロードボタンを配置することができます。

管理が楽ですね♪