<var id="lljjd"><video id="lljjd"></video></var>
<var id="lljjd"><video id="lljjd"><listing id="lljjd"></listing></video></var><var id="lljjd"><strike id="lljjd"><listing id="lljjd"></listing></strike></var><menuitem id="lljjd"><dl id="lljjd"><listing id="lljjd"></listing></dl></menuitem> <cite id="lljjd"><strike id="lljjd"><thead id="lljjd"></thead></strike></cite>
<cite id="lljjd"><strike id="lljjd"><listing id="lljjd"></listing></strike></cite><var id="lljjd"><strike id="lljjd"><thead id="lljjd"></thead></strike></var>
<ins id="lljjd"><span id="lljjd"><var id="lljjd"></var></span></ins>
<var id="lljjd"></var>
開啟左側

Wordpress網站GreenGaint主題破壞網頁布局的隱形

[復制鏈接]
867 0
林峰 發表于 2012-3-6 18:31:21 | 只看該作者 |閱讀模式 打印 上一主題 下一主題
在創建GreenGaint主題的過程中,有兩個網頁布局上的問題讓我頭疼了很長時間,一直沒有找出到底是哪里出了問題,但之后卻在偶然的情況下將這兩個問題解決了。這篇文章里我就將這兩個破壞網頁布局的隱形殺手總結一下,作為經驗教訓,供大家借鑒。先讓我來說說第一個問題。
一、謹慎使用wp_head()語句發現第一個問題的起因是我在<body>標簽下創建了一個<div id=”wrapper”></div>容器,將頁面中的全部內容都放到了這個容器之內,但是創建完主題之后卻發現wrapper容器的頂部距離<body>標簽,也就是瀏覽器頂部有大概25個像素。為了確認這個間隙的存在,我給<body>標簽和wrapper容器添加上了1個像素的border屬性,發現確實存在這個問題。然后我又仔細檢查了CSS代碼,看看是不是手誤給wrapper容器添加了margin-top屬性,發現代碼一切正常,這就讓人納悶了,到底是哪里出了問題呢?
前一段時間準備更新GreenGaint主題,在整理完head.php文件頁首的<meta>和<Link>等標簽后,查看頁面源代碼時,突然發現在<head>標簽內出現了幾行多余出來的代碼,仔細一看,其中還有<style>標簽,并且還有各種內邊距外邊距屬性,這我就明白了,為什么wrapper的頂部會無緣無故空出幾十個像素來了。原來是這里的<style>標簽在作怪。但是這些代碼并非我寫上去的,怎么會出現在<head>標簽內呢?經過認真一行一行和head.php文件中代碼的比對,發現有這么一句<?php wp_head() ?>很可疑,不知道是干嘛用的。搜索查完資料后才知道wp_head()是wordpress的一個非常重要的函數,基本上所有的主題在header.php這個文件里都會使用到這個函數,而且很多插件為了在header上加點東西也會用到wp_head(),比如SEO的相關插件。但是,在wp_head()出現的這個位置,會增加很多并不常用的代碼。這就解釋了為什么在<head>標簽內會出現<style>標簽和wrapper容器的頂部會出現間隙的原因,果然刪除了這句代碼后,頁面顯示正常了。這里需要說明的是,直接將wp_head()函數刪除可能會影響到某些插件的正常使用,所以如果你既不想讓這句代碼影響頁面布局,又不想影響插件的使用,可以搜索查詢一下如何安全的刪除wp_head()代碼的方法。
二、確保wordpress主題各文件的編碼一致另外一個奇怪的問題就是側邊欄下沉的問題,創建好GreenGaint主題之后,在測試主題在瀏覽器的兼容性上,我發現側邊欄在IE和Firefox中都很正常,唯獨在Safari瀏覽器中,側邊欄向下下沉了幾十個像素,頂部和內容區部分無法保持在同一水平線上。檢查了代碼后沒有發現任何問題,這讓我百思不其解。很長一段時間這個問題就被擱置了,還是在最近更新GreenGaint主題的時候,我突然想到會不會是文件編碼導致了這個問題呢?用EditPlus打開sidebar.php文件后,發現編碼為UTF-8+BOM,而其它文件也是這個編碼。雖然我并不清楚這個編碼是什么意思,我還是把sidebar.php和其它主題文件另存為了UTF-8格式,這之后再用Safari測試后發現一切正常,又一個詭異而讓人頭疼的問題解決了。
分享到:  QQ好友和群QQ好友和群 微信微信
收藏
收藏0
喜歡
喜歡0
您需要登錄后才可以回帖 登錄 | 立即注冊

本版積分規則

專注站長素材教程分享
全國免費熱線電話

0769-26628252

周一至周日9:00-23:00

反饋建議

在線QQ咨詢

掃描二維碼關注我們

Copyright©2011-2021 東莞市科森網絡科技有限公司版權所有 Ymzj.Cn Inc. 粵ICP備13005626號 粵公網安備:44190002000522號

足彩网官网