خانه / وبلاگ / آموزش های وردپرس / سایر آموزش های وردپرس / مبانی Inspect Element: سفارشی سازی وردپرس برای کاربران

مبانی Inspect Element: سفارشی سازی وردپرس برای کاربران

آیا تا به حال پیش آمده که بخواهید به طور موقت یک صفحه وب را ویرایش کنید تا ببیند چگونه با تغییر رنگهای خاص، فونت ها، و … ظاهر وب سایت چه تغییری میکند. با ابزار موجود در مرورگر شما مانند Inspect Element این کار امکان پذیر است. در این مقاله، ما به شما اصول Inspect Element و نحوه استفاده از آن را در سایت وردپرسی نشان خواهیم داد.

Inspect Element یا ابزارهای برنامه نویسی چیست؟

مرورگرهای وب مدرن مانند گوگل کروم و موزیلا فایرفاکس دارای ابزارهایی می باشند که به توسعه دهندگان وب اجازه می دهد خطاهای وب را برطرف کنند. این ابزار کدهای HTML، CSS و JavaScript را برای یک صفحه نشان می دهد و نحوه کد گذاری مرورگر را اجرا می کند.

با استفاده از ابزار Inspection Element می توانید کدهای HTML، CSS یا JavaScript را برای هر صفحه وب ویرایش کنید و تغییرات خود را ببینید (فقط در رایانه شما).

به یک صاحب وب سایت، این ابزار می تواند کمک کند تا پیش نمایش نحوه طراحی وب سایت را برای یک صفحه خاص بدون اعمال تغییرات در همه قسمت ها،مشاهده نماید.

برای نویسندگان، این ابزار بسیار جذاب است زیرا شما می توانید به راحتی اطلاعات شخصی را شناسایی و در هنگام گرفتن اسکرین شات آنها را تغییر دهید و نیازی نیست که موارد را به طور کامل پاک کنید.

برای عوامل پشتیبانی، این یک روش عالی برای شناسایی خطاها می باشد، زمانی که گالری شما بارگیری نشود یا اسلایدرهای سایت شما به درستی کار نکند.

ما فقط سطح مورد استفاده را خراشیده ایم. Inspect element واقعاً قدرتمند است.

در این مقاله، ما بر روی Inspect Element در گوگل کروم تمرکز خواهیم کرد. فایرفاکس دارای ابزار توسعه دهنده خاص خود است که می توانید با انتخاب Inspect Element از منو مرورگر از آن استفاده کنید.

آماده اید؟ بیایید شروع کنیم.

آموزش تصویری

اگر نمی خواهید آموزش ویدیویی را ببینید یا نیاز به دستورالعمل بیشتری دارید، ادامه مطلب را بخوانید.

راه اندازی Inspect Element و تعیین محل کد

شما می توانید ابزار inspect element را با فشار دادن کلید های CTRL + Shift + I بروی صفحه کلید خود راه اندازی کنید. همچنین شما می توانید در هر نقطه از یک صفحه وب راست کلیک نمایید و گزینه inspect element را از منوی مرورگر انتخاب کنید.

پنجره مرورگر شما به دو قسمت تقسیم می شود که پنجره پایین صفحه کدهای صفحه وب را نشان می دهد.

پنجره ابزار برنامه نویس باز شده به دو پنجره تقسیم شده است. در سمت چپ، شما کد HTML را برای صفحه وب مشاهده خواهید کرد و در قسمت سمت راست، شما قوانین CSS را مشاهده می نمایید.

همانطور که ماوس خود را بر روی منبع HTML قرار می دهید، ناحیه آسیب دیده را که در صفحه وب برجسته شده است، خواهید دید. شما همچنین می توانید قوانین CSS را تغییر دهید تا CSS را برای عنصری که مشاهده می کنید، نشان دهید.

شما همچنین می توانید با استفاده از اشاره گر موس بروی یک عنصر در صفحه وب، راست کلیک نمایید و inspect element را انتخاب کنید. عنصری که بروی آن اشاره کرده اید، در کد منبع برجسته خواهد شد.

ویرایش و کد نویسی در Inspect Element

هر دو زبان HTML و CSS در پنجره inspect element قابل ویرایش هستند. شما می توانید در قسمت HTML در هر کجا بروی کد منبع دوبار کلیک چپ کرده و کد را به صورت دلخواه ویرایش نمایید.

شما همچنین می توانید بروی هر ویژگی و سبک در کادر CSS دوبار کلیک کنید و ویرایش نمایید. برای اضافه کردن یک قانون سبک سفارشی، روی نماد + در بالای کادر CSS کلیک کنید.

همانطور که تغییرات در CSS یا HTML ایجاد می کنید، این تغییرات بلافاصله در مرورگر منعکس می شوند.

توجه داشته باشید که هرگونه تغییری که در اینجا ایجاد میکنید هرجا ذخیره نشود. Inspect element یک ابزار اشکال زدایی است و تغییرات شما را به فایل های سرور شما ارسال نمی کند. این به این معنی است که اگر شما صفحه را تازه کنید، همه تغییرات شما از بین خواهد رفت.

برای اضافه کردن تغییرات، باید قالب شیء وردپرس خود را یا الگو مربوطه را ویرایش نمایید تا تغییراتی را که میخواهید ذخیره کنید اضافه شود.

قبل از شروع به ویرایش قالب وردپرس موجود خود، با استفاده از ابزار Inspect Element، اطمینان حاصل کنید که تمام تغییرات خود را با ایجاد یک قالب child ذخیره کرده اید.

به راحتی خطاهای سایت خود را پیدا کنید

در Inspect element قسمتی به نام Console را وجود دارد که تمام خطاهای موجود در وب سایت شما را نشان می دهد. هنگام تلاش برای خطا یابی و یا درخواست از پشتیبانی از نویسندگان افزونه، همیشه مفید است که به اینجا نگاه کنید تا ببینید چه اتفاقی می افتد.

به عنوان مثال اگر مشتری OptinMonster متوجه شدید که optin شما در حال بارگذاری نیست، شما به راحتی می توانید مشکل را پیدا کنید “صفحه slug شما مطابقت ندارد”.

اگر sharebar شما درست کار نکند، می توانید ببینید که یک خطای جاوا اسکریپت وجود دارد.ابزارهایی نظیر Inspect Element Console و SupportAlly به شما کمک می کنند تا از خدمات مشتری بهتر بهره مند شوید زیرا تیم پشتیبانی فنی دوستداران مشتریانی هستند که ابتکار عمل را در ارائه بازخورد دقیق از موضوع دارند.ما امیدواریم که این مقاله به شما کمک کند مبانی Inspect Element و نحوه استفاده از آن را با سایت WordPress خود یاد بگیرید.

اگر این مقاله را دوست داشتید، لطفاً به کانال آپارات ما برای دیدن آموزش ویدئویی وردپرس مشترک شوید . شما همچنین می توانید ما را در اینستاگرام و لینکدین پیدا کنید .

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هاست