上午对守望的麦子主题进行了修改和优化，这次修改&优化过程没有在本地进行，直接修改、上传主机测试……因为对 iNove 已经非常熟悉了，mg12的这款主题的确经典！从使用 iNove 以来，经常有人跟我索要这款被我修改过的 iNove，其实我的建议是大家去mg12那里直接下载他发布的标准 iNove，然后发挥自己的想象力，去随意设计更改适合自己的、自己喜欢的！就像我们使用WP一样，最开始从经典简洁的界面和功能到后来通过使用插件也好，自己修改也好得到自己喜欢的版本……仅此而已，我们要的也不过就是这些……
这次修改的主要目的是希望它能更快的响应，尽管现在使用 1space 赞助的主机速度已经很快了……
修改&优化的地方有：更改首页友链为随机显示11条，添加友链页面；侧栏增加随机日志展示；侧栏所有广告位显示；授权许可、流量统计……移至页脚显示。
文章页面中去除了以前的热门日志、随机日志；更改订阅途径和显示方式；增加文章授权许可和转载提示；美化相关日志显示……
我们已经知道了好多提供在线生成Logo、Banner、邮箱地址、印章等服务的网站，大多数是图片的在线生成，比如55.la等。国外更有一些在线生成按钮等html&CSS相关的服务网站。今天分享2个在线生成WP主题的网站，当然只能生成一些基本的简陋的主题框架，如果你是一个WP使用者，完全可以通过该网站的服务，生成自己的主题，然后再自己加工一下，即可做出自己的风格主题。感兴趣的朋友试一下吧。
如果你也在使用iNove主题，你会发现iNove很友好的文章分类导航，但是只能处理子分类, 形式如下：
首页 > 分类 > 文章
而很多时候我们往往需要实现多层次的文章导航，有了它，访客就可以方便地访问同类的文章，并明确文章的所属，对提高用户体验和网站的PV值都很有帮助。具体形式如下：
首页 > 分类 > 子分类 > 第二层子分类 > ... > 第 N 层子分类 > 文章
打开iNove 主题里的 single.php 文件，其中的 id="postpath" 部分是这样的：
<a title="<?php _e('Go to homepage', 'inove'); ?>" href="<?php echo get_settings('home'); ?>/"><?php _e('Home', 'inove'); ?></a>
> <?php the_category(', '); ?>
> <?php the_title(); ?>
或者你更改过可能会是这样：
<a title="Go to homepage" href="<?php echo get_settings('home'); ?>/">Home</a> <!-- 首页链接 -->
> <?php the_category(', '); ?> <!-- 每个分类以逗号分隔 -->
> <?php the_title(); ?> <!-- 文章链接 -->
以上都是包含父级分类的文章导航，这里用到 the_category() 方法的默认模式，会调用 get_the_category_list() 生成最后一层的子分类 (分类可能不只一个) 组成的 HTML 字符串并打印到页面上。
要想获得包含父级分类的文章导航，即包含多层次的文章分类导航，可将该部分代码替换为：
<a title="Go to homepage" href="<?php echo get_settings('home'); ?>/">Home</a> <!-- 首页链接 -->
> <?php the_category(' > ', 'multiple'); ?> <!-- 每个分类以 > 分隔, 父级分类在前, 子分类在后 -->
> <?php the_title(); ?> <!-- 文章链接 -->
即可。我们用的是 the_category() 方法的 multiple 模式，而他会调用 get_the_category_list() 和 get_category_parents() 两个方法生成一个包含所有父分类的 HTML 字符串并打印到页面上。
via: http://www.neoease.com/wordpress-breadcrumb-navigation/
iNove是我比较喜欢的一个WP主题，但是默认的主题显示Categories、Archives和Meta，很多时候我们喜欢自己定义这些小工具的显示方式，而自己添加后，主题的默认这些选项还依然留在上面，看起来很不美观，所以让我们一起来手动干掉这下默认显示选项吧！打开主题的sidebar.php文件，找到其中的：
<div id="centersidebar">
<!-- sidebar east START -->
<div id="eastsidebar" class="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('east_sidebar') ) : ?><!-- categories -->
<div class="widget widget_categories">
<h3>Categories</h3>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=0&depth=1'); ?>
</ul>
</div><?php endif; ?>
</div>
<!-- sidebar east END --><!-- sidebar west START -->
<div id="westsidebar" class="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('west_sidebar') ) : ?><!-- archives -->
<div class="widget">
<h3>Archives</h3>
<?php if(function_exists('wp_easyarchives_widget')) : ?>
<?php wp_easyarchives_widget("limit=6"); ?>
<?php else : ?>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
<?php endif; ?>
</div><?php endif; ?>
</div>
<!-- sidebar west END -->
<div class="fixed"></div>
</div><!-- sidebar south START -->
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('south_sidebar') ) : ?>
<div id="southsidebar" class="sidebar"><!-- meta -->
<div class="widget">
<h3>Meta</h3>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
</ul>
</div><?php endif; ?>
</div>
<!-- sidebar south END -->
更新文件，刷新首页，默认的Categories、Archives和Meta部分已经没有了！
1. 下载经我修改过的 LavaLamp 代码
下载 lavalamp.js 文件, 并将文件放置到 js 目录.
2. 加载 jQuery 库
在 head 部分的 <?php wp_head(); ?> 前方添加以下代码: (iNove 主题的 head 部分在 templates/start.php 文件中, 其他主题一般在 header.php 中可以找到.)
1 | <?php wp_enqueue_script('jquery'); ?> |
或者
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> |
两个方法其实都是引用 jQuery 的 JavaScript, 有什么不一样呢? 前者是使用博客服务器上的 jQuery, 如果其他插件也要调用 jQuery 则无需两次装载代码; 而后者是使用 Google 服务器上的代码, 很多其他网站也使用这个文件, 所以它可能已被保存在本机 cache 中.
3. 加载 LavaLamp 菜单
</body> 前方添加以下代码: (iNove 主题的 head 部分在 templates/end.php 文件中, 其他主题一般在 footer.php 中可以找到.)
1 2 3 4 5 6 7 8 9 10 | <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/lavalamp.js"></script>
<script type="text/javascript">
jQuery(document).ready(
function(){
jQuery(function() {
jQuery("#menus").lavaLamp({fx:"backout", speed:700})
});
}
)
</script> |
注意: jQuery("#menus") 是找到 iNove 主题菜单的 ul 部分, 其他主题请替换为相应代码.
4. 在 style.css 中添加 LavaLamp 菜单的样式代码
如果你用的是 iNove 主题, 请下载 lava.gif （我使用的是深色的，下载地址1 谷歌主机地址2）图片并放置到 img 目录中; 删除 style.css 文件中包含 #menu 的样式, 并添加下列 CSS 代码. 其他主题可能需要修改 CSS 代码.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | #menus { position:relative; padding-left:10px; float:left; } #menus li { float:left; display:inline; list-style:none; } #menus li a { position:relative; color:#382E1F; height:30px; line-height:30px; padding:0 20px; text-decoration:none; font-size:11px; float:left; z-index:10; text-align:center; } #menus li.current_page_item a { font-weight:bolder; } #menus li.back { background:url(img/lava.gif) no-repeat right bottom; height:30px; position:absolute; z-index:8; } #menus li.back .left { background:url(img/lava.gif) no-repeat left top; height:30px; margin-right:9px; float:none; } #menus li ul { display:none; background:#F4F5F7; border:1px solid #CCC; border-top-color:#A6A6A6; padding:0 5px; } #menus li li { float:none; margin:0 !important; margin:0; padding:0; display:block; list-style:none; } #menus li li a { float:none; display:block; padding:7px 5px; text-decoration:none; width:200px; border-style:solid; border-color:#DDD; border-width:1px 0 0; margin:0; background-image:none; height:auto; line-height:145%; color:#999; text-align:left; } #menus li li.first a { border-top:none; } #menus li li a:hover { color:#382E1F; } |
5. 删除多余的代码 (针对 iNove 主题)
在 templates/header.php 中删除以下代码:
1 | <li><a class="lastmenu" href="javascript:void(0);"></a></li> |
6. 修改子菜单的 JavaScript 代码 (针对 iNove 主题)
打开 js/menu.js 文件并修改 activate 方法.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | activate: function() { this.title.className += ' current'; var pos = cumulativeOffset(this.title); var left = pos[0]; if (this.align == 'right') { var offset = getWidth(this.title) - getWidth(this.body) + this.offset; left += offset; } var top = pos[1] + getHeight(this.title); if(this.offset == -1) { var pos2 = cumulativeOffset(document.getElementById('navigation')); left -= pos2[0]; top -= pos2[1]; } setStyle(this.body, 'left', left + 'px'); setStyle(this.body, 'top', top + 'px'); setStyle(this.body, 'visibility', 'visible'); setStyle(this.body, 'opacity', this.opacity); setStyle(this.body, 'MozOpacity', this.opacity); setStyle(this.body, 'KhtmlOpacity', this.opacity); setStyle(this.body, 'filter', 'alpha(opacity=' + this.opacity * 100 + ')'); if(this.tid) { clearTimeout(this.tid); } this.tid = setInterval(bind(this, this.appear), 20); } |
按照以上步骤操作应该不会有什么问题的, 而在不同的主题中可能需要修改的地方有两处. 一是第 3 步 #menus 可能要换成其他能找到菜单 ul 的路径; 二是第 4 步的 CSS 需要作针对性修改.
本文于 2009 年 5 月 12 日大幅更新!
转自：http://www.neoease.com/lavalamp-for-wordpress-users/
参考资料: LavaLamp for jQuery Lovers
------------------------------------
090819更新（感谢光影分享解决方案）：
iNove 1.4.6 和之前的版本有小小不同
旧版本中使用的当前页面样式为：#menus li.current_page_item a
而新的版本使用的样式标签不一样，应该改为：#menus li.current-cat a
同时要记得修改lavalamp.js中的相关代码哦，将current_page_item修改为current-cat。
这样，当前样式就可以使用了。
如果不想修改样式也可以修改代码了。
