لینک دانلود مستقیم لینکی است که دانلود فایل را با کلیک کردن روی آن به جای پیوند دادن به آن در پنجره مرورگر شما شروع می کند. ایجاد یک لینک یا دکمه دانلود مستقیم معمولاً مستلزم افزودن PHP پیشرفته به سمت سرور، اصلاح فایل htaccess. و/یا جاوا اسکریپت است. اگر ندانید چه کاری انجام می دهید، این می تواند خطرات امنیتی ایجاد کند.
HTML5 اخیرا معرفی شده است ویژگی دانلود به عنوان یک راه حل ساده تر برای دانلود مستقیم. ویژگی سعی می کند دو کار اصلی را انجام دهد: 1) ویژگی نشان می دهد که پیوند هدف با کلیک بارگیری می شود و 2) مقدار ویژگی به عنوان نام فایل دانلود شده عمل می کند.
این ویژگی زمانی مفید است که در موقعیتی لازم است فایل را برای مشاهده بعدی ذخیره کنید. ممکن است بخواهید یک دانلود برای یک پیشنهاد کتاب الکترونیکی، یک فایل رسانه ای خریداری شده یا به سادگی یک تصویر با کیفیت بالا ایجاد کنید.
امروز به شما نشان خواهم داد که چگونه یک ویژگی دانلود را به یک لینک یا دکمه اضافه کنید تا فایل را مستقیماً در رایانه کاربر دانلود کنید.
افزودن ویژگی دانلود
ساختار یک لینک با ویژگی دانلود بسیار ساده است. فقط با ویژگی “href” خود شروع کنید که آدرس فایل شما است < a > “دانلود” را به برچسب اضافه کنید.
<a href="/files/download-file.pdf" download >Download Link</a>
افزودن یک مقدار مشخصه آپلود (یا نام فایل).
ویژگی آپلود همچنین به شما امکان می دهد نام فایلی غیر از نام فایل اصلی را مشخص کنید. فقط نام جدید را به عنوان مقدار مشخصه دانلود اضافه کنید:
<a href="/files/download-file.pdf" download="newname" >Download Link</a>
در مثال بالا، زمانی که کاربر روی لینک دانلود کلیک می کند، فایل به جای نام فایل اصلی «download-file.pdf» با نام «newname» در رایانه او ذخیره می شود. این زمانی مفید است که فایلی با نام طولانی یا رشته کاراکتری دارید. مقدار نام فایل جدید یک نام فایل ساده و کاربرپسند برای استفاده به جای نام فایل گیج کننده تر ارائه می دهد. همچنین، در بیشتر موارد نیازی به افزودن پسوند فایل (به عنوان مثال .pdf) به فایل جدید نیست. نام فایل، زیرا مرورگر به طور خودکار پسوند را به فایل اضافه می کند.
افزودن پشتیبان ویژگی هدف
از آنجایی که ویژگی دانلود هنوز توسط همه مرورگرها پشتیبانی نمی شود، بهتر است ویژگی target=”_blank” را به لینک خود اضافه کنید. با این کار لینک در مرورگر دیگری باز می شود. این همیشه هنگام پیوند دادن به یک فایل یک روش خوب است. بنابراین اگر مرورگر از ویژگی دانلود پشتیبانی نمی کند، فقط فایل را در یک پنجره جدید باز می کند که گویی ویژگی دانلود را ندارد. علاوه بر این، اگر مرورگر از ویژگی دانلود پشتیبانی کند، تصویر را بدون باز کردن پنجره جدید دانلود می کند. بنابراین این یک گزینه بازگشتی خوب است.
<a href="/files/download-file.pdf" download="newname" target="_blank" >Download Link</a>
یک راه سریع برای تبدیل پیوند خود به یک دکمه Divi این است که کلاس “et_pb_button” را به پیوند خود اضافه کنید. کلاس CSS داخلی را در Divi اعمال خواهد کرد. بدنه دکمه رنگ پیوند شما را به ارث می برد، بنابراین اگر می خواهید سبک دکمه را تغییر دهید، باید یک استایل درون خطی به پیوند خود اضافه کنید یا یک کلاس اضافی به پیوند اضافه کنید و با استفاده از CSS به آن استایل دهید.
در اینجا یک نمونه از لینک دانلود مستقیم ما با کلاس “et_pb_button” اضافه شده است.
<a href="/files/download-file.pdf" download="newname" target="_blank" class="et_pb_button" >Download Link</a>
نمونه ای از ویژگی سبک درون خطی که رنگ دکمه را به نارنجی تغییر می دهد:
<a href="/files/download-file.pdf" download="newname" target="_blank" class="et_pb_button" style="color: #dd9933;">Download Link</a>
برای افزودن قابلیت دانلود مستقیم به ماژول دکمه، ابتدا باید دکمه ای ایجاد کنید که معمولاً به فایل شما پیوند می دهد.
ماژول دکمه را از داخل Divi Builder وارد کنید.
تنظیمات زیر را در تنظیمات ماژول دکمه به‌روزرسانی کنید:
URL را به دکمه اضافه کنید (این باید آدرس کامل فایل برای دانلود باشد)
آدرس اینترنتی باز می شود: در برگه جدید (این به عنوان پشتیبان مهم است)
اضافه کردن متن دکمه
در بخش Custom CSS، یک کلاس CSS به نام “et-download-button” اضافه کنید. این کلاس برای هدف قرار دادن دکمه با jQuery و افزودن ویژگی دانلود استفاده می شود.
ذخیره و خروج
دکمه جدید خود را تست کنید.
در حال حاضر، دکمه فقط فایل را در یک پنجره جدید باز می کند. برای اضافه کردن ویژگی دانلود به لینک دکمه، باید مقداری جی کوئری اضافه کنیم.
اضافه کردن jQuery
برای افزودن ویژگی دانلود به ماژول Button، می‌توانیم مقداری jQuery اضافه کنیم تا ویژگی دانلود را با یک کلاس خاص به لینک ماژول Button اضافه کنیم. برای این مثال، ویژگی دانلود را با کلاس CSS “et_download-button” به ماژول Button اضافه می کنیم (همان کلاسی که قبلا به ماژول Button اضافه کردیم).
برای افزودن jQuery به Divi → Theme Options بروید. در برگه ادغام ها، کد زیر را در کادر متنی «افزودن کد به سربرگ وبلاگ خود» وارد کنید:
<script>
jQuery(document).ready(function() {
var downloadButton = jQuery('.et-download-button');
downloadButton.each(function(index) {
jQuery(this).attr('download', '');
});
});
</script>
این کد ویژگی دانلود را به هر پیوند ایجاد شده توسط ماژول دکمه با کلاس “et_download_button” اضافه می کند. با این حال، این کد یک مقدار نام فایل جدید به ویژگی آپلود که جایگزین نام فایل اصلی می شود، اضافه نمی کند. من آن را کنار گذاشتم تا بتوانید کلاس “et_download_button” را به ماژول های دکمه آینده اضافه کنید بدون اینکه به هر فایل دانلودی همان نام فایل جدید بدهید.
اگر می خواهید یک مقدار نام فایل جدید به ماژول دکمه خود اضافه کنید، می توانید آن را به کد jQuery اضافه کنید. برای مثال، اگر می‌خواستم ماژول دکمه‌ام فایل آپلود من را به “imagefile” تغییر نام دهد، به جای آن از این قطعه جی کوئری استفاده می‌کردم:
<script>
jQuery(document).ready(function() {
var downloadButton = jQuery('.et-download-button');
downloadButton.each(function(index) {
jQuery(this).attr('download', 'image-file');
});
});
</script>
اکنون با کلیک بر روی دکمه، فایل دانلود شده (صرف نظر از نام اصلی آن) “فایل تصویر” نامیده می شود. همانطور که قبلاً اشاره کردم، مرورگر به طور خودکار پسوند فایل را شناسایی و اضافه می کند.
این چنین است. اکنون می توانید با استفاده از ماژول دکمه، ویژگی دانلود مستقیم را به هر یک از دکمه های خود اضافه کنید.
پشتیبانی از مرورگر فعلی
از زمان نگارش این مقاله، ویژگی دانلود توسط Safari (iOS و OXS)، Opera Mini یا Internet Explorer پشتیبانی نمی‌شود. آن را بررسی کنید پشتیبانی مرورگر مدرن از ویژگی دانلود.
به دلایل امنیتی، فایرفاکس فقط از لینک های دانلودی از همان مبدا پشتیبانی می کند، به این معنی که نمی توانید مستقیماً لینک هایی را که روی نام دامنه یا سرورهای مختلف میزبانی شده اند دانلود کنید.
بازگشت به عقب
از آنجایی که ویژگی دانلود فاقد پشتیبانی گسترده مرورگر است، پیشنهاد می کنم یک گزینه بازگشتی برای مرورگرهای دیگر پیاده سازی کنید. نکته مهم در مورد ویژگی دانلود این است که پیوند همچنان در مرورگرهایی که از آن پشتیبانی نمی کنند کار می کند. همچنان به صورت عادی به فایل لینک می شود. بنابراین من پیشنهاد می کنم از “target=_blank” (ویژگی که پیوند شما را در یک پنجره یا تب جدید باز می کند) در ساختار پیوند خود استفاده کنید. بنابراین اگر مرورگر از Download Attribute پشتیبانی نکند، فایل را در تب دیگری باز می کند.
استفاده از فایل های فشرده
اگر به دلیل پشتیبانی ناسازگار مرورگر کاملاً مخالف ویژگی دانلود هستید، می‌توانید فایل دانلودی خود را در یک فایل فشرده فشرده کنید، که معمولاً بازدیدکننده را مجبور می‌کند به جای مشاهده فایل، آن را دانلود کند.
بسته به مرورگر شما، لینک دانلود مستقیم شما ممکن است یک “چه می خواهید با این فایل انجام دهید؟” باشد. ممکن است یک پنجره بازشو بارگیری را راه اندازی کند که چیزی در امتداد این موارد می پرسد این به این معنی نیست که لینک کار نمی کند. اطلاع رسانی به دلایل امنیتی ضروری است. در اینجا نمونه ای از یک پنجره بازشو دانلود شده است که روی لینک دانلود مستقیم یک فایل pdf کلیک می کنید:
افکار نهایی
من می دانم که راه حل های سنتی و پیچیده تری برای دانلودهای اجباری وجود دارد. من تصمیم گرفتم آن را ساده نگه دارم و راه حلی را بدون زحمت با راه حل های پیشرفته تر php یا js ارائه دهم.
افزودن ویژگی دانلود به لینک < a > به سادگی اضافه کردن “دانلود” به برچسب. و مقدار اختیاری می تواند نام فایل را همانطور که می خواهید تنظیم کند.
به علاوه، افزودن قابلیت به ماژول دکمه Divi با کمی جی کوئری به سادگی افزودن یک کلاس سفارشی به ماژول است.
اگرچه ویژگی دانلود هنوز به طور کامل توسط همه مرورگرها پشتیبانی نمی شود، اما هنوز یک راه حل ساده و کاربردی است. از آنجایی که این ویژگی توسط مرورگرهای پشتیبانی نشده نادیده گرفته می شود، پیوند همچنان کار می کند و در پنجره مرورگر شما باز می شود.
امیدواریم این منبع مفیدی برای مشتری بعدی باشد که لینک دانلود مستقیم می خواهد.
مشتاقانه منتظر شنیدن نظرات شما هستم.