جافا سكريبت لووردبريس

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

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

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

ما هو جافا سكريبت؟

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

تتمثل إحدى مزايا JavaScript في أنه يتم نشرها عادةً كبرمجة من جانب العميل. هذا يعني أن البرنامج النصي يتم تشغيله من متصفح الزائر أثناء عرضه للصفحة. بمجرد نشر HTML و CSS وإنشاء بنية الصفحة ، يمكن تشغيل JavaScript فوق العناصر الأخرى لتحقيق هدف ديناميكي.

ماذا تفعل JavaScript؟

لذلك ، نحن نعلم الآن أن JavaScript هو في الأساس عنصر برمجة من جانب العميل يمكنه تغيير HTML و CSS الحاليين للموقع. لكن ماذا يمكنها أن تفعل أيضًا؟ هناك العديد من الأشياء المفيدة التي يمكنك استخدام JavaScript من أجلها ، بما في ذلك:

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

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

متى يجب إضافة JavaScript إلى WordPress؟

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

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

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

6 أفضل ملحقات JavaScript WordPress

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

1. أدخل الرؤوس والتذييلات

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

دلائل الميزات:

• يوفر واجهة بسيطة لتحرير وإدراج نص برأس أو تذييل وقفة واحدة
• يمكّنك من الاختيار بين إدخال كود JS في الرأس أو التذييل
• يتيح لك إضافة Google Analytics إلى أي موضوع
• يجعل من الممكن العمل مع أنواع متعددة من التعليمات البرمجية ، بما في ذلك HTML و CSS و JavaScript

السعر: هذا مكون إضافي مجاني.

2. مخصص بسيط CSS و JS

يعد المكون الإضافي Simple Custom CSS و JS مفيدًا كأداة مطور ، ويكون أكثر فاعلية إذا تمت ترقيته إلى الإصدار المحترف. يركز بشكل أساسي على تغييرات المظهر في موقعك. علاوة على ذلك ، فهو يمكّنك من إضافة CSS مخصص وجافا سكريبت مخصص دون تعديل سمة WordPress أو ملفات المكونات الإضافية. من خلال القدرة على تطبيق تغييرات التعليمات البرمجية على صفحات أو عناوين URL معينة ، يمكنك اختبار العناصر قبل بثها مباشرة.

دلائل الميزات:

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

السعر: هذا البرنامج المساعد هو خيار مجاني.

3. SOGO Header Footer

يُعد SOGO Header Footer رائعًا للاستفادة من وظائف واجهة برمجة التطبيقات للجهات الخارجية. يمكنك إضافة JavaScript إلى الرؤوس والتذييلات في الصفحات التي تتضمن رمز تجديد النشاط التسويقي من Google ، فقط لتسمية مثال واحد. فقط ضع في اعتبارك أنك قد تحتاج إلى شراء إصدار احترافي لإزالة الإعلانات أو الوصول إلى الخيارات المتميزة.

دلائل الميزات:

• يتضمن دعمًا لصفحات متجر WooCommerce
• يمكّنك من تطبيق كود JS على جميع الصفحات والمشاركات ، أو تحديد بعض الصفحات والمشاركات
• متوافق مع Gutenberg
• يدعم صفحات المصطلحات والفئات

السعر: هناك نسخة مجانية ونسخة متميزة تبدأ من 7.90 دولار.

4. البرامج النصية للتذييل

ينقل هذا المكون الإضافي WordPress القوي البرامج النصية المهمة إلى تذييل موقعك. قد ترغب في القيام بذلك لتقليل أوقات التحميل ، أو تنظيف أي اختناقات في تحميل الصورة إذا كان قالبك يعمل بالكثير من البرامج النصية. تجدر الإشارة إلى أن Scripts to Footer لا تعمل إلا إذا كان لديك مكونات إضافية وموضوع يستخدم wp_enqueue_scripts بشكل صحيح.

دلائل الميزات:

