让侧边栏列表一分为二
如左图, 将测边栏列表分两半, 灵感来源于 Eric Liu.
我是用 JavaScript 来实现的, 其实很简单.
以下是我的思路:
1. 在加载页面的时候进行调整, 但要求 JavaScript 加载失败时不要影响页面布局, 所以 style 控制也应该写在 JavaScript 里面.
2. 以 Blogroll 为例, 获取 Blogroll 的子节点个数, 使两栏中节点个数相等 (奇数时左栏多一).
3. 移除左栏的最后一个节点, 并将它作为第一个节点加到右栏, 直到 "左栏节点个数 - 右栏节点个数 <= 1".
下载请点: (该文件不再提供下载, 此功能可由插件 WP-MulticolLinks 实现.)
使用:
1. 进入你的模板目录, 新建目录 js (如果没有的话), 将文件 sidebarlistmanager.js 拷贝到这个目录.
2. 打开文件 header.php, 在 <head></head> 里面, 追加如下:
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/sidebarlistmanager.js"></script>
3. 打开文件, sidebar.php, 修改代码, 新增如下粗体部分, id 可以自己取名.
<div class="sidebox">
<h3>Blogroll</h3>
<ul id="blogroll_left" class="post-list">
<?php wp_list_bookmarks('title_li=&categorize=0'); ?>
</ul>
<ul id="blogroll_right" class="post-list">
</ul>
<div stylt="clear:both"></div>
</div>
4. 打开文件 sidebarlistmanager.js...
(1)修改 list1.style.width 和 list2.style.width 的数值为你需要的, 百分比也可以, 如 "100px", "49%";
(2)将最下面的 sidebarListManager("blogroll_left", "blogroll_right"); 里面的参数替换成你自己定义的, 如果需要再更改一个 list, 则追加一行.
这个风格这么多人用呀，看了好多人都在用这个皮！
其实这个应该在模板后台控制...
这模板还是太简陋了, 我要大升级一次才行, 起码要提供 Widgets 和增添风格替换控制.
被某人说对, 做 WordPress 模板不会 PHP 就只能做到这种程度了.
我只研究了一种办法，就是给li设个width，然后float:left;
节点？完全不知所云。。
好久不见的 AKA...
我在这要 PS 一下: 我这个方法会打乱 sidebar.php
如果同学们的模板需要支持 widgets 请勿模仿.
介孩儿...老整介深奥的...
- 3- 恩恩 不过这个点子的确粉有用
我现在就8稀饭过长的列表
mg12真油菜啊～我那个是定义好css自己在sidebar里敲代码，还是你这个方便呀^^
截图中的莫非是传说中的蓝色经典版？
一大早就给对面工地吵醒... (T-T)
@Alan:
这个只是配合 highslide, 将 wp-grins 插件稍微改了一下.
好像现在 IE 没能显示出来, 找个时间弄弄吧. (- -!)
@忘月:
不敢当, 高手是不用敲代码的.
真是高手啊，佩服。
你的表情这个框怎么弄的，有空写下教程嘛
不懂，但先收藏