نوشته‌های بلاگ

دکمه دانلود پلیر وردپرس (در 2 قدم و به صورت خودکار)

شهریور 8, 1400 آموزش وردپرس, وب, وبلاگ توسط منتظر

آموزش نمایش و افزودن خودکار دکمه دانلود پلیر وردپرس

پلیر وردپرس (یا همون نمایش دهنده و پخش کننده فایل های صوتی و تصویری) یکی از ساده ترین، سبک ترین و قدرتمندترین ابزارها برای نمایش و پخش فایل صوتی در وردپرس می باشد که در هسته خود وردپرس وجود دارد.

اما یکی از دردسرهای این پخش کننده اینه که دکمه دانلود فایل صوتی رو به صورت پیش فرض نداره. برای حل این مشکل، شما 2 راه حل دارید:

به صورت مجزا برای هر فایل صوتی، دکمه دانلود قرار بدین (که کار رو سخت و طولانی تر میکنه و با تغییر لینک فایل صوتی نیاز هست لینک دکمه آپدیت بشه)
از افزونه های دیگه استفاده کنید (عموما کار باهاشون خیلی سخت‌تر هست و باعث سنگین تر شدن سایت و افزایش زمان بارگذاری خواهد شد. و البته کلی ویژگی بیشتر دارند که شاید شما بهشون نیازی نداشته باشین)

راه حل سومی هم هست که شما به راحتی و با چند خط کد میتوانید تنظیم کنید که دکمه دانلود به صورت خودکار در کنار تمام فایل های صوتی وب سایتتون نمایش داده بشه.

پیشنهاد میکنم قبل از ادامه این آموزش، مقاله ” افزودن کد دلخواه به وردپرس با افزونه Code Snippets ” رو بخوانید. چون در ادامه بهتون کمک میکنه تا کیفیت و دقت کارتون خیلی بیشتر بشه.

افزودن خودکار دکمه دانلود پلیر وردپرس در 2 قدم:

قدم اول:

کد PHP زیر را به قالب خودتون اضافه کنید:

دقت داشته باشید، شما بجای کلمه “دانلود” هر چیز دیگه ای میتوانید بنویسید، اگر قالب شما از فونت آیکون پشتیبانی میکند، نام آیکون را بجای fa fa-download قرار دهید.

if ( ! defined( 'WPINC' ) ) {
	die;
}


add_filter( 'wp_audio_shortcode', 'ast_audio_shortcode_enhancer', 10, 5 );
function ast_audio_shortcode_enhancer( $html, $atts, $audio, $post_id, $library ) {
    $audio_types = array( 'mp3', 'ogg', 'wma', 'm4a', 'wav' );

    // Use the first audio type that has data.
    foreach ( $audio_types as $extension ) {
        if ( strlen( $atts[ $extension ] ) ) {
            return $html . sprintf( '<button class="btn-sound" type="button"><a href="%s" download>&nbsp;<i class="fa fa-download" style="color:#fff"></i>&nbsp;دانلود&nbsp;</a></button>', $atts[ $extension ] );
            break;
        }
    }

    // Otherwise return the original html.
    return $html;
}

قدم دوم:

کد CSS زیر را به قالب خودتون اضافه کنید:

این بخش جهت نمایش بهتر دکمه دانلود و پلیر می باشد که میتوانید رنگ بندی آن را از باکس زیر تغییر دهید.

مقدار background-color:#00bf80; رنگ پس زمینه دکمه و مقدار color: #fff رنگ نوشته روی دکمه می باشد.

.mejs-container {direction: ltr;}
.btn-sound{background-color:#00bf80;height:40px;width:15%;}
.btn-sound a{color: #fff !important;}
.mejs-container.mejs-container-keyboard-inactive.wp-audio-shortcode.mejs-audio{max-width: 84% !important;float: left;}
@media (max-width:767px) {
.btn-sound{font-size:25px;;width:auto; padding:0 20px; margin: 70px auto 20px;display:block;}
.mejs-container.mejs-container-keyboard-inactive.wp-audio-shortcode.mejs-audio{max-width: 100% !important;float: left;}
}

و نتیجه نهایی به این صورت می شود:

برچسب ها: آموزش وردپرس ودرپرس

نوشته های مرتبط

دکمه دانلود پلیر وردپرس (در 2 قدم و به صورت خودکار)

آموزش نمایش و افزودن خودکار دکمه دانلود پلیر وردپرس

افزودن خودکار دکمه دانلود پلیر وردپرس در 2 قدم:

خبرنامه پیامکی