أساسيات Inspect Element: تخصيص ووردبريس للمستخدمين الذين يقومون بذلك بأنفسهم

آخر تحديث بتاريخ يوليو 15, 2025

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

أخبرنا العديد من مستخدمينا المبتدئين أنهم يجدون صعوبة في تحرير HTML/CSS. نوصيهم دائمًا بتجربة Inspect tool.

إنها بسيطة وسهلة الاستخدام، ويمكنك رؤية نتائج تعديلاتك فورًا. نستخدمها باستمرار لمعاينة التغييرات، بدءًا من تعديلات النصوص البسيطة ووصولًا إلى تحسينات التصميم بالكامل.

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

ما هي Inspect tool؟

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

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

يمكنك الوصول إلى أدوات التطوير هذه على أي صفحة بالنقر بزر الماوس الأيمن واختيار ‘Inspect’ من القائمة. إنها إحدى خطواتنا الأساسية عند اختبار تعديلات التصميم أو تصحيح أي مشكلة.

فتح أدوات المطور Inspect في جوجل كروم

باستخدام Inspect tool، يمكنك تعديل أكواد HTML أو CSS أو JavaScript مؤقتًا ورؤية التغييرات مباشرة على شاشتك. استخدمناها لمعاينة كل شيء، من تعديلات بسيطة على التصميم إلى أفكار تخطيطية متكاملة. (سنشرح لك كيفية القيام بذلك لاحقًا في هذه المقالة).

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

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

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

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

هل أنت مستعد للبدء؟ استخدم الروابط أدناه للانتقال إلى أي قسم من المقالة ومتابعتها:

تشغيل Inspect Tool وتحديد موقع الكود

يمكنك تشغيل Inspect Tool بالضغط على CTRL + Shift + I (أو Command + Options + I لنظام MacOS) على لوحة المفاتيح.

يمكنك أيضًا النقر في أي مكان على صفحة الويب واختيار ‘Inspect’ من قائمة المتصفح.

inspect google chrome

يمكنك أيضًا الوصول إلى الأداة من قائمة المتصفح الرئيسية.

في جوجل كروم، انقر على قائمة النقاط الثلاث في الزاوية العلوية اليمنى، ثم مرر للأسفل إلى More tools » Developer tools.

إطلاق أدوات المطور

ستنقسم نافذة المتصفح إلى قسمين.

في أحد الجانبين، سترى الصفحة التي كنت تشاهدها. وفي الجانب الأخر، سترى كود HTML وقواعد CSS.

اختر موضع الإرساء

يختلف موضع شريط Inspect، ولكن يمكنك تغييره بالنقر على قائمة النقاط الثلاث واختيار موضع ‘Dock side’. يمكنك رؤية الأيقونة المخصصة للنقر في الصورة أعلاه.

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

ستلاحظ أيضًا تغير قواعد CSS أثناء النقر فوق عنصر داخل كود HTML.

تم تمييز HTML المحدد في المعاينة

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

سيتم تسليط الضوء على العنصر في الكود المصدر.

تحرير وتصحيح أخطاء الكود في Inspect Element

يمكن تعديل كل من HTML وCSS في نافذة inspect element. بإمكانك النقر نقر مزدوج في أي مكان في كود مصدر HTML وتحرير الكود كما تريد.

تحرير HTML باستخدام Inspect tool

يمكنك أيضًا النقر نقر مزدوج وتعديل أي سمات وأستايلات في لوحة CSS.

لإضافة قاعدة أستايل مخصصة، ما عليك سوى النقر فوق أيقونة + في الجزء العلوي من لوحة CSS.

تحرير CSS في inspect tool

عند إجراء أي تعديلات على CSS أو HTML، ستظهر هذه التعديلات في المتصفح فورًا.

ستحفظ هذه التعديلات في الذاكرة المؤقتة للمتصفح ولن تؤثر على موقعك الإلكتروني.

ملاحظة هامة: أي تغييرات تجريها هنا لا تحفظ في أي مكان. Inspect element هي أداة تصحيح أخطاء، ولا تعيد كتابة تغييراتك إلى ملفات سيرفرك. عند تحديث الصفحة، ستحذف جميع تغييراتك.

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

قبل البدء بتعديل قالب ووردبريس الحالي باستخدام أداة Inspect Element، تأكد من إنشاء نسخة احتياطية من ووردبريس.

العثور بسهولة على الأخطاء في موقعك

تحتوي أداة Inspect على قسم يسمى Console، يعرض الأخطاء التي حدثت أثناء تحميل الصفحة.

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

أخطاء Inspect في Console

باستخدام علامة تبويب Console، يمكنك استكشاف العديد من المشكلات الشائعة وإصلاحها. على سبيل المثال، إليك بعض الإجراءات التي يمكنك القيام بها باستخدام Inspect console:

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

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

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

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

كيفية استخدام Inspect Tool على الهاتف المحمول (اي او اس أو أندرويد)؟

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

أسهل طريقة لاستكشاف أخطاء Inspect Tool وإصلاحها هي استخدام ميزة محاكاة الأجهزة المحمولة في متصفح سطح المكتب.

استخدام inspect tool في الوضع المحمول

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

كيفية تطبيق تغييرات عنصر Inspect بشكل دائم في ووردبريس

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

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

1. أضف تغييرات CSS إلى موقع ووردبريس الخاص بك باستخدام محرر الموقع

نسخ تغييرات CSS في Inspect tool

بعد النسخ، انتقل إلى لوحة تحكم ووردبريس، ثم انتقل إلى المظهر » المحرر لتشغيل محرر الموقع.

انقر على نافذة المعاينة لبدء تحرير موقعك.

محرر موقع CSS إضافي

