كيفية إضافة كود مخصص في WebFlow

يتم تسويق Webflow على نطاق واسع كمنصة تطوير بدون كود ، والتي يُنظر إليها على أنها أكبر ميزة لها. ومع ذلك ، هذا لا يعني أنه لا يمكنك إضافة رموز إلى تصميمك.

Webflow How to Add Custom Code 738x320 - كيفية إضافة كود مخصص في WebFlow

بينما يقدم Webflow مجموعة واسعة من خيارات التصميم ، فقد ترغب في تخصيص موقع الويب الخاص بك بشكل أكبر. هذا هو المكان الذي تلعب فيه الرموز المخصصة ، حيث تتيح إضافتها المزيد من الوظائف.

استمر في القراءة لمعرفة كيفية إضافة رمز مخصص في Webflow.

قيود على إضافة رمز مخصص

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

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

بشكل عام ، يدعم Webflow الأنواع التالية من الأكواد:

  • لغة البرمجة
  • CSS
  • جافا سكريبت

يمكن أن تضيف إضافة أكواد JavaScript المخصصة الكثير من الوظائف إلى موقع الويب الخاص بك. لهذا السبب ، تم تجهيز Webflow أيضًا بإصدار أبسط من JavaScript يسمى jQuery. يمكنك استخدامه مع JavaScript لتسهيل عملية الكتابة.

عند استيراد jQuery ، من الضروري الانتباه إلى نسخته. يجب أن يتطابق الإصدار مع إصدار Webflow الذي تم استيراده حاليًا لتجنب التعارضات والسلوك غير المتوقع. بالإضافة إلى ذلك ، يمكن للنصوص البرمجية مثل onClick و onHover التي تؤثر على أحداث DOM أن تتسبب أيضًا في سلوك غير متوقع على موقعك.

عند دمج رمز مخصص ، لا يمكنك استخدام أي لغات من جانب الخادم ، بما في ذلك:

  • Perl
  • Python
  • PHP
  • Ruby

هناك جانب هام آخر يجب مراعاته وهو طول الرمز المخصص. يفرض Webflow قيود الأحرف التالية:

  • 10000 حرف للعناصر المضمنة
  • 10000 حرف لرموز حول صفحة واحدة
  • 20000 حرف لرموز حول موقع الويب بالكامل

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

لن تؤثر معظم الرموز المخصصة على العناصر الموجودة في وضع المصمم لتجنب أي سلوك غير متوقع. لذلك ، لن ترى النتائج إلا بعد نشر موقعك على الويب.

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

كيفية إضافة رمز مخصص Webflow

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

كيفية إضافة رمز مخصص إلى موقع ويب كامل

إذا كان يجب تطبيق التعليمات البرمجية المخصصة الخاصة بك على كل صفحة على موقع الويب الخاص بك ، فإن “إعدادات الموقع” هي المكان المناسب لك. ستضمن إضافة الكود المخصص هناك تجربة سلسة عبر جميع عناصر موقع الويب الخاص بك.

يمكن وضع الرموز الخاصة بالموقع بالكامل في قسم رمز الرأس أو التذييل. لإضافة رمز مخصص في قسم رمز الرأس ، قم بما يلي:

  • افتح “إعدادات الموقع”.

webflow8 750x477 - كيفية إضافة كود مخصص في WebFlow

  • انتقل إلى علامة التبويب “كود مخصص”.

webflow1 750x561 - كيفية إضافة كود مخصص في WebFlow

  • أضف الكود المخصص إلى حقل “Head Code”.

webflow1 1 750x385 - كيفية إضافة كود مخصص في WebFlow

  • اضغط على “حفظ التغييرات”.

webflow1 2 750x385 - كيفية إضافة كود مخصص في WebFlow

يتيح لك هذا القسم استخدام الأنماط المخصصة والارتباط بالموارد الخارجية وإضافة البيانات الوصفية.

إذا كنت ترغب في إضافة رمز مخصص إلى قسم رمز التذييل ، فانتقل إلى علامة التبويب “كود مخصص” مرة أخرى ثم اتبع الخطوات التالية:

  • أضف الرمز المخصص إلى حقل “رمز التذييل”.

webflow2 750x381 - كيفية إضافة كود مخصص في WebFlow

  • انقر على “حفظ التغييرات”.

webflow2 1 750x381 - كيفية إضافة كود مخصص في WebFlow

كيفية إضافة رمز مخصص إلى صفحة واحدة

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

عند إضافة رمز مخصص إلى صفحة واحدة ، يمكنك اختيار مكان وضعه.

يجب عليك دائمًا وضع أكواد HTML و CSS داخل علامة <head>. ومع ذلك ، يجب أن يتم وضع أكواد JavaScript في قسم علامة <body> ، قبل علامة </body>. عادةً ما يؤدي ذلك إلى تحسين أداء موقع الويب ، حيث سيتم تشغيل روابط <script> المضافة إلى قسم علامة <head> قبل العنصر.

لإضافة رمز مخصص داخل علامة <head> ، قم بما يلي:

  • افتح موقع الويب الخاص بك باستخدام وضع المصمم.

 

webflow4 750x499 - كيفية إضافة كود مخصص في WebFlow

  • انتقل إلى الصفحة التي ترغب في تخصيصها وافتح “إعدادات الصفحة”.

webflow3 750x499 - كيفية إضافة كود مخصص في WebFlow

  • حدد موقع قسم “علامة <head> الداخلية” ضمن علامة التبويب “كود مخصص”.

webflow6 750x805 - كيفية إضافة كود مخصص في WebFlow

  • أضف رمزك المخصص.

webflow5 750x805 - كيفية إضافة كود مخصص في WebFlow

  • انقر فوق “حفظ التغييرات”.

كرر أول خطوتين عند إضافة رمز قبل العلامة </body>. بعد ذلك ، افعل ما يلي:

  • ابحث عن قسم “قبل </ Body> العلامة” ضمن علامة التبويب “الرمز المخصص”.

webflow7 750x805 - كيفية إضافة كود مخصص في WebFlow

  • أضف الرمز المخصص إلى القسم.

webflow7 1 750x805 - كيفية إضافة كود مخصص في WebFlow

  • انقر على “حفظ التغييرات”.

كيفية إضافة رمز مخصص إلى منشور واحد

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

يمكنك تضمين التعليمات البرمجية المخصصة الخاصة بك في أي مكان في تصميم موقع الويب أو عنصر نص منسق. بصرف النظر عن الرموز المخصصة ، يعد هذا الخيار أيضًا رائعًا لتضمين عناصر الجهات الخارجية ، مثل تطبيقات الدردشة المباشرة ومحرّر مستندات Google وموجزات الوسائط الاجتماعية.

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

  • افتح “المحرر“.

webflow9 750x516 - كيفية إضافة كود مخصص في WebFlow

  • انقر على علامة التبويب “المختارات“.
  • اختر “مجموعة بنص منسق”.

webflow11 750x569 - كيفية إضافة كود مخصص في WebFlow

  • حدد عنصر المجموعة الذي تريده.

webflow12 750x569 - كيفية إضافة كود مخصص في WebFlow

بعد ذلك ، تحتاج إلى فتح حقل النص المنسق. هناك العديد من الخيارات للمحتوى التي يمكنك إضافتها إلى حقل نص منسق. يمكنك اختيار أحد الخيارات المحددة أو كتابة النص الخاص بك.

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

  • اضغط على أيقونة “زائد“.
  • اختر خيار “كود مخصص”.
    الصق التعليمات البرمجية في النافذة المنبثقة “محرر كود تضمين HTML”.
  • انقر فوق “حفظ وإغلاق” في الزاوية اليسرى السفلية من النافذة.

إذا كنت ترغب في إضافة رمز مخصص مباشرةً إلى تصميم موقع الويب الخاص بك ، فإليك ما يجب فعله:

  • انسخ الرمز المخصص الذي تريد تضمينه.
  • انتقل إلى خيار “إضافة لوحة”.
  • حدد خيار “تضمين العنصر”.
  • الصق التعليمات البرمجية المخصصة في عنصر التضمين على لوحة Webflow الخاصة بك.
  • انقر على “حفظ وإغلاق”.

عند كتابة رمز مخصص ، يجب عدم تضمين علامات <body> أو <head> أو <html>. خلاف ذلك ، موقع الويب الخاص بك سوف تتعطل. ومع ذلك ، لا تنس تضمين علامتي الافتتاح والختام ، إن وجدت.

التشفير أصبح سهلاً

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

هل حاولت إضافة رمز مخصص إلى موقع Webflow؟ ما العنصر الذي تريد تخصيصه؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه.

جميع النصائح المذكورة هنا هي إعلامية وتم ترجمتها من المواقع الأجنية و لا تغني من استشارة أهل الاختصاص راجع صفحة

إشعار حقوق الطبع لموقع أحلى هاوم الإلكتروني

قد يعجبك ايضا

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More