آیا تا به حال خواسته اید یک صفحه وب را به طور موقت ویرایش کنید تا ببینید با رنگهای خاص ، قلم ها ، یک ظاهر طراحی شده و غیره چگونه به نظر می رسد ، با ابزاری که قبلاً در آن وجود دارد امکان پذیر است. مرورگر شما Inspect Element است. این رویایی است که همه کاربران DIY وقتی از آن مطلع می شوند به حقیقت پیوسته است. در این مقاله ، ما اصول عنصر inspect و نحوه استفاده از آن را با سایت وردپرس خود به شما نشان خواهیم داد.
Inspect Element یا Developer Tools چیست؟ h4>
مرورگرهای وب مدرن مانند Google Chrome و Mozilla Firefox دارای ابزارهای داخلی هستند که به توسعه دهندگان وب امکان اشکال زدایی از خطاها را می دهد. این ابزارها HTML ، CSS ، و کد جاوا اسکریپت برای یک صفحه و نحوه اجرای کد توسط مرورگر. p >
با استفاده از ابزار Inspect Element می توانید کد HTML ، CSS یا JavaSCcript را برای هر صفحه وب ویرایش کرده و تغییرات خود را بصورت زنده مشاهده کنید (فقط در رایانه خود).
برای یک مالک وب سایت DIY ، این ابزارها می توانند به شما کمک کنند بدون اینکه در واقع تغییراتی را برای همه ایجاد کند ، چگونه یک طراحی سایت به نظر می رسد.
برای نویسندگان ، این ابزارها بسیار جذاب هستند زیرا هنگام گرفتن عکس از صفحه ، به راحتی می توانید اطلاعات شناسایی شخصی خود را تغییر دهید و به طور کلی نیازی به محو کردن موارد ندارید.
برای نمایندگان پشتیبانی ، این یک روش عالی برای شناسایی خطایی است که باعث می شود گالری های شما بارگیری نشوند یا لغزنده های شما به درستی کار نکنند.
ما در حال خراش دادن سطح موارد استفاده هستیم. عنصر بازرسی واقعاً قدرتمند است.
در این مقاله ، ما بر روی Inspect Element در Google Chrome تمرکز خواهیم کرد زیرا این مرورگر مورد نظر ما است. Firefox ابزارهای توسعه دهنده خاص خود را دارد که با انتخاب عنصر inspect از فهرست مرورگر نیز می توان از آنها استفاده کرد.
آماده هستید؟ بیایید شروع کنیم.
آموزش فیلم h4>
اگر فیلم را دوست ندارید یا به دستورالعمل های بیشتری احتیاج دارید ، به خواندن ادامه دهید.
راه اندازی عنصر بازرسی و تعیین محل کد h4>
با فشار دادن کلیدهای CTRL + Shift + I در صفحه کلید می توانید ابزار inspect element را راه اندازی کنید. به طور متناوب می توانید بر روی هر صفحه از یک صفحه وب کلیک کرده و عنصر بازرسی را از فهرست مرورگر انتخاب کنید.
پنجره مرورگر شما به دو قسمت تقسیم می شود و پنجره پایین کد منبع صفحه وب را نشان می دهد.
پنجره ابزار توسعه دهنده به دو پنجره تقسیم می شود. در سمت چپ خود ، کد HTML صفحه را مشاهده خواهید کرد. در پنجره سمت راست ، قوانین CSS را مشاهده خواهید کرد.
هنگامی که ماوس خود را بر روی منبع HTML حرکت می دهید ، منطقه آسیب دیده را در صفحه وب برجسته می کنید. همچنین متوجه تغییر قوانین CSS می شوید تا CSS را برای عنصری که مشاهده می کنید نشان دهد.
همچنین می توانید نشانگر ماوس را به عنصری در صفحه وب ببرید ، کلیک راست کرده و عنصر بازرسی را انتخاب کنید. عنصری که به آن اشاره کردید در کد منبع برجسته خواهد شد.
ویرایش و اشکال زدایی کد در عنصر بازرسی h4>
هر دو HTML و CSS در پنجره عنصر inspect قابل ویرایش هستند. می توانید در هر کجای کد منبع HTML دوبار کلیک کنید و کد را به دلخواه ویرایش کنید.
همچنین می توانید بر روی ویژگی ها و سبک ها در پنجره CSS دوبار کلیک کرده و ویرایش کنید. برای افزودن یک قانون سبک سفارشی ، روی نماد + در بالای پنجره CSS کلیک کنید.
با ایجاد تغییرات در CSS یا HTML ، این تغییرات بلافاصله در مرورگر منعکس می شوند.
توجه داشته باشید که هر تغییری که در اینجا ایجاد کنید در هیچ کجا ذخیره نمی شود. Inspect element ابزاری برای رفع اشکال است و تغییرات شما را به پرونده های موجود در سرور شما نمی نویسد. این به این معنی است که اگر صفحه را تازه کنید ، تمام تغییرات شما از بین می روند.
برای انجام واقعی تغییرات ، باید صفحه سبک قالب وردپرس یا الگوی مربوطه خود را ویرایش کنید تا تغییراتی را که می خواهید ذخیره کنید اضافه کنید.
قبل از شروع ویرایش قالب وردپرس موجود با استفاده از ابزار Inspect Element ، اطمینان حاصل کنید که با ایجاد تم کودک .
به راحتی خطاهای سایت خود را پیدا کنید h4>
عنصر Inspect منطقه ای به نام Console دارد که تمام خطاهایی را که در وب سایت شما وجود دارد نشان می دهد. هنگام تلاش برای رفع اشکال یا درخواست پشتیبانی از نویسندگان افزونه ، همیشه مفید است که اینجا را جستجو کنید تا ببینید چه خطاهایی وجود دارد.
به عنوان مثال ، اگر شما یک مشتری OptinMonster بودید که چرا optin شما است بارگیری نمی شود ، بنابراین به راحتی می توانید مشکل “حلزون صفحه شما مطابقت ندارد” را پیدا کنید.
اگر نوار اشتراک شما به درستی کار نمی کند ، می توانید خطای JavaScript را ببینید.
ابزارهایی مانند Inspect Element Console و SupportAlly به شما کمک می کنند از مشتری بهتر پشتیبانی کنید زیرا پشتیبانی فنی تیم مشتریانی را دوست دارد که در ارائه بازخورد دقیق از موضوع ابتکار عمل می کنند.
امیدواریم این مقاله به شما کمک کند تا اصول بازرسی و نحوه استفاده از آن را در سایت WordPres خود بیاموزید. همچنین ممکن است بخواهید نگاهی به پیش فرض وردپرس تولید تقلب CSS برای سرعت بخشیدن به مهارت های توسعه تم خود.
اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube مشترک شوید برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و Google+ .
منبع:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/.