هل سبق لك أن أردت تحرير صفحة ويب مؤقتًا لترى كيف ستبدو بألوان وخطوط وأسلوب معين؟ هذا ممكن باستخدام أداة موجودة بالفعل في متصفحك تسمى " فحص العنصر ". هذا حلم أصبح حقيقة لكل المستخدمين الذين يحبون التعامل مع CSS.
في هذا البرنامج التعليمي ، سنرشدك إلى أساسيات فحص العناصر وكيفية استخدامها مع موقع WordPress الخاص بك.
ما هي أداة فحص الصنف؟
قامت المستعرضات الحديثة مثل Google Chrome و Mozilla Firefox بتصميم أدوات تتيح لمطوري الويب تصحيح الأخطاء. تعرض هذه الأدوات HTML و CSS و JavaScript لصفحة وتعرض كيفية تشغيل التعليمات البرمجية.
استخدام الأداة " فحص العنصر يمكنك تعديل كود HTML أو CSS أو JavaScript لأي صفحة ويب ومشاهدة تغييراتك مباشرة (فقط على جهاز الكمبيوتر الخاص بك).
لمالك أ موقع انترنت، يمكن أن تساعدك هذه الأدوات في معاينة الشكل الذي سيبدو عليه نمط معين دون تطبيق التغييرات فعليًا على الجميع.
بالنسبة للكتاب ، تعد هذه الأدوات رائعة لأنه يمكنك بسهولة تغيير معلومات التعريف الشخصية أثناء التقاط لقطات الشاشة مما يلغي الحاجة إلى تعتيم العناصر فعليًا.
بالنسبة لوكلاء الدعم ، تعد هذه طريقة رائعة لتحديد الخطأ الذي قد يتسبب في عدم تحميل معارضك أو منعهم من العمل بشكل صحيح.
نحن فقط نخدش سطح حالات الاستخدام لأن الأداة " فحص العنصر قوي حقا.
في هذه المقالة ، سوف نركز على الأداة " فحص العنصر من Google Chrome ، لأنه متصفحنا المفضل. يحتوي Firefox على أدوات التطوير الخاصة به والتي يمكن أيضًا استدعاؤها عن طريق تحديد القائمة " فحص العنصر ".
إطلاق أداة "فحص العنصر" وتوطين الكود
يمكنك تشغيل هذه الأداة عن طريق الضغط على المفاتيح CTRL + Shift + I على لوحة المفاتيح. بدلاً من ذلك ، يمكنك النقر فوق أي مكان في صفحة الويب ثم تحديد فحص عنصر قائمة المستعرض.
سيتم تقسيم نافذة المتصفح إلى قسمين ، وستظهر النافذة السفلية الكود المصدري لصفحة الويب.
يتم تقسيم نافذة أداة المطور إلى نافذتين. على يسارك ، سترى كود HTML للصفحة. في الجزء الأيسر ، سترى قواعد CSS.
أثناء تحريك الماوس فوق مصدر رمز HTML ، سترى المنطقة المميزة مظللة على صفحة الويب. ستلاحظ أيضًا قواعد CSS لهذا العنصر المعني.
يمكنك أيضًا أخذ مؤشر الماوس فوق عنصر في صفحة الويب ، والنقر بزر الماوس الأيمن وتحديد " تفقد العنصر ". سيتم تمييز العنصر الذي نقرت عليه في شفرة المصدر.
مدونة المطور ومطور المصحح
HTML و CSS في نافذة فحص العناصر قابلة للتحرير. يمكنك النقر نقرًا مزدوجًا فوق شفرة مصدر HTML وتعديل الشفرة كما تريد.
يمكنك أيضًا النقر المزدوج فوق وتحرير سمات الأنماط في لوحة CSS. لإضافة قاعدة ، انقر أيقونة علامة الجمع في لوحة النمط في الأعلى.
عند إجراء تغييرات على كود CSS أو HTML ، ستنعكس هذه التغييرات على الفور في متصفحك.
لاحظ أنه لا يتم حفظ جميع التغييرات التي تم إجراؤها هنا في أي مكان. الأداة فحص العنصر هي أداة تصحيح ، ولا تحفظ تغييراتك على ملف على الخادم الخاص بك. هذا يعني أنه إذا قمت بتحديث الصفحة ، فستفقد كل تغييراتك.
لإجراء التغييرات فعليًا ، ستحتاج إلى تعديل نمط ملف وورد موضوع أو قالب لإضافة التغييرات التي تريد حفظها.
قبل أن تبدأ في تعديل ملف وورد موضوع الموجودة باستخدام الأداة " فحص العنصر تأكد من حفظ جميع التغييرات الخاصة بك عن طريق إنشاء سمة تابعة.
كيفية العثور بسهولة على أخطاء وورد
الأداة فحص العنصر لديه مساحة تسمى " كنسولات مما يدل على جميع الأخطاء الموجودة على موقعك. قبل محاولة تصحيح الخطأ أو طلب المساعدة من مؤلفي سمة أو مكون إضافي ، من المفيد دائمًا البحث هنا لمعرفة الخطأ.
على سبيل المثال ، إذا كنت عميلاً OptinMonster الذي يتساءل لماذا لا يتم تحميل optin الخاص به ، ثم يمكنك بسهولة العثور على المشكلة التي تشير إلى أن " سبيكة من صفحتك لا يتطابق ".
إذا كان شريط المشاركة الخاص بك لا يعمل بشكل صحيح ، فيمكنك أن ترى أن هناك خطأ جافا سكريبت يسبب ذلك.
هذا كل شيء في هذا البرنامج التعليمي ، آمل أن تتمكن من تخصيص ملف بلوق وورد. لا تتردد في مشاركة هذا البرنامج التعليمي مع أصدقائك.
