آموزش کار با افزونه ی فایر باگ

[Mehrshad Zakerian]

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

در حقیقت این افزونه امکانات زیادی را برای ویرایش یک قالب به صورت مجازی فرآهم می آورد. در این آموزش قصد دارم تا به صورت تصویری برخی از قابلیت ها و ابزار این افزونه را به شما دوستان عزیز آموزش دهم. امیدوارم از آموزش لذت ببرید!

 

آیکون برنامه:

 

تصویری از محیط برنامه:

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

حال در قسمت پایین سمت چپ کدهای اچ تی ام ال مربوط به قالب را مشاهده می کنید و در قسمت سمت راست استایل های مربوط به سی اس اس قالب را میبینید.

اکثر قالب ها از دو قسمت اصلی سر و بدنه تشکیل شده اند که سایر اجزا در این دو قسمت قرار دارند. در صورتی که قصد ویرایش یک عنصر را در قسمت هدر یا بالایی قالب دارید باید به کدهای بخش سر مراجعه کنید و در صورتی که می خواهید یک عنصر را در قسمت بدنه ی قالب ویرایش کنید باید به بخش کدهای بدنه مراجعه کنید.

برای پیدا کردن عنصر مورد نظر خود شما سه راه پیش رو دارید:

 

1. گشتن در قالب ها با استفاده از بازکردن شاخه به شاخه ی کدها و پیدا کردن کد مورد نظر (در بخش کدهای اچ تی ام ال)

2. استفاده از ابزار جست و جو

3. استفده از ابزار انتخاب عناصر در صفحه

 

پس از انتخاب عنصر مورد نظر شما امکان ویرایش کدهای اچ تی ام ال و استایل های سی اس اس آن را خواهید داشت.

حال به بررسی هر یک از سه مورد می پردازیم:

 

روش اول – گشتن شاخه به شاخه در کدهای قالب

 

به طور مثال من می خواهم بخش نشان داده شده در تصویر را ویرایش کنم،

برای این کار ابتدا باید تشخیص دهم که این عنصر در کدام بخش قالب قرار دارد؟ سر یا بدنه؟ با نگاهی دقیق تر متوجه خواهیم شد که این عنصر در بخش بادی یا همان بدنه ی قالب قرار دارد. با زدن علامت + در کنار حرف بدنه جزئیات بیشتری را مشاهده می کنیم. با انتخاب شاخه ها و بازکردن آنها همانند عکس زیر به کد عنصر مورد نظر خود میرسیم.

روش دوم – استفاده از ابزار جست و جو

این روش نیازی به توضیح ندارد و شما می توانید با نوشتن قسمتی از کد مورد نظر یا نام عنصر آن را با استفاده از این ابزار بیابید

 

روش سوم – استفاده از ابزار انتخاب عناصر در صفحه

این روش که ساده ترین و جذابترین روش نیز می باشد به شما این امکان را می دهد تا با کلیک بر روی عنصر مورد نظر خود به کدهای آن دسترسی پیدا کنید!

برای این کار ابتدا این ابزار را انتخاب کنید، حال با رفتن بر روی هر عنصر کادری آبی روی آن نمایان می شود. کافیست عنصر مورد نظر خود را انتخاب کنید و آن را ویرایش کنید. همانند تصویر زیر:

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

و

شما می توانید کدهای مورد نظر خود را حذف یا اضافه کنید، جای عناصر را تغییر دهید، فونت ها را تغییر دهید، رنگ عناصر را عوض کنید و ...

به طور مثال من می خواهم رنگ پس زمینه ی عنصر مورد نظر خود را از خاکستری به سبز تغییر دهم. پس از انتخاب عنصر مورد نظر در بخش استایل های آن به دنبال رنگ خاکستری می گردم. بعد روی آن دوبار کلیک می کنم و به جای "شش تا ای انگلیسی" می نویسم "سبز به انگلیسی (گرین)". همانگونه که مشاهده می کنید رنگ پس زمینه ی این عنصر از خاکستری به سبز تغییر کرد. شما هر گونه تغییر دیگری را نیز میتوانید به همین صورت در قالب ایجاد کنید.

به این شکل در خواهد آمد

توجه داشته باشید که این تغییرات دائمی نیستند و با یک بار رفرش یا همان تازه سازی صفحه به حالت اولیه باز می گردند!

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

 

امیدوارم این آموزش برای شما عزیزان مفید بوده باشد

موفق و موید باشید

مهرشاد ذاکریان

http://presta-shop.ir