• يمكّنك من تعطيل ميزات المكون الإضافي في صفحات ومنشورات محددة مباشرةً ، عبر مربع تعريف شاشة تحرير الصفحة / المنشور
• يتيح لك تعطيل المكون الإضافي في صفحات أرشيف محددة عبر صفحة الإعدادات
• يجعل من الممكن اختيار البرامج النصية التي سيتم الاحتفاظ بها في رأس الموقع

السعر: هذا البرنامج المساعد مجاني بنسبة 100٪.

5. CSS و JavaScript Toolbox

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

دلائل الميزات:

• يتيح لك إضافة CSS و JavaScript و PHP و HTML إلى الصفحات والمشاركات وأنواع المنشورات المخصصة والعلامات والفئات وعناوين URL والمزيد
• يمكّنك من إضافة أنماط الواجهة الأمامية دون تعديل ملفات السمات الخاصة بك
• يلغي الحاجة إلى المكونات الإضافية المخصصة الغريبة أو الاختراقات لإضافة وظائف
• يساعدك على إضافة نصوص طرف ثالث للإعلان وتتبع الزوار أو قنوات التواصل الاجتماعي
• يجعل من الممكن تجنب استخدام FTP ، وإدارة جميع إضافات وتغييرات التعليمات البرمجية داخل لوحة القيادة الخاصة بك

السعر: يمكنك تجربة البرنامج المساعد المجاني ، أو اختيار إصدار مميز مقابل 29 دولارًا.

6. البرامج النصية والأنماط

أخيرًا ، تمكنك Scripts n Styles من إضافة CSS و JavaScript مخصصين مباشرة إلى المنشورات الفردية أو الصفحات أو أي أنواع منشورات مخصصة مسجلة أخرى. في عالم JavaScript ، يأتي هذا المكون الإضافي أيضًا مع بعض ميزات الأمان المضمنة. هذا مفيد إذا كان لديك العديد من الأيدي العاملة في موقع WordPress الخاص بك.

دلائل الميزات:

• يتيح لك إضافة فئات إلى علامة النص وحاوية النشر
• يمكنك من إنشاء برامج نصية للموقع بأكمله من خلال صفحة إعدادات عامة
• يضيف فئات جديدة إلى قائمة تنسيقات TinyMCE المنسدلة ، من أجل التصميم المباشر للمشاركات والصفحات
• يوفر خيار تقييد الاستخدام لأنواع معينة من المستخدمين

السعر: لا توجد تكلفة لاستخدام هذا البرنامج المساعد.

سهولة إضافة JavaScript في WordPress (بخطوتين)

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

الخطوة 1: تثبيت وتنشيط البرنامج المساعد

الخطوة الأولى هي ببساطة البحث عن المكون الإضافي من علامة التبويب Plugin في موقع الويب الخاص بك ، ثم تثبيته.

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

الخطوة 2: أدخل كود JavaScript في رأسك أو تذييلك

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

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

بكل بساطة! لا تنس حفظ تغييراتك عند الانتهاء ، وسيقوم المكون الإضافي تلقائيًا بتحميل كود JavaScript الخاص بك في الأماكن المناسبة.

تعرف على المزيد من حيل المطور باستخدام WP Engine

قد يبدو إنشاء تغييرات فريدة ومخصصة على موقع WordPress الخاص بك باستخدام JavaScript أمرًا مخيفًا في البداية. بمجرد أن تعرف كيفية تنفيذ لغة البرمجة الرئيسية هذه بنجاح ، ستتمتع بالتحكم الكامل في السمات والتكاملات الخاصة بك.

بصفتك مالكًا أو مطورًا لموقع WordPress ، فإن موارد الجودة تحدث فرقًا كبيرًا في عملك. في WP Engine ، لدينا خطط وحلول لجميع الميزانيات. نحن هنا لنقدم لك أفضل حلول WordPress ونساعدك في نقل مواقعك إلى حدود جديدة!