wordpress中inove主題鏈接兩列顯示方法

之前我已經對inove主題sidebar(側邊欄)上面的鏈接顯示做了修改，可以讓鏈接分兩列顯示，但是之前用的那個方法里面用的是id，這樣的話，如果sidebar想要有多個分開的鏈接目錄（比如你的鏈接有3個分類），那么這樣就是錯誤的，因為一個頁面只能有一個ID（需要注意的是，我已經對inove的主題的sidebar做了比較大的修改，原來的sidebar有4個widget，我已經修改為了2個，而且鏈接和分類目錄已經不是左右并列顯示了）。

下載地址：iNove主題

開始想的比較簡單，直接把ID改成class，然后style.css再把“#”換成“. ”就行了，不過這很快就被驗證是不行的，因為原來的那個CSS里面嵌套的DIV UL比較亂，寫的很不規范，那就自己動手改規范吧。

我的sidebar顯示有兩個鏈接分類，還有一個組織活動（這個沒有加到鏈接里面，是我在sidebar里面直接寫代碼的）。

代碼來了。

<div class=”widget”><!– 第一個鏈接目錄–>

<h3>網址</h3>

<ul class=”links”><?php wp_list_bookmarks(‘title_li=&categorize=0&category=2&orderby=name&limit=20′); ?></ul>

<div class=”fixed”></div>

</div >

<div class=”widget”> <!– 第二個鏈接目錄–>

<h3>友情鏈接(隨機排序)</h3>

<ul class=”links”><?php wp_list_bookmarks(‘title_li=&categorize=0&category=12&orderby=rand&limit=30′); ?></ul>

<div class=”fixed”></div>

</div >

<!–組織活動的 直接寫的HTML代碼 –>

<div class=”widget” id=”organizations”>

<h3>組織活動</h3>

<ul class=”links”>

<li><a id=”wpg”href=”http://www.wpg.im/” target=”_blank” title=”WPG中文博客群組”>WPG中文博客群組</a></li>

<li><a id=”wpg_lucky”href=”http://wpg.im/lucky” target=”_blank” title=”左鄰右舍”>I feel lucky!</a></li>

<li><a id=”chinablogs” href=”http://www.chinablogs.org” target=”_blank” title=”中國博客聯盟 匯聚天下博主，展示精彩博客!”>中國博客聯盟</a></li>

</ul>

<div class=”fixed”></div>

</div>

P：默認的inove里面，UL標簽里面是沒有加那個class=”links”的，這也就是我實現兩列顯示的關鍵，所以如果你的sidebar結構跟我類似的話，那么給里面的UL加上class=”links”，然后再給CSS加上下面的代碼應該就OK了。

CSS代碼我就加了一句

.links li {float:left;width:40%}

P：這里可能有朋友要問為何width不是50%了，因為我試驗的時候50%達不到要求的效果，這應該是原來sidebar里面寫的這句#sidebar li{padding-left:22px;}導致的。

最后，要記得清除浮動，不然就可能導致顯示效果換亂了，如果發現你的<ul>代碼。。。</ul>后面沒有<div class=”fiexd”></div> ,那么就加上吧。

WP相關知識掃盲：

<?php wp_list_bookmarks(‘title_li=&categorize=0&category=2&orderby=name&limit=20′); ?>

是WP里面一個用來顯示友情鏈接的函數，具體用法可以參考：http://www.veryhuo.com/a/view/4941.html

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