كيفية إنشاء زر تنزيل مباشر (نقرة واحدة) في Divi باستخدام سمة التنزيل

رابط التنزيل المباشر هو رابط يبدأ في تنزيل الملف عند النقر بدلاً من الارتباط به في نافذة المتصفح. عادة ما يتطلب إنشاء رابط أو زر تنزيل مباشر إضافة PHP متقدمة على جانب الخادم وتعديل ملف htaccess و / أو جافا سكريبت. ما لم تكن تعرف ما تفعله ، فقد يشكل هذا بعض المخاطر الأمنية.

قدم HTML5 مؤخرًا سمة التنزيل كحل أكثر بساطة للتنزيل المباشر. تسعى السمة إلى إنجاز شيئين رئيسيين: 1) تحدد السمة الرابط الهدف الذي سيتم تنزيله عند النقر و 2) ستكون قيمة السمة بمثابة اسم الملف الذي تم تنزيله.

هذه الميزة مفيدة عندما يستدعي الموقف تخزين الملف لعرضه لاحقًا. قد ترغب في إنشاء تنزيل لعرض كتاب إلكتروني أو ملف وسائط تم شراؤه أو ببساطة صورة عالية الدقة.

سأوضح لك اليوم كيفية إضافة سمة تنزيل إلى ارتباط أو زر يسمح بتنزيل ملف مباشرة إلى كمبيوتر المستخدمين.

إنشاء زر تنزيل مباشر يدويًا

إضافة سمة التنزيل

يعتبر هيكل الرابط الذي يحتوي على سمة التنزيل واضحًا جدًا. ما عليك سوى إضافة "download" داخل علامة البداية <a> مع سمة "href" التي تحتوي على عنوان url لملفك.

<a href="/files/download-file.pdf" download >Download Link</a>

إضافة قيمة سمة التنزيل (أو اسم الملف)

تتيح لك سمة التنزيل أيضًا تعيين اسم ملف بخلاف اسم الملف الأصلي. ما عليك سوى إضافة الاسم الجديد كقيمة لسمة التنزيل:

<a href="/files/download-file.pdf" download="newname" >Download Link</a>

في المثال أعلاه ، عندما ينقر المستخدم لتنزيل الارتباط ، سيتم تخزين الملف على جهاز الكمبيوتر باسم "newname" بدلاً من اسم الملف الأصلي "download-file.pdf". يكون هذا مفيدًا عندما يكون لديك ملف باسم طويل أو سلسلة من الأحرف. ستوفر قيمة اسم الملف الجديد اسم ملف بسيطًا وسهل الاستخدام. لاستخدامه بدلاً من اسم الملف الأكثر إرباكًا .. أيضًا ، في معظم الحالات ، ليست هناك حاجة لإضافة امتداد الملف (مثل .pdf) إلى الملف الجديد اسم الملف لأن المتصفح سيضيف الامتداد تلقائيًا إلى الملف.

إضافة سمة الهدف الاحتياطية

نظرًا لأن سمة التنزيل لا تزال غير مدعومة من قبل جميع المتصفحات ، فمن المستحسن إضافة سمة الهدف = ”_ blank” إلى الارتباط الخاص بك. سيؤدي هذا إلى فتح الرابط في متصفح آخر. هذه دائمًا ممارسة جيدة عند الارتباط بملف. بهذه الطريقة إذا كان المتصفح لا يدعم سمة التنزيل ، فسيقوم ببساطة بفتح الملف في نافذة جديدة تمامًا كما يفعل بدون سمة التنزيل. بالإضافة إلى ذلك ، إذا كان المستعرض يدعم سمة التنزيل ، فسيقوم بتنزيل الصورة دون فتح نافذة جديدة. لذلك هذا خيار احتياطي جيد.

<a href="/files/download-file.pdf" download="newname" target="_blank" >Download Link</a>

تحويل الرابط الخاص بك إلى زر Divi

هناك طريقة سريعة لتحويل الرابط الخاص بك إلى زر 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

إنشاء الزر

لإضافة وظيفة التنزيل المباشر إلى Button Module ، يجب عليك أولاً إنشاء زر يرتبط بملفك كما تفعل عادةً.

أدخل وحدة زر من داخل Divi Builder.

في إعدادات وحدة الأزرار ، قم بتحديث الإعدادات التالية:

إضافة عنوان URL للزر (يجب أن يكون هذا هو عنوان url الكامل للملف للتنزيل)
يفتح عنوان URL : في علامة التبويب الجديدة (هذا مهم كبديل)
أضف نص الزر

ضمن CSS المخصص ، أضف فئة CSS تسمى "زر تنزيل et". سيتم استخدام هذه الفئة لاستهداف الزر باستخدام jQuery وإضافة سمة التنزيل.

احفظ المخرج

تحقق من الزر الجديد الخاص بك.

حاليًا ، سيفتح الزر الملف في نافذة جديدة فقط. لإضافة سمة التنزيل إلى رابط الزر ، نحتاج إلى إضافة بعض jQuery.

مضيفا jQuery

لإضافة سمة التنزيل إلى وحدة الأزرار ، يمكننا إضافة بعض jQuery لإدراج سمة التنزيل في رابط وحدة الأزرار مع فئة معينة. في هذا المثال ، سنضيف سمة التنزيل إلى وحدة الزر مع فئة CSS "et_download-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. على سبيل المثال ، إذا أردت أن تعيد وحدة الزر الخاصة بي تسمية ملف التنزيل الخاص بي باسم "ملف صورة" ، فسأستخدم مقتطف jQuery هذا بدلاً من ذلك:

<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. تحقق من دعم المستعرض الحديث هذا لسمة التنزيل.

يدعم Firefox روابط التنزيل من نفس الأصل فقط لأسباب أمنية ، مما يعني بشكل أساسي أنه لا يمكنك توجيه روابط التنزيل باسم مجال مختلف أو روابط مستضافة على خوادم مختلفة.

الاحتياطيات

نظرًا لأن سمة التنزيل تفتقر إلى دعم متصفح واسع النطاق ، أقترح تنفيذ خيار احتياطي للمتصفحات الأخرى. إن الشيء العظيم في سمة التنزيل هو أن الرابط سيظل يعمل على المتصفحات التي لا تدعمه. سيظل مرتبطًا بالملف كالمعتاد. لهذا السبب أقترح استخدام "target = _blank" (السمة التي تفتح الرابط الخاص بك في نافذة أو علامة تبويب جديدة) داخل هيكل الارتباط الخاص بك. بهذه الطريقة إذا كان المستعرض لا يدعم سمة التنزيل ، فسيفتح الملف في علامة تبويب أخرى.

استخدام الملفات المضغوطة

إذا كنت تعارض سمة التنزيل تمامًا بسبب دعم المتصفح غير المتسق ، فيمكنك محاولة ضغط ملف التنزيل في ملف مضغوط والذي عادة ما يجبر الزائر على تنزيل الملف بدلاً من مشاهدته.

تنزيل النوافذ المنبثقة

اعتمادًا على متصفحك ، قد يؤدي رابط التنزيل المباشر إلى تشغيل نافذة منبثقة للتنزيل تسأل شيئًا ما على غرار "ماذا تريد أن تفعل بهذا الملف؟". هذا لا يعني أن الرابط لا يعمل. الإخطار ضروري لأسباب أمنية. فيما يلي مثال على نافذة منبثقة للتنزيل عند النقر فوق ارتباط تنزيل مباشر لملف pdf:

افكار اخيرة

أدرك أن هناك حلولًا تقليدية ومعقدة لفرض التنزيلات. لقد قررت أن أبقيه بسيطًا وأن أقدم حلاً دون ضجة حلول php أو js الأكثر تقدمًا.

تعد إضافة "سمة التنزيل" إلى ارتباط أمرًا بسيطًا مثل إضافة "تنزيل" إلى علامة <a>. ويمكن للقيمة الاختيارية تعيين اسم الملف ليكون ما تريده.

بالإضافة إلى ذلك ، مع وجود القليل من jQuery في مكانه ، فإن إضافة الوظيفة إلى Divi Button Module بسيطة مثل إضافة فئة مخصصة إلى الوحدة النمطية.

على الرغم من أن سمة التنزيل غير مدعومة بالكامل من قبل جميع المتصفحات ، إلا أنها لا تزال حلاً بسيطًا وعمليًا. نظرًا لأن المتصفحات غير المدعومة تتجاهل السمة ، فسيظل الرابط يعمل ويفتح في نافذة المتصفح.

نأمل أن يكون هذا مصدرًا مفيدًا للعميل التالي الذي يطلب رابط تنزيل مباشر.

أتطلع إلى الاستماع منك في التعليقات.