آقای برنامه نویس

سفارشی سازی قالب وردپرس با ابزار inspect element

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

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

آقای برنامه نویس | قالب و افزونه اورجینال وردپرس | آموزش رایگان المنتور
آقای برنامه نویس
آموزش رایگان المنتور

ابزار توسعه یا inspect element چیست؟

مرورگرهای مدرنی مانند فایر فاکس و یا گوگل کروم ابزاری ساختند که به توسعه دهندگان وب اجازه میدهد بصورت زنده به عیب یابی و سفارشی سازی صفحات وب بپردازند. این ابزار کد های html و CSS و کدهای javascript موجود در یک صفحه وب را نشان میدهد.
با استفاده از ابزار inspect element مرورگر شما میتوانید کدهای html و css و javascript را برای هر صفحه وبی ویرایش کنید تا بصورت زنده تغییرات را مشاهده کنید.

( توجه: تنها روی کامپیوتر و مرورگر خود این تغییرات را میبینید )


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


برای طراحان وبسایت مثلا زمانی که یکی از عناصر صفحه مانند آکاردئون یا اسلایدر به درستی کار نمیکند، این ابزار یک راه مناسب برای برای شناسایی خطا است.
در این مقاله ما تنها تعداد کمی از مزایای ابزار inspect elemnt را شرح داده ایم. پس از استفاده از این ابزار کاملا متوجه خواهید شد که این ابزار به چه اندازه سودمند و قدرتمند است.
در این مقاله، ما از ابزار inspect گوگل کروم استفاده کردیم، فایرفاکس و مرورگر های دیگر نیز این ابزار را دارد که عملکردی کاملا مشابه ابزار inspect گوگل کروم دارد.


راه اندازی Inspect element و محل قرارگیری کدها

می‌توانید کار را با فشردن کلید های ترکیبی CTRL+Shift+I شروع کنید. یا به جای اینکار میتوانید روی صفحه وب کلیک راست کنید و روی گزینه Inspect کلیک کنید.

سفارشی سازی قالب وردپرس با ابزار inspect element
سفارشی سازی قالب وردپرس با ابزار inspect element

سپس پنجره مرورگر شما به 2 قسمت تقسیم میشود و پنجره پایین یا سمت راست صفحه، کد صفحه وب را نشان میدهد.
پنجره inspect مرورگر نیز به 2 قسمت تقسیم میشود.در قسمت سمت چپ کدهای HTML را که برای این صفحه نوشته شده میبینید. در سمت راست، عناصر و کلاس های css را مشاهده میکنید.

سفارشی سازی قالب وردپرس با ابزار inspect element
سفارشی سازی قالب وردپرس با ابزار inspect element

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

سازی قالب وردپرس با ابزار inspect element 1 - آقای برنامه نویس
ویرایش قالب وردپرس با استفاده از inspect element

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

ویرایش و عیب یابی کدها در ابزار Inspect element

هردو قسمت کدهای HTML و CSS در inspect قابل ویرایش هستند. برای انجام این کار شما می‌توانید روی هر قسمتی از HTML که میخواهید ویرایش کنید دابل کلیک کنید.

ویرایش کدهای html در ابزار Inspect element
ویرایش کدهای html در ابزار Inspect element

همچنین برای ویرایش هر قسمت از css نیز میتوانید دوبار روی آن کلیک کنید. برای افزودن استایل های سفارشی نیز میتوانید روی آیکون + در قسمت بالای کادر css کلیک کنید.

ویرایش کد های css در ابزار Inspect element
ویرایش کد های css در ابزار Inspect element

تغییرات روی html و css فورا روی صفحه مرورگر اعمال میشود و شما میتوانید آنها را ببینید.

انجام تغییرات روی صفحه وب با استفاده از inspect
انجام تغییرات روی صفحه وب در ابزار Inspect element

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


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

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

ابزار inspect element یک قسمت به نام console دارد که تمام ارورهایی که روی سایت وجود دارد را نشان میدهد. زمانی که برای رفع خطا تلاش میکنید یا از نویسندگان پلاگین درخواست پشتیبانی دریافت میکنید، اگر به این قسمت نگاه بیندازید می‌تواند خیلی مفید باشد.

استفاده از تب console در ابزار inspect
استفاده از تب console در ابزار Inspect element

برای مثال اگر از افزونه بلوم استفاده کرده اید و فرم مد نظر شما به درستی لود نمیشود، به راحتی میتوانید علت مشکل را پیدا کنید.

یا اگر نوار به اشتراک گذاری شما درست کار نکند و خطای جاوا اسکریپت وجود داشته باشد میتوانید آن را ببینید.

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

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام آقای برنامه نویس عضو شوید.
تیم تولید محتوا
تیم تولید محتوا
ما در تیم تولید محتوای آقای برنامه نویس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را برای شما فراهم کنیم.
تیم تولید محتوا
تیم تولید محتوا
ما در تیم تولید محتوای آقای برنامه نویس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را برای شما فراهم کنیم.

2 پاسخ

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

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

پاسخ خود را پیدا نکردید؟
همکاران ما آنلاین هستند تا پاسخگوی سوالات شما باشند حتما سوال خود را در بخش دیدگاه ها بپرسید.
آموزش افزونه دستیار سلامت
آموزش راه اندازی افزونه دستیار سلامت

آموزش راه اندازی افزونه دستیار سلامت تنها افزونه ایرانی محاسبه توده بدنی و بررسی سلامتی و تناسب اندام کاربران https://files.mr-programer.ir/videos/dastyar-salamat-plugin.mp4 امروزه افراد به تناسب اندام

جلسه ۲: حداقل سیستم مورد نیاز برای المنتور - آقای برنامه نویس
جلسه 2: حداقل سیستم مورد نیاز برای المنتور

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

اتصال MailChimp به المنتور (اتصال میل چیمپ به المنتور)
اتصال MailChimp به المنتور، ساخت فرم عضویت در خبرنامه

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

افزونه مستر پک برای افزونه صفحه ساز المنتور
افزونه مستر پک در مخزن وردپرس به‌صورت رایگان منتشر شد!

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

ساخت دکمه گرادیانت در المنتور، بدون افزایه جانبی
ساخت دکمه گرادیانت در المنتور، بدون نیاز به افزایه جانبی

تیم توسعه المنتور در آپدیت 3.2.1 امکانات جالبی به افزونه المنتور اضافه کرده است. یکی از این امکانات قابلیت ساخت دکمه گرادیانت در المنتور بدون نیاز به افزونه جانبی دیگری هست، که باعث میشود ظاهر دکمه های ساخته شده با المنتور بسیار زیباتر شود.

قابلیت کد کوتاه ضروری در افزونه المنت پک - آقای برنامه نویس
قابلیت کد کوتاه ضروری در افزونه المنت پک

استفاده از کد های کوتاه در نوشته ها و بخش های سایت امکانات زیادی را برای ما فراهم میکند. در این مقاله ما به بررسی ویژگی کد کوتاه ضروری در افزونه المنت پک می‌پردازیم. پس با ما همراه باشید…

تغییرات وردپرس 5.7 - آقای برنامه نویس
وردپرس 5.7 منتشر شد!

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

طراحی صفحه در دست تعمیر وردپرس با المنتور
طراحی صفحه در دست تعمیر وردپرس با المنتور

وردپرس برخی اوقات به بروزرسانی و تعمیر احتیاج داره. و هنگامی که وبسایت در دست تعمیر و دیباگ هست برای حفظ امنیت وبسایت نمیتوان وبسایت را در دسترس بازدید کنندگان قرار داد. به همین دلیل هنگام تعمیر وبسایت، ترجیحاً حالت تعمیر رو فعال میکنند!

اشتراک گذاری

اشتراک گذاری در twitter
اشتراک گذاری در pinterest
اشتراک گذاری در whatsapp
اشتراک گذاری در telegram