固定ページでファイルサイズを取得しダウンロードボタン設置

固定ページでACFを使用してファイルサイズを取得してダウンロードボタンを設置

ACF = advanced custom fields

function get_file_size($file){
    $mfile = str_replace( esc_url(home_url('/')),ABSPATH,$file );
    if ( is_file( $mfile ) ){
        $filesize = size_format( filesize( $mfile ) );
        return $filesize;
    }
}
function get_the_file($page_slug,$field_slug){

    $tdir = get_template_directory_uri();
    $page_id = get_page_by_path($page_slug);
    $page_id = $page_id->ID;
    $file_args = get_field($field_slug,$page_id);
    if ($file_args) {
        $file_url = $file_args['url'];
        $file_title = $file_args['title'];
        $file_data_size = get_file_size($file_url);
$html = <<< EOM
<p class="linkBlock">
<a href="{$file_url}" target="_blank">
<img src="{$tdir}/images/pdf_icon.png" alt="pdf">
<span>{$file_title}をダウンロード</span>
<span class="fileSize">
{$file_data_size}
</span>
</a>
</p>
EOM;
echo $html;
    }
    return false;
}

ページslug、カスタムフィールドを指定して

<?php get_the_file($page_slug,$field_slug); ?>

style

.linkBlock{
    width: 100%;
    a{
        margin: auto;
        padding: 0 30px 0 0;
        width: 440px;
        height: 60px;
        text-decoration: none;
        background: #ffae00;
        color: #fff;
        position: relative;
        text-align:right;
        line-height: 60px;
        display: block;
        position: relative;
        &:hover{
            color: #fff;
        }
        &:visited{
            color: #f0f0f0;
        }
        &:before{
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 0;
            border-width: 0 0 15px 15px;
            border-style: solid;
            border-color: #ce7706;
            border-bottom-color: transparent;
        }
        &:after{
            content: " ";
            position: absolute;
            bottom: -0;
            right: 0;
            width: 0;
            height: 0;
            border-width: 0 0 15px 15px;
            border-style: solid;
            border-color:transparent ;
            border-bottom-color: #ce7706;
        }
        &>img{
            margin-top:-20px;
            width:33px;
            height:40px;
            position: absolute;
            top: 50%;
            left: 50px;
        }
        span{
            margin:0 auto;
            line-height: 60px;
            &:first-child{
                margin:0 0 0 50px;
            }
        }
    }
    .fileSize{
        margin:0 0 0 30px;
    }

}