مشکل فاصله با" />

مشکل فاصله بالای صفحه قالب وردپرس


مشکل فاصله بالای صفحه قالب وردپرس

مشکل فاصله بالای صفحه قالب وردپرس

قالب وردپرس یکی از مسائلی است که در حال حاضر یکی از بازارهای داغ اینترنت میباشد

که تعداد افراد زیادی به فکر استفاده از این بازار میباشند.

اما در حین طراحی قالب وردپرس گاهی اوقات به مشکلات عجیب و غریبی بر میخوریم

که واقعا متوجه علت این مشکلات نمیشویم.

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

در برخی قالب ها هدر سایت از بالای صفحه مقدار مشخصی فاصله دارد و نمیشود با margin نیز این مشکل را حل کرد

چون این مشکل فقط در برخی مرورگر ها وجود دارد

و اگز در یک مرورگر با margin درست کنیم در مروگر های دیگر درست نمایش داده خواهد شد

و این در حالی است که باید در وب سایت و قالب در تمامی مرورگر ها بدون مشکل باز شد.

خب بریم سراغ راه حل های این مشکل در قالب وردپرس

راه حل اول : استفاده از ریست سی اس اس ( CSS Reset )

 

تقریبا باید تموم کاربران با این کد های سی اس اس اشنایی داشته باشند این دستورات ریست در سی اس اس باعث میشود

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

به بیانی دیگر => CSS Reset مجموعه ای از استایل سی اس اس ( CSS Style ) است

که تمامی Style پیش فرض عناصر و تگ های HTML ( که در مرور گرهای گوناگون ، متفاوت است ) را در حالت پیش فرض قرار میدهد .

با استفاده از این روش تمامی مرورگرها به طور پیش فرض دارای نمایش یکسانی خواهند بود

و طراح وب سایت می تواند با استفاده از این روش استایل ها (CSS Style ) را با توجه به نیازهای خود تعیین کند.

 

بنابراین این مشکل پیش امده ممکن از این بابت باشد

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

 

این قطعه کد باید در ابتدای فایل style.css قالب وردپرس قرار گیرد

و یا در فایل مجزا در head قالب فراخوانی شود.

 

 

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}

راه حل دوم : مشکل Encoding

 

اما یکی دیگر از مسایلی که میتونه باعث علت ایجاد این فاصله بشه مسئله Encoding میباشد

که باید حل بشه در صورتی که میخواهید در قالب از UTF-8 استفاده کنید باید توجه داشته باشید

که Encoding را در روی UTF-8 خالی قرار دهید یعنی روی encoding utf-8-bom نباید قرار داشته باشد.

بنابراین باید تک تک فایل های قالب را با نرم افزار Notepad++ باز کنید و Encoding را روی گزینه Encode in Utf 8 قرار دهید

و یا هم روی گزینه Encode in Utf 8 Without Bom قرار دهید

و سپس حتما فایل را ذخیره کنید.به احتمایل ۹۹ درصدمشکل شما حل خواهد شد.

 

راه حل سوم: کامل نبودن فایل های header.php و footer.php

 

دو کد معروف برای فایل های header.php و footer.php وجود دارد که این کد ها بسیار مهم میباشند

و باید حتما در فایل های مذکور وجود داشته باشند

و عدم وجود این کدها نه تنها باعث مشکل فاصله خواهد شد

بلکه برخی از افزونه های شما نیز کار نخواهند کرد.

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

 

//مخصوص قرار گرفتن کد در فایل header.php که باید قبل از کد </head> قرار بگیرد
<?php wp_head(); ?>
// مخصوص قرار گرفتن در فایل footer.php و قبل از کد </body> باید قرار بگیرد
<?php wp_footer(); ?>

 

خب امیدواریم که این مقاله ( مشکل فاصله بالای صفحه قالب وردپرس ) نیز برای شما مفید واقع شده باشد.




برچسب ها:



شما اولین دیدگاه را بنویسید!