سه شنبه ۲۸ دی ۱۴۰۰

Tuesday, January 18, 2022 GMT +3:30

دلایل بهم ریختن قالب وبلاگ و سایت

web-template-question

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

نوع طراحی قالب


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

عدم سازگاری قالب با مرورگرها


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

درج محتوای غیر استاندارد


علت دیگری که می تواند سبب بهم ریختن قالب وب شود نوع مطالب و محتوایی است که مدیر سایت یا وبلاگ در آن درج می کند، به طور مثال درج تصاویری که پهنای پیکسلی آنها بیش از صفحه طراحی شده برای نمایش مطلب است (به فرض درج یک تصویر با ابعاد 600 در 800 پیکسلی در یک بلاک با ابعاد 500 در 600 پیکسلی) ممکن است موجب شود تا کل قالب ناقص نشان داده شود و یا به فرض  نویسنده سایت یا وبلاگ یک عبارت طولانی را بدون فاصله در جعبه های کناری قرار دهد (به فرض عبارت weeeeeeeeeeeee...b) که این موضوع موجب می شود تا مرورگر نتواند کلمات را بشکند و در خط بعدی نشان دهد و این خود باعث ایجاد مشکل می شود، لذا برای تصاویر بهتر است از مقدار عرض و ارتفاع (width و height) کمتر از فضای موجود استفاده کنیم و برای نوشته ها از موارد طولانی و غیرقابل شکست (non-breaking) خودداری کنیم، در همین رابطه درج کدهای فلش غیر استاندارد، درج پلیرهای وب با ابعادی بزرگتر از بلاک دربرگیرنده آنها و مواردی از این دست نیز می توانند موجب بهم ریخته شدن قالب وب شوند.

کدنویسی غیر استاندارد


استفاده از کدهای غیر استاندارد نیز از دلایل دیگر بهم ریخته شدن قالب وب است، به طور مثال استفاده از برخی کدهای جاوا اسکریپت که دقت و تست کافی در نوشتن آنها نشده باشد، استفاده صرف از فرمت فلش که باعث می شود برخی از کاربران نتوانند این فرمت را مشاهده کنند یا به کار بردن بیش از حد توابع و کتابخانه های جی کئوری (jQuery) و جاوا اسکریپت (JavaScript) که بعضا با هم ناسازگاری نیز ممکن است داشته باشند و... همچنین این موارد موجب می شوند کاربرانی که این قابلیت ها در مرورگر آنها غیر فعال است یا پشتیبانی نمی شود، نتوانند از تمام امکانات به درستی استفاده کنند، بهتر است بیشتر از موارد و امکاناتی بهره بگیریم که اکثر کاربران قادر به مشاهده و استفاده از آنها باشند، در واقع یک قالب وب خوب باید حتی الامکان در شرایط غیرفعال بودن امکاناتی نظیر پلاگین فلش، جاوا اسکریپت و... نیز قابل استفاده باشد و فرم آن بهم نریزد.

دستکاری قالب سایت و وبلاگ


دستکاری شدن قالب ها و پاک شدن برخی تگ ها نیز از دلایل شایع بهم ریخته شدن آنها است، هر چند ممکن است تجربه و آشنایی کافی با تگ ها و اصول برنامه نویسی وب را داشته باشیم، اما با این حال بهتر است قبل از اعمال هر نوع تغییری در قالب، ابتدا از آن پشتیبان تهیه کنیم که در مواقع لزوم بتوانیم وضعیت را به حالت سابق تغییر دهیم، با رعایت این نکات ساده می توان از بروز مشکل به هم ریختن قالب سایت و وبلاگ تا حدود زیادی پیشگیری کرد.
دسته بندی: مهارتهای وب » دانستنی ها
related مطالب بیشتر:
IP چیست و چه کاربردی دارد؟
اصطلاحات و مفاهیمی که مدیر سایت باید بداند!
مفهوم پلتفرم (Platform) و فریم ورک (Framework)
آموزش کاربردی عبارات با قاعده (Regular Expressions)
پروتکل امن HTTPS و رمزنگاری SSL چیست؟
دیدگاه
more ۳۶ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
نویسنده: seyedsobhanmansouri
۲۱:۳۸ ۱۳۹۹/۱۰/۱۹
سلام خسته نباشید
من سایتمو طراحی کردم اما به این مشکلات بر میخورم
اول اینکه هدر سایتم نمایش داده نمیشه اصلا و بعد اینکه اسلایدر و بنر تبلیغاتیم در گوشی بهم می خوره اگر میشه راهنماییم کنید ممنون
پاسخ: 
استایل CSS قالب برای گوشی های تلفن همراه دارای ایراداتی است، رفع مشکل زمانبر است و نیاز به آزمایش و خطا دارد، باید با یک طراح وب موضوع را مطرح کنید.
نویسنده: parsa
۱۳:۳۰ ۱۳۹۹/۱۱/۱۵
سلام من در حال اموزش اچ تی ام ال و سی اس اس هستم من برای اموزش یک سایت نوشتم مشکل این هست که وقتی زوم می کنم درست زوم نمیشه همه چی بهم میریزه
پاسخ: 
این نوع مشکلات معمولا از مقداردهی پیکسلی ثابت به المان ها ناشی می شود که با تغییر Viewport در هنگام زوم به صورت ناهماهنگی تغییر می کنند، سعی کنید تکنیک های طراحی واکنش گرا (Responsive) را در قالبتان اعمال و از مقداردهی درصدی به جای پیکسل استفاده کنید، همچنین متاتگ زیر را در قالبتان داشته باشید:
<meta name="viewport" content="width=device-width, initial-scale=1">
در نهایت ممکن است نیاز به تست و آزمایش خطا و در نظر گرفتن فضای بیشتر برای المان هایی باشد که در حالت زوم ایجاد مشکل می کنند.
نویسنده: امیر حسین مروتی
۱۰:۴۲ ۱۳۹۹/۱۲/۲۳
سلام. من سایتم که کد نویسی کردم در دستگاه های مختلف به شکل های دیگری درمیاد. تو تلویزیون هر کاری کرم تمام صفحه نمیشد تو کامپیوتر درست میاره تو گوشی هم محتواها میرن تو دل هم. چیکار باید کنم؟
پاسخ: 
برای داشتن قالب سازگار با تمام دستگاه ها و صفحه نمایش ها باید با تکنیک های طراحی واکنش گرا (Responsive) آشنا باشید، از جمله این تکنیک ها استفاده از مقداردهی درصدی به جای حالت های ثابت (به فرض پیکسلی) است، همچنین استفاده از media screen و در نظر گرفتن استایل CSS مخصوص دستگاه های موبایل، آشنایی اولیه:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
نویسنده: zahra nosrati
۰۹:۱۷ ۱۴۰۰/۰۲/۰۱
سلام خسته نباشید. ببخشید من یک سایت html با استایل دهی css ایجاد کردم اما هنگام کوچک نمایی سایت بهم میریزه برای حل این مشکل باید چه کاری انجام بدم؟
پاسخ: 
بدون بررسی قالب نمی توانیم نظر خاصی بدهیم ممکن است ایراد جزئی باشد اما در کل روش هایی برای طراحی قالب های واکنش گرا یا Responsive با استفاده از قابلیت های CSS وجود دارد که می توانیم برای صفحه نمایش هایی با ابعاد مختلف خاصیت های CSS متفاوتی تعریف کنیم، این روش ها عمدتا مبتنی بر مقداردهی درصدی (به جای پیکسلی ثابت) و استفاده از media screen هستند، لطفا در وب در این خصوص جستجو کنید، آموزش های مختلفی در دسترس است.
نویسنده: پوریا
۱۴:۵۲ ۱۴۰۰/۱۰/۰۴
سلام وقتتون بخیر اساتید محترم
من پلاگین مرغ مگسخوار hummingbird رو روی سایتم نصب کردم (قالب استودیار) و دیدم که پولی شده و هیچیش کار نمیکنه و پاکش کردم از اون زمان به بعد اسلایدر سایت دیر لود میشه انگار که cssش بهم ریخته ولی وقتی چک میکنم میبینم همه چی درسته اما مشکل کماکان باقیست
ممنون میشم راهنمایی بفرمایید
پاسخ: 
حل مشکل نیاز به بررسی دقیق سایت دارد که آدرس URL را درج نکرده اید، در هر صورت برای تست می توانید در مرورگر گوگل کروم دکمه F12 را بزنید و در ابزار توسعه دهنده سربرگ Network، قسمت Waterfall منبعی که بیشترین تاثیر در کندی بارگذاری صفحه دارد را پیدا کنید، اگر ایراد از فایل های قالب سایت نباشد و بارگذاری URL اصلی بیش از اندازه طول بکشد باید از خطایابی سمت سرور استفاده کرد که نیازمند دسترسی به پنل هاست و یک حساب موقت است.
نویسنده: پوریا
۰۹:۴۳ ۱۴۰۰/۱۰/۰۵
سلام url سایت که گفتم بعد از نصب پلاگین دچار مشکل شد:
https://feiziket.com
پاسخ: 
سایتتان بررسی شد، چند دلیل برای کندی بارگذاری ممکن است وجود داشته باشد:
- بیشترین تاخیر بارگذاری را "اینماد" دارد
https://trustseal.enamad.ir/logo.aspx?id=204692&Code=cYhG16vXtW4iakbmWuvC
که مستقیم از سرور سایت مربوطه فراخوانی می شود، توصیه می کنیم در صورت امکان لوگوی اسکریپت را از سایت خودتان به صورت تصویر نمایش دهید و لینک را به سایت اصلی اینماد متصل کنید.
- مورد دوم مربوط به فایل های زیر است که خطای 404 و 400 دارند:
https://chimpstatic.com/mcjs-connected/js/users/015ce61cfebcdfa44a26da97d/dc61a3d7cfd660200d4f16aec.js

https://fonts.googleapis.com/css?family=IRANSansWeb:700%2C400%2C200&display=swap
باید ببینید این فایل ها از کدام قسمت سایت منشاء می گیرند و در صورت امکان به صورت دستی آدرس ها را غیرفعال و از خروجی صفحه حذف کنید.
- مورد سوم وجود اسکریپت Google Analytics در سورس صفحه است که کمی دیر بارگذاری می شود.
به جزء این موارد سرعت کلی صفحه به نظر موردی ندارد و عادی است.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده می شود.
- کدها و اسکریپت های طولانی را در یک صفحه وب آنلاین قرار دهید تا امکان بررسی دقیق و خطایابی میسر باشد.
- ممکن است پاسخ سوالتان نیاز به کدنویسی داشته باشد، در این موارد مدت زمان بیشتری برای پاسخگویی مورد نیاز است.
- تمام دیدگاه ها خوانده شده و زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا تا هنگام انتشار دیدگاه شکیبا باشید.



 refresh
10 × 10
8 × 6
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
Bahar
در:
سلام ،کدام لیست ترتیب قرارگیری انها اهمیت نداره؟ ازبین اینها؟
۱۴۰۰/۱۰/۲۷

حدیثه یدی
در:
سلام خسته نباشید ، خیلی وبلاگ خوبی دارید، مطالبتون واقعا مفید بود .. من یک سوالی داشتم می‌خوام برای وبلاگم فونت های مختلف پیدا کنم...
۱۴۰۰/۱۰/۲۶

Fatemeh
در:
سلام چه طوری داخل این کادرهای که ایجاد میشه با این کد متن txt1, txt2 ,... نوشته شود؟
۱۴۰۰/۱۰/۲۵

Fatemeh
در:
سلام وقت بخیر چطوری میتونم موارد زیر رو انجام بدم؟! میشه کمک کنید ممنون! پوسته تارنمای فروشگاه آنالین لوازم خانگی را به صورت زیر...
۱۴۰۰/۱۰/۲۵

سپیده
در:
سلام مجدد لینک صفحه خدمت شما ممنون میشم راهنمایی کنید کدی که توی پیام قبلی ارسال کردین رو کجا باید بگذارم؟
۱۴۰۰/۱۰/۲۳

سپیده
در:
سلام و درود سایتم وردپرس هست و با المنتور طراحی کردم توی صفحه ویرایش حساب کاربران، میخوام فیلد تغییر آدرس ایمیل رو حذف کنم....
۱۴۰۰/۱۰/۲۲

حسین
در:
سلام ببخشید یک سوال داشتم چجوری میشه با زدن یک دکمه کمی بالاتر یا پایین تر برود یا با زدن نوشته ای...
۱۴۰۰/۱۰/۲۲

سپهر
در:
سلام استاد ضمن تشکر از آموزش خوب شما عرض شود بنده دارم یک ربات چت ساده می‌سازم که در بانک اطلاعات خود دو ستون...
۱۴۰۰/۱۰/۲۱

Fatemeh
در:
سلام روز بخیر این کد مشکلش چیه؟!
۱۴۰۰/۱۰/۱۹

پـــرتو
در:
سلام خسته نباشید ببخشید مزاحم میشم من قالبی ک بهتون دادم یادتون میاد؟کدش رو دارین؟میشه براش لطفا اگه میشه عنوان بزارین؟چون عنوان نداره ممنون...
۱۴۰۰/۱۰/۱۷

مهلا
در:
من یه تکه کدی نوشتم با زبان php که 9 عکس دادم با سه سطر و ستون می‌خوام در خروجی این عکسها بطور تصادفی...
۱۴۰۰/۱۰/۱۵

امیرحسین
در:
سلام وقت بخیر بنده یه سوال خیلی مهمی داشتم که اگر کمک کنید و راهکاری به من بدید سوالم اینه که من دارم یه ربات...
۱۴۰۰/۱۰/۱۴

وحید
در:
سلام خسته نباشید و ممنون از شما من میخواستم بدونم چطوری میشود فیلم های طولانی در وبلاگ بگذاریم ممنون
۱۴۰۰/۱۰/۱۴

Fatemeh
در:
وقت بخیر متاسفانه من هر کدی مینویسم یه اشکالی داره این کد مشکلش چیه؟🤦🏻‍♀️
۱۴۰۰/۱۰/۱۲

نازنین
در:
اسکریپتی بنویسید که نام و نام خانوادگی و سال تولد شخص را دریافت کرده، علاوه بر نمایش نام و‌ نام خانوادگی در مرورگر، سن فرد...
۱۴۰۰/۱۰/۱۲

عباس صلاحی
در:
با سلام خدمت شما و تشکر از سایت خوبتون بنده یک table درام که سه ستون در کنار هم داره می خوام که وقتی...
۱۴۰۰/۱۰/۱۲

Fatemeh
در:
سلام وقت بخیر خسته نباشید این تیکه کد با دستور if چه مشکلی داره!؟
۱۴۰۰/۱۰/۱۲

بابایی
در:
سلام وقت بخیر این آدرس یکی از مقالاتی هست که داخل سایت گذاشتم میخوام یه تغییری بدم که این اعداد وسط لینک آدرس نباشه...
۱۴۰۰/۱۰/۱۲

elahe
در:
سلام وقتتون بخیر من در جدول پایگاه داده کتابخانه 4 تا ستون دارم که میخوام هر فیلد رو در یک لیبل بریزم در واقعه یک...
۱۴۰۰/۱۰/۱۲

m.b
در:
سلام مجدد تشکر بابت راهنمایی من یک مشکل دیگه برام بوجود آمد و اون اینکه بعد از ارسال اطلاعت به صفحه questions.php بر...
۱۴۰۰/۱۰/۱۱

m.b
در:
سلام من یک فرم طراحی کردم جهت ارسال سوال با صفحه questions.php با متد post به صفحه dbquestions.php ارسال میشود. این نمونه کد های...
۱۴۰۰/۱۰/۱۱

m.b
در:
با سلام ضمن تشکر از وب سایت خوبتان من مطابق کدهای شما عمل کردم و تمامی کدها رو کپی کردم و...
۱۴۰۰/۱۰/۱۱

fateme
در:
سلام ممنون از سایت خوبتون من سوالم اینه که چجوری داخل منو که با li هست لینک بزاریم تگه لطف کنید بگید ممنون میشم
۱۴۰۰/۱۰/۱۱

مهلا
در:
میخام با php دو تا عدد بنویسم که اگه عدد اول بزرگتر بود 5 بار چاپ کنه که عدد اول بزرگتراست. ممنون میشم جواب بدید...
۱۴۰۰/۱۰/۱۱

Fatemeh
در:
ممنون از پاسخگویی مشکل این یکی کد چیه ؟
۱۴۰۰/۱۰/۱۱

Fatemeh
در:
سلام وقت بخیر مشکل این کد چیه اجرا نمیشه؟
۱۴۰۰/۱۰/۱۱

Fatemeh
در:
سلام وقت بخیر چطوری میتونم یه کد با prompt.window بنویسم که هنگام باز شدن صفحه وب یک عدد از کاربر بگیره و رقم...
۱۴۰۰/۱۰/۱۰

zahra
در:
سلام وقتتون بخیر باشه من میخام از 1 تا 30 روز و برام چاپ کنه یعنی اگر ماه 31 روز بود 1 تا 31 را...
۱۴۰۰/۱۰/۰۸

پوریا
در:
سلام url سایت که گفتم بعد از نصب پلاگین دچار مشکل شد:
۱۴۰۰/۱۰/۰۵

پوریا
در:
سلام وقتتون بخیر اساتید محترم من پلاگین مرغ مگسخوار hummingbird رو روی سایتم نصب کردم (قالب استودیار) و دیدم که پولی شده و هیچیش...
۱۴۰۰/۱۰/۰۴

کیوان عباسپور
در:
سلام ممنون از سایت خوبتان متاسفانه ایمیل های ارسالی اسپم شناسایی میشن واسه رفع این مشکل چیکار کنم منظورم اینه که ایمیل ها...
۱۴۰۰/۱۰/۰۱
  در انتظار بررسی: ۳
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.