كيفية إضافة واستخدام jQuery Scripts في WordPress

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

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

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

ما هو مسج؟ (ولماذا قد ترغب في استخدامه)

قبل أن تتعلم كيفية إضافة نصوص jQuery في WordPress ، ستحتاج إلى فهم أساسي لـ jQuery نفسه.

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

يمكّنك من تعديل وتحسين سمات WordPress والإضافات بسهولة باستخدام JavaScript. يمكن أن تكون هذه الميزة مفيدة للغاية لأن JavaScript ضرورية للعديد من الميزات.

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

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

هل تم تضمين jQuery في WordPress افتراضيًا؟

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

ما يجب فعله قبل إضافة نصوص jQuery إلى WordPress

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

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

إذا لم تكن متأكدًا من كيفية عمل نسخة احتياطية من موقع WordPress الخاص بك ، أو كنت تبحث فقط عن أداة لتبسيط العملية ، فإن Jetpack VaultPress Backup يعد خيارًا ممتازًا.

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

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

كيفية إضافة نصوص jQuery مخصصة إلى WordPress

الآن بعد أن عرفت المزيد عن jQuery وإعداد موقعك للتغييرات الرئيسية ، دعنا نناقش طريقتين لإضافة نصوص jQuery مخصصة إلى WordPress!

الطريقة الأولى: إضافة jQuery يدويًا

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

يجدر استخدام سمة فرعية حتى لا يتم تجاوز أي تغييرات تجريها عند تحديث السمة الخاصة بك.

الخطوة 1: انتقل إلى وضع التوافق

أحد الأشياء الرائعة في jQuery هو أنه يسمح لك باستخدام بعض الاختصارات المألوفة عند الترميز. يمكنك استخدام الرمز $ لتمثيل jQuery. يمكن أن يوفر لك هذا الكثير من الوقت ، لكن بعض المكتبات الأخرى تستخدم هذا الاختصار لتمثيل شيء مختلف.

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

يمكنك القيام بذلك باستخدام الكود التالي:

 <!-- Putting jQuery into no-conflict mode. --> http://prototype.js http://jquery.js <script> var $j = jQuery.noConflict(); // $j is now an alias to the jQuery function; creating the new alias is optional. $j(document).ready(function() {    $j( "div" ).hide(); }); // The $ variable now has the prototype meaning, which is a shortcut for // document.getElementById(). mainDiv below is a DOM element, not a jQuery object. window.onload = function() {    var mainDiv = $( "main" ); } </script>

عند تنفيذ النص أعلاه ، ستتمكن من استخدام $ j كاختصار بدلاً من $. بدلاً من ذلك ، يمكنك استخدام ما يلي:

 <!-- Loading jQuery before other libraries. --> http://jquery.js http://prototype.js <script> // Use full jQuery function name to reference jQuery. jQuery( document ).ready(function() {    jQuery( "div" ).hide(); }); // Use the $ variable as defined in prototype.js window.onload = function() {    var mainDiv = $( "main" ); }; </script>

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

الخطوة 2: قم بعمل ملف نصي

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

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

ابدأ بالاتصال بموقعك على الويب باستخدام مدير الملفات أو عميل بروتوكول نقل الملفات (FTP) المجاني مثل FileZilla.

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

بعد ذلك ، حدد موقع مجلد النسق النشط وأنشئ مجلدًا فرعيًا جديدًا. أطلق عليه / js / .  

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

الخطوة 3: قم بإضافة برنامج نصي jQuery إلى ملف function.php الخاص بك

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

