illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

آموزش طراحی قالب (فصل ششم) : رفع اشکالات قالب

20650 ۱۶ مرداد ۹۲

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

حال میریم سراغ آموزش :

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

قالبی که طراحی کردیم، در سه مرورگر internet explorer9 , firefox19 و google chrome28 یکسان و بدون هیچ اشکالی نشان داده می شود، بجز در مرورگر opera12 که دارای چند اشکال هست که آن ها را به ترتیب رفع خواهیم کرد .

1.اولین مشکل قالب در مرورگر opera وجود اسکرول افقی که به علت استفاده ما از خاصیت text-indent برای لوگو و توضیح سایت بوده است.

ابتدا فایل style.css را باز کنید. در خط  105 از فایل style (البته اگر کدهاتون دقیقا مثل من بوده و کم زیاد نکردین) کدهای مربوط به #wrapper قرار دارد

حال برای رفع این مشکل خاصیت overflow را با مقدار hidden اضافه می کنیم

این کد باعث مخفی شدن سرریز قالب (هرفرزندی که خارج از عرض تعیین شده برای عنصر والد #wrapper قرار گیرد) می شود.

2. اشکال دوم مربوط به باکس جستجو است که به هدر چسبیده و فاصله ای ندارد برا اصلاح آن ابتدا به خط 159 بروید و کدهای زیر را پیدا کنید :

حال فقط کافیست خصوصیت display با مقدار table-caption را به ان اضافه کنید

3. اشکال سوم مربوط به تصاویر تبلیغات هست که به حاشیه بلوک چسبیده اند و margin-right بر آن ها اثر نکرده است تا در وسط بلوک قرار گیرند. برای رفع این مشکل نیز ابتدا به خط 252  بروید تا کدهای زیر را پیدا کنید :

حال کدهارا به شکل زیر تغییر دهید

با استفاده ازخاصیت display تصاویر را به عناصر block تغییر دادیم چونکه همانطور که می دانید، تصاویر جزء عناصر inline هستند، و در اینجا به دلیل اینکه در چپ و راست تصویر چیز دیگری قرار نمی گیرد، display آن را block کردیم.

4.اشکال چهارم و آخر مربوط به اطلاعات پست است که به شکل نامرتبی در مروگر opera نمایش داده شده اند.

برا رفع اشکال آن ها نیز به خط 308 بروید و کدهای زیر را پیدا کنید :

حال برای رفع اشکال ان ها، کدهارا به شکل زیر تغییر دهید:

در این کد ابتدا، divها را به صورت، جدولی با استفاده display: table-cell مرتب کردیم، و سپس margin را پاک کرده و بجای ان برای خانه های جدول، عرض تعیین کردیم و به این صورت مشکل ان را حل کردیم.

5. اشکال بعدی که متوجه آن شدم و در همه ی مرورگرها نیز وجود دارد، تصویر دکمه جستجو هست، وقتی که موس را بر روی آن می بریم، cursor ما همان حالت عادی را دارد و تغییری نمی کند، که کاربر متوجه شود این یک تصویر کلیک شدنی هست. مقداری پایینتر از کدهای قبلی و در 174  کدهای زیر را پیدا کنید :

حال خصوصیت cursor و مقدار pointer را به ان بدهید :

تا این اشکال نیز برطرف شود.

نکته :

رفع اشکالات نمایش قالب کار بسیار مهمی هست، که باید به درستی انجام شود و از خصوصیت های مناسب استفاده کرد. درست انجام ندادن این کار باعث رفع مشکل در یک مرورگر و ایجاد مشکلات دیگر در سایر مرورگرها می شود. ابن کار طبعا قانون یا همان استاندارد خاصی ندارد و بیشتر با آزمون و خطا انجام می شود، یعنی خصوصیت های مختلف با مقادیر مختلف را تست کنید تا به نتیجه مطلوب برسید. خصوصیت های پرکاربرد برای اصلاح باگ های قالب margin , padding postion  و  display هستند.

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

برای اینکار فایل index.html را در ویرایشگر کد باز کنید و به خط 36  بروید و کد زیر را پیدا کنید :

جال کد را به شکل زیر تغییر دهید :

بسیار خب، کار ما به پایان رسید. خسته نباشید.

دانلود فایل html و css اصلاح شده

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 43 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    سلام . واقعا زحمت کشیدی . خیلی خوب بود .

    آموزش تبدیل به wordprees رو کی شروع می کنید ؟ ❗

    • ‏‏
      سجاد دریس(۱۳ فروردین ۱۳۹۳)

      از لینک زیر قابل دسترسی هست :

  • ‏‏

    سلام من این اموزشو دیروز تموم کردم قالبم با firefox درست بود ولی با explorer درهم برهم بود این اشکالاتی رو هم که تو این جلسه گقتین مینوشتم قالبم درست که نمیشد تو firefox هم بهم میریخت جالبش اینجاست که من امروز که فایل هارو باز کردم کلا فالبم تو firefox بهم ریخته نمیدونم چرا
    فایل css خودمو با فایل css شما مقایسه کردم فرقی نمیکنه ولی وقتی فایل شما رو با مال خودم جا بجا میکنم کار میکنه ولی با فالی خودم نه میشه نگاه کنید ببینید مشکلم کجاست؟
    یک دنیا ممنون
    http://upir.ir/1393.2/ghaleb_d0453.zip

    • ‏‏
      سجاد دریس(۸ خرداد ۱۳۹۳)

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

  • ‏‏

    سلام دوستان.ممنون از آموزشهای خوبتون.من میخوام این سری آموزشی رو شروع کنم و بعد از آن هم قالب وردپرس.میخواستم ببینم اگر من از نظر گرافیکی قالب که شما آن را در قسمتهای اول آموزش میدید قالب رو به سلیقه خودم متفاوت طراحی کنم باید کدهارو هم تغییر بدم؟و به مشکل برمیخورم بانه؟و اگر جواب شما آری است با بلد بودن css میتونم کدهارو خدم تغییر بدم براساس قالبم؟ممنون

    • ‏‏
      لقمان آوند(۲۵ خرداد ۱۳۹۳)

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

  • ‏‏
    پوریا(۵ مرداد ۱۳۹۳)

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

    • ‏‏
      سجاد دریس(۱۳ مرداد ۱۳۹۳)

      از فایل index.html کپی بگیرید و فایل رو طبق نیازتون ویرایش کنید

  • ‏‏

    سلام خسته نباشید
    من دقیقا عین کد شمارو نوشتم اما قسمت footer سایت توی برنامه دریم بکگراند داره
    اما وقتی روی مرورگر اجراش میکنم بدون رنگه.مشکلش چیه؟
    یه قسمت دیگه هم اینجوریه توی برنامه همه به یه ردیف و مرتب هستن وقتی اجرا میشه
    همه زیر هم میرن و بکگراندهم از بین میره با دوتا مرورگرم امتحان کردم بازم همینجوریه

    میشه لطف کنید و اون قسمتی که به عنوان css reset نوشتین رو توضیح بدین؟

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram