inove主题链接两列显示方法

GD Star Rating
loading...

之前我已经对inove主题sidebar(侧边栏)上面的链接显示做了修改,可以让链接分两列显示,但是之前用的那个方法里面用的是id,这样的话,如果sidebar想要有多个分开的链接目录(比如你的链接有3个分类),那么这样就是错误的,因为一个页面只能有一个ID(需要注意的是,我已经对inove的主题的sidebar做了比较大的修改,原来的sidebar有4个widget,我已经修改为了2个,而且链接和分类目录已经不是左右并列显示了)。

开始想的比较简单,直接把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相关知识扫盲:

wp_list_bookmarks() 是WP里面一个用来显示友情链接的函数,具体用法可以参考这个博友的文章 http://www.slyar.com/blog/wp-list-bookmarks.html

已有30条评论 发表评论

  1. 行畔博客 /

    我的就是inove主题的。

    GD Star Rating
    loading...
  2. 王磊 /

    不错,来学习学习了

    GD Star Rating
    loading...
  3. Afio /

    不用这个主题 哈哈 :(24):

    GD Star Rating
    loading...
  4. 帅哥 /

    我也要将我的链接两栏化。。

    GD Star Rating
    loading...
  5. 新荒原 /

    有用,收藏了。我用的也是iNove。

    GD Star Rating
    loading...
  6. 朵未 /

    我用的也是代码的,不过和你这个有点区别。

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      哦?我以前用网上的觉得嵌套的标签多了,最近自己才改了,感觉挺简单的

      GD Star Rating
      loading...
  7. 郑州seo /

    学习了

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      呵呵, :(4):

      GD Star Rating
      loading...
  8. 小杜 /

    呵呵,这个方法比用插件好

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      嗯,我一直都没用插件

      GD Star Rating
      loading...
  9. 秦大少 /

    这个主题被你改的很清爽了啊,能否放出来分享下啊? :(16):

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      :(8): 我这里头的很多东西都改成静态的了,而且很多我都忘了改了哪里。。。杯具

      GD Star Rating
      loading...
  10. 记忆盒子 /

    分两列显示好看些,一列的话右边太空了。你这个方法看起来不错的说!

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      嗯,两列比较节省空间

      GD Star Rating
      loading...
  11. xl /

    @xl

    日 应该多套几层!

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      :(11): 已经套了不少呢~~~

      GD Star Rating
      loading...
  12. xl /

    靠!

    GD Star Rating
    loading...
    1. xl /

      :(7): :(24):

      GD Star Rating
      loading...
      1. xl /

        :(6): 我是打酱油的!

        GD Star Rating
        loading...
        1. xl /

          做俯卧撑! :(21):

          GD Star Rating
          loading...
        2. zenoven / 本文作者

          :(8):

          GD Star Rating
          loading...
  13. 冷轩信 /

    都在改主题 啊

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      我一直都在不停的做小改动 呵呵~~

      GD Star Rating
      loading...
  14. ikeeptrying /

    这个怎么貌似在哪看到过的

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      很早就有人在讨论如何实现两列显示了,不过这文章以及方法可是我100%原创的

      GD Star Rating
      loading...
  15. QiQBoY /

    只是个没有内容的空div层,希望靠它清除浮动还要确保css中有.fixed{clear:both;}这么一句

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      嗯嗯~ inove的这个class已经写好了,直接用就可以了

      GD Star Rating
      loading...
  16. 万戈 /

    恩,还是手动好,插件的两列显示还是不太友好

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      嗯~~ 这个我一直都是手动代码的 呵呵

      GD Star Rating
      loading...

回复给zenoven 取消回复