نظرًا لأن JavaScript يتطلب وضع قوائم الانتظار ، ستحتاج إلى استخدام وظيفة wp_enqueue_script (). قد تبدو شفرتك كما يلي:

 function my_theme_scripts() {    wp_enqueue_script( 'my_new_script_file', get_template_directory_uri() . '/js/my_new_script_file.js', array( 'jquery' ), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

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

الطريقة الثانية: إضافة jQuery باستخدام مكون WordPress الإضافي

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

الخطوة 1: قم بتثبيت ملحق jQuery

أولاً ، ستحتاج إلى اختيار مكون jQuery الإضافي. اثنان من أكثر الخيارات شيوعًا هما Simple Custom CSS و JS والحقول المخصصة المتقدمة.

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

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

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

الخطوة 2: إنشاء حقل مخصص جديد

بعد تثبيت البرنامج المساعد وتنشيطه ، انتقل إلى Custom Fields → Add New .

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

الآن ، يمكنك البدء في تعديل الحقل الجديد. يمكنك توسيع الخيارات بالنقر فوق تحرير أسفل التسمية.

أولاً ، افتح القائمة المنسدلة لنوع الحقل ، وحدد واحدًا.

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

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

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

كيفية تأجيل jQuery في WordPress

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

لكن الجانب السلبي هو أن هذه العناصر المعقدة من جانب العميل قد تبطئ موقع الويب الخاص بك. لذلك ، قد ترغب في تأجيل JavaScript تلقائيًا (وامتدادًا ، jQuery) عند تحميل موقع WordPress الخاص بك.

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

إذا كنت تريد تأجيل jQuery تلقائيًا على موقع الويب الخاص بك ، فيمكنك استخدام Jetpack Boost للقيام بذلك.

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

بالإضافة إلى تأجيل JavaScript غير الأساسي ، يمكن لـ Jetpack Boost تحسين تحميل CSS وتطبيق التحميل البطيء للصور (من بين تحسينات الأداء الأخرى). باستخدام هذه الأداة ، يمكنك تحسين نتائج Core Web Vitals الخاصة بك وتعزيز ظهور موقعك في نتائج البحث.

الأسئلة المتداولة حول jQuery في WordPress

نأمل أن نكون قد أوضحنا معظم شكوكك حول jQuery في WordPress. ومع ذلك ، إذا فاتنا شيء ما ، فإليك بعض الأسئلة الشائعة!

هل يمكنك تغيير إصدار jQuery المستخدم في WordPress؟

في بعض الأحيان ، يمكن للقوالب والمكونات الإضافية استبدال إصدارات jQuery أو إضافتها إلى موقعك. لذلك ، من المهم التأكد من أن إصدارك محدث دائمًا. يمكنك القيام بذلك بسهولة باستخدام مكون إضافي مثل jQuery Updater أو Version Control لـ jQuery.

أين يمكنني التحقق من إصدار jQuery على موقع WordPress الخاص بي؟

يمكنك عادةً التحقق من إصدار jQuery في المتصفح. في Google Chrome ، انتقل ببساطة إلى موقع الويب الخاص بك على الواجهة الأمامية. ثم انتقل إلى View → Developer → JavaScript Console.

أدخل jQuery.fn.jquery ، ويجب أن تعرض وحدة التحكم الإصدار الحالي لموقعك.

هل يمكنك إزالة jQuery تمامًا من WordPress؟

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

للقيام بذلك ، ما عليك سوى إضافة الكود التالي إلى ملف jobs.php الخاص بك:

 // Remove jQuery function vpsb_remove_jquery() {    if (!is_admin()) {        wp_deregister_script('jquery');        wp_register_script('jquery', false);    } } add_action('init', 'vpsb_remove_jquery');

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

إذا تدهورت سرعة موقعك بعد إضافة jQuery ، فإن البديل الأفضل هو استخدام حل مثل Jetpack Boost. يمكنه تأجيل JavaScript غير الأساسي.

هل يمكنك استبدال jQuery بـ Vanilla JavaScript؟

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

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

إذا قررت السير في هذا الطريق ، فمن المفيد مراجعة هذا الدليل لإضافة JavaScript إلى WordPress. يمكن أن يساعدك في هذه العملية.

استخدام jQuery في ووردبريس

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

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

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