آیا تا به حال خواسته اید یک صفحه وب را به طور موقت ویرایش کنید تا ببینید با رنگها ، قلم ها ، سبک خاص چگونه به نظر می رسد؟ این با ابزاری که از قبل در مرورگر شما وجود دارد به نام "" امکان پذیر است. عنصر را بازرسی کنید ". این یک رویا برای همه کاربرانی که دوست دارند CSS را دستکاری کنند ، محقق می شود.
در این آموزش ، ما اصول بازرسی موارد و نحوه استفاده از آن را با سایت وردپرس شما مرور خواهیم کرد.
ابزار بازرسی اقلام چیست؟
مرورگرهای مدرن مانند Google Chrome و Mozilla Firefox ابزاری ساخته اند که به توسعه دهندگان وب اجازه می دهد خطاها را اشکال زدایی کنند. این ابزارها HTML ، CSS و JavaScript را برای یک صفحه نمایش می دهند و نحوه اجرای کد را نشان می دهند.
استفاده از ابزار " بازرسی عنصر می توانید کد HTML ، CSS یا JavaScript را برای هر صفحه وب ویرایش کنید و تغییرات خود را بصورت زنده مشاهده کنید (فقط بر روی کامپیوتر شما).
برای یک صاحب الف وب سایت، این ابزارها می توانند به شما کمک کنند تا بدون اعمال تغییرات برای همه، پیش نمایش کنید که یک سبک خاص چگونه به نظر می رسد.
برای نویسندگان ، این ابزارها بسیار جذاب هستند زیرا شما می توانید به راحتی اطلاعات قابل شناسایی شخصی را تغییر دهید در حالی که عکس های صفحه خود را از بین می برید و دیگر نیازی به محو شدن عناصر نیست.
برای نمایندگان پشتیبانی ، این یک روش عالی برای شناسایی خطایی است که می تواند باعث بارگیری نشدن گالری های شما یا جلوگیری از کار صحیح آنها شود.
ما فقط سطح موارد استفاده را می خراشیم ، زیرا ابزار " عنصر را بازرسی کنید واقعاً قدرتمند است
در این مقاله ، ما به ابزار " عنصر را بازرسی کنید از Google Chrome ، زیرا این مرورگر مورد نظر ما است. Firefox ابزار توسعه خاص خود را دارد که با انتخاب منو نیز می توان از آنها استفاده کرد " عنصر بازرسی '.
راه اندازی ابزار "بازرسی عنصر" و محلی سازی کد
شما می توانید این ابزار را با فشار دادن کلیدها راه اندازی کنید CTRL + SHIFT + I روی صفحه کلید شما متناوباً ، می توانید بر روی هر صفحه از یک صفحه وب کلیک کنید و سپس گزینه Inspect the menu menu را انتخاب کنید.
پنجره مرورگر شما به دو قسمت تقسیم می شود و پنجره پایین کد منبع صفحه وب را نشان می دهد.
پنجره ابزار توسعه دهنده به دو پنجره تقسیم می شود. در سمت چپ خود ، کد HTML صفحه را مشاهده خواهید کرد. در پنجره سمت راست ، قوانین CSS را مشاهده خواهید کرد.
با حرکت دادن موس خود بر روی منبع کد HTML ، منطقه برجسته شده را در صفحه وب مشاهده خواهید کرد. همچنین برای این عنصر مورد نظر ، قوانین CSS را متوجه خواهید شد.
همچنین می توانید نشانگر ماوس را روی یک مورد در صفحه وب بگیرید ، کلیک راست کنید و " عنصر را بازرسی کنید " موردی که کلیک کردید در کد منبع برجسته می شود.
کد برنامه نویس و اشکال زدایی برنامه نویس
HTML و CSS در پنجره بازرسی عناصر قابل ویرایش هستند. می توانید روی کد منبع HTML دوبار کلیک کرده و کد مورد نظر خود را ویرایش کنید.
همچنین می توانید در کادر CSS ویژگی های سبک را دو بار کلیک کرده و ویرایش کنید. برای افزودن یک قانون ، روی نماد به علاوه در قسمت سبک در بالای صفحه کلیک کنید.
وقتی تغییراتی در کد CSS یا HTML ایجاد می کنید ، این تغییرات فوراً در مرورگر شما منعکس می شوند.
توجه داشته باشید که همه تغییرات ایجاد شده در اینجا در هر مکانی ذخیره نمی شوند. ابزار عنصر را بازرسی کنید یک ابزار اشکال زدایی است و تغییرات شما را در پرونده روی سرور شما ذخیره نمی کند. این بدان معنی است که اگر صفحه را تازه کنید ، تمام تغییرات شما از بین می رود.
برای ایجاد تغییرات واقعی، باید سبک خود را تغییر دهید تم وردپرس یا الگویی برای اضافه کردن تغییراتی که می خواهید ذخیره کنید.
قبل از شروع ویرایش خود تم وردپرس موجود با استفاده از ابزار " عنصر را بازرسی کنید مطمئن شوید که با ایجاد یک موضوع کودک ، تمام تغییرات خود را ذخیره می کنید.
چگونه به راحتی خطاهای وردپرس را پیدا کنید
ابزار عنصر را بازرسی کنید منطقه ای به نام " کنسول که تمام خطاهایی را که در سایت شما وجود دارد نشان می دهد. قبل از تلاش برای رفع اشکال یا درخواست کمک از نویسندگان یک موضوع یا افزونه ، همیشه ارزش جستجو در اینجا برای دیدن چه اشتباهی وجود دارد.
مثلاً اگر مشتری بودید OptinMonster چه کسی تعجب می کند که چرا انتخاب خود را بارگیری نمی کند ، پس می توانید به راحتی مشکلی را پیدا کنید که نشان می دهد "" سمبل صفحه شما مطابقت ندارد '.
اگر نوار اشتراک شما به درستی کار نمی کند ، می توانید خطای JavaScript را ایجاد کنید.
این همه برای این آموزش است، امیدوارم بهتر بتوانید خودتان را سفارشی کنید وبلاگ وردپرس. این آموزش را با دوستان خود به اشتراک بگذارید.