داخل المحرر، انقر على زر ‘الأستايل’ في الأعلى، ثم انقر على قائمة النقاط الثلاث واختر “تنسيقات (CSS) إضافية”.

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

إضافة css مخصص

قد ترى تطبيق تغييراتك فورًا في نافذة المعاينة. لا تنسَ النقر على ‘حفظ’ لنشر تغييراتك.

2. إضافة CSS مخصص إلى موقعك باستخدام WPCode

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

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

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

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

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

بعد التفعيل، ما عليك سوى الانتقال إلى Code Snippets » + Add New من لوحة تحكم إدارة ووردبريس.

بعد ذلك، يمكنك التمرير فوق خيار ‘Add Your Custom Code (New Snippet)’ في مكتبة مقتطفات الكود والنقر فوق ‘+ Add custom Snippet’.

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

بعد ذلك، عليك تحديد “CSS Snippet” كنوع الكود من قائمة الخيارات التي تظهر على الشاشة.

حدد CSS Snippet كنوع الكود

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

بعد إدخال العنوان، يمكنك كتابة أو لصق مقتطف CSS المخصص في مربع ‘Code Preview’.

حفظ مقتطف الكود

بعد إضافة كود CSS المخصص الخاص بك، انقر فوق الزر ‘Save Snippet’ ثم انقر فوق تبديل الحالة إلى ‘Active’.

3. أضف مقتطف HTML إلى موقع ووردبريس الخاص بك

لإضافة تغييرات HTML إلى موقعك، عليك لصقها في ملف القالب المناسب في قالبك.

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

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

كبديل، يمكنك أيضًا استخدام WPCode لإضافة مقتطفات HTML مخصصة. ما عليك سوى إضافة مقتطف جديد واختيار HTML كنوع للمقتطف.

مقتطف HTML

بعد ذلك، أدخل عنوان لمقتطف HTML الخاص بك يسهل عليك تمييزه.

أدناه، أضف كود HTML المخصص الخاص بك في مربع المعاينة.

مقتطف كود HTML مخصص

يتيح لك WPCode اختيار المكان الذي تريد إدراج أي مقتطف من الكود فيه.

مرر للأسفل إلى قسم ‘Insertion’ وانقر على ‘Location’ لعرض الخيارات المتاحة.

المكان الذي تريد عرض HTML فيه

بعد تحديد الموقع، لا تنسَ النقر على “حفظ” وتفعيل حالة المقطع.

بعد تحديد الموقع، لا تنس النقر فوق ‘Save’ وتبديل حالة المقتطف إلى Active.

يمكنك الأن زيارة موقعك لمشاهدته أثناء العمل.

معاينة مقتطف HTML

أفضل الممارسات عند استخدام Inspect Element

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

  • ابدأ بالاستكشاف بأمان: أي تغييرات تجريها في Inspect Element مؤقتة. لذا لا تتردد في التجربة دون خوف – لا شيء يدوم للأبد.
  • جرب أستايلات وتخطيطات مختلفة: اختبر الألوان والخطوط والمسافات أو المواضع لمعرفة ما يبدو جيدًا قبل تطبيق التغييرات على قالبك أو stylesheet.
  • دون ملاحظات حول ما ينجح: إذا أعجبك تغيير ما، فانسخ CSS والصقه في ملف نصي أو تطبيق تدوين ملاحظات حتى لا تفقده.
  • اختبره عبر المتصفحات: قد يبدو تعديل التصميم الذي يبدو رائع في كروم غير مناسب في فايرفوكس أو سفاري، لذا تحقق منه جيدًا دائمًا.
  • حافظ على التنظيم: دون جميع التغييرات التي أجريتها وسببها. هذا مفيد إذا احتجت إلى التراجع عن شيء ما أو استكشاف الأخطاء وإصلاحها لاحقًا.
  • لا تعدل المواقع المباشرة بشكل عشوائي: إذا كنت تتعلم، فمن الأفضل التدرب على موقع تجريبي أو بيئة اختبار لتجنب المشكلات العرضية في موقعك المباشر.

الأسئلة الشائعة حول Inspect Element

فيما يلي بعض الأسئلة الأكثر شيوعًا التي يطرحها المستخدمون حول استخدام Inspect tool.

1. هل يمكنني استخدام Inspect tool على أي موقع إلكتروني أو على موقعي الخاص فقط؟

نعم، يمكنك استخدام inspect tool على أي موقع إلكتروني. ما عليك سوى النقر بزر الماوس الأيمن واختيار inspect tool من قائمة المتصفح لرؤية الكود الخاص بأي موقع إلكتروني. دراسة الكود على مواقع أخرى طريقة سريعة لتعلم وتحسين مهاراتك في CSS/HTML.

2. لماذا لا أستطيع العثور على inspect tool في متصفحي؟

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

بالإضافة إلى ذلك، قد تعطل وظيفة النقر بزر الماوس الأيمن باستخدام جافا سكريبت، مما قد يخفي خيار ‘Inspect’. في هذه الحالات، لا يزال بإمكانك فتح Developer Tools باستخدام اختصار لوحة المفاتيح Ctrl + Shift + I (أو Cmd + Option + I على ماك) أو بالانتقال إلى Menu » More Tools » Developer Tools.

3. هل يمكنني رؤية التغييرات عبر المتصفحات المختلفة؟

نعم، يتوفر Inspect Element في المتصفحات الرئيسية، مما يسمح لك باختبار ومراقبة التغييرات في Chrome وFirefox وSafari وEdge.

4. كيف يمكن لـ Inspect Element المساعدة في تصحيح أخطاء JavaScript؟

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

5. هل يمكن أن يؤثر Inspect Element على أمان الموقع الإلكتروني الخاص بي؟

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

تعرف على المزيد حول تخصيص ووردبريس

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

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

فريق دكتورميجا

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

اترك تعليقاً