1 月21
如何將Google Search移動到水平導覽列

Wordperss搜尋框導覽列01

部落格的搜尋框移動到水平導覽列對需要掛上廣告的部落格似乎是個不錯的選擇。一般來說我們大都會將Google Search所提供的搜尋框擺放在部落格的側邊欄,因為這樣最方便也最簡單,可是它卻需要佔用一定的側邊欄版面,也許你並不覺得這樣擺放在側邊欄有何不妥,不過對一些需要掛上廣告的部落格來說,側邊欄的最上面應該放置搜尋框還是部落格廣告就顯得有些為難?因為那裡算是廣告的最佳位置,但擺放搜尋框則可以方便網友搜尋部落格的文章,並進一步增加部落格的瀏覽量。

一般部落格的水平導覽列都不會用到滿格,如果可以把搜尋框移動到水平導覽列的位置,並讓出側邊欄的位置給部落格廣告這樣不但可以凸顯搜尋框的高度,也可以充分利用版面的空間,而且部落格廣告也得到了應有的重要空間,可以說是一舉三得。

那要如何作才可以把部落格的搜尋框移動到水平導覽列呢?以下的方法只針對以WordPress架設網站的部落格,而且以Twenty Ten的佈景主題(版型/template)為範例。

Step 1.
必須先設置搜尋框的個樣式,也就是要擺放水平導覽列的位置、大小、邊界(margin)、留白(padding)…等樣式。所以先將下列的程式碼複製並貼到WordPress的styless.css樣式表檔案中。其中比較重要的是【width】數值的設定,最好依照自己實際的需求來調整其最恰當的大小,要是設定太大可能會造成水平導覽列分成兩行的問題。

如果你還沒有或不知道如何申請Google Search,請參考這篇文章:Blog語法研究室:為自己的網站添加Google搜索與站內搜尋

/* ==== 水平導覽列搜尋框樣式設定 === */
.navbarright {
color: #FFFFFF; /* 文字顏色 */
float: right; /* 搜尋框靠右對齊 */
margin: 0; /* 不設邊界 */
padding: 5px 10px 0 0; /*上邊留白5px, 右邊留白10px */
text-align: right; /* 文字靠右對齊 */
width: 300px; /* 搜尋框的最大寬度 */}

Step 2.
接著打開WordPress的head.php,找到【<?php wp_nav_menu…’primary’ ) ); ?>】程式碼,將下面的程式碼連同Google Search的程式碼貼到它的後面,記得要在貼在【</div><!– #access –>】的前面,可以參考下面的圖片教學。

<div class=”navbarright”>
Google Search程式碼
</div>

Wordperss搜尋框導覽列02


回到》用WordPress架設部落格網站教學 首頁

延伸閱讀:
如何申請Histats網站計數器
添加日曆圖示到WordPress部落格
WordPress:深入了解WP-PostViews製作「熱門文章」清單

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *