معالجة DOM في WordPress باستخدام JQuery

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

لحسن الحظ ، يمكن أن يسهل نموذج كائن المستند (DOM) التعامل أو التنقل عبر كود HTML الخاص بالموقع. يعمل DOM من خلال تمكينك من إنشاء شجرة مكونة من عقد أو كائنات مختلفة. هذا يفتح الفرصة لتغيير عرض الموقع أو هيكله أو وظيفته ، باستخدام مكتبات JavaScript مثل jQuery.

في هذه المقالة ، سنشرح ما هو DOM ولماذا قد ترغب في استخدامه. سنقدم بعد ذلك بعض تقنيات معالجة jQuery القياسية لاستخدام DOM مع WordPress. دعنا نتعمق في!

ما هو DOM؟

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

لماذا نستخدم DOM؟

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

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

معالجة DOM باستخدام JQuery

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

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

تقنيات معالجة DOM

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

1. طريقة ما قبل ()

طبقًا لاسمها ، يتم استخدام الطريقة before () عندما تريد إدراج أي عنصر قبل عنصر هدف آخر ، كما هو موضح في الكود.

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

 $ (this) .before ("<div class = 'square'> مربع آخر </ div>")؛

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

2. طريقة ما بعد ()

بنفس الطريقة التي تتيح لك طريقة before () إدراج العناصر قبل عنصر آخر محدد ، تسمح طريقة after () بالعكس. على سبيل المثال ، يمكن استخدامه لإضافة عنصر أسفل الزر مباشرةً ، بمجرد تحديد الزر:

 $ (this) .after ("<div class = 'square'> مربع آخر </ div>")؛

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

3. طريقة الإلحاق ()

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

لإلحاق العنصر الجديد بالمحتوى الحالي للعنصر الهدف ، يمكنك إدراج الأمر append () jQuery في كود مصدر HTML:

 $ (".box") .append ("<p> عيد ميلاد سعيد! </ p>")؛

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

 <! Dictype html>
 <title> مثال </ title>
 <ستايل>
 .صندوق {
 الخلفية: برتقالي ؛
 اللون الابيض؛
 اللون الابيض؛
 العرض: 150 بكسل ؛
 الحشو: 20 بكسل ؛
 الهامش: 10 بكسل ؛
 }
 </style>
 <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
 <script>
 $ (وظيفة () {
 $ ("button") .click (function () {
 $ (this) .after ("<div class = 'box'> عيد ميلاد سعيد! </ div>")؛
 }) ؛
 }) ؛
 </script>
 <button> إنشاء مربع </ زر>

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

4. طريقة Prepend ()

كوازن للطريقة append () ، ستضيف prepend () عنصرًا إلى نهاية أي عنصر هدف تشير إليه في أمر jQuery:

 $ (".banner") .prepend ("<p> عيد ميلاد سعيد! </ p>")؛

في هذا المثال ، النص "عيد ميلاد سعيد!" سيظهر في بداية الشعار المشار إليه في سلسلة التعليمات البرمجية.

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

5. طريقة الاستنساخ

بعد ذلك ، تعد طريقة clone () خيارًا قويًا جدًا من حيث معالجة DOM باستخدام jQuery. بينما تمكّنك الأساليب الأربعة السابقة من إدراج العناصر وتحريكها ، فإن clone () يجعل من الممكن نسخ عنصر وإزالته من مكانه الأصلي وإعادة إدراجه أو إلحاقه في مكان آخر.

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

 $ (".box") .clone (). appendTo (".triangle") ؛

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

6. طريقة الالتفاف

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

 $ (".targetclass") .wrap ("<div class = 'new'> </div>")؛

باستخدام هذه التقنية ، تقوم بإنشاء <div> حول أي عنصر يطابق الفئة المستهدفة في سلسلة wrap () . بينما يمكنك إنشاء غلاف بعمق عدة مستويات ، إلا أنه يجب عليك التأكد من وجود عنصر أعمق واحد فقط.

استكشاف أخطاء DOM وإصلاحها

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

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

يكون هذا مفيدًا بشكل خاص عندما يقوم برنامج نصي آخر بتغيير HTML الأصلي لموقعك. خلاف ذلك ، قد يظهر HTML و DOM الخاص بك في بعض الأحيان بشكل متماثل تمامًا.

استكشف موارد وأدوات محرك WP الأخرى

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

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