Twenty Ten主题新加功能
这几天很罪恶的继续折腾了一下TT，感叹主题强大之余对自己时常的浪费时间感到后怕。希望这是本年度最后一次大规模折腾吧。以后可没时间这么干了。前路漫漫，正事要紧。
1、给自定义菜单添加描述
这个方法网上找到很多，不过最详细的还是这个：【传送门】，主要功能是在WordPress3.0的自定义菜单功能中加入描述（description）内容，达到常见的 菜单名+描述 的效果。
- a、在function.php加入如下内容：
|
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 |
class description_walker extends Walker_Nav_Menu { function start_el(&$output, $item, $depth, $args) { global $wp_query; $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; $class_names = $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ); $class_names = ' class="'. esc_attr( $class_names ) . '"'; $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>'; $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $prepend = '<strong>'; $append = '</strong>'; $description = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : ''; if($depth != 0) { $description = $append = $prepend = ""; } $item_output = $args->before; $item_output .= '<a'. $attributes .'>'; $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append; $item_output .= $description.$args->link_after; $item_output .= '</a>'; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } |
- b、在调用wp_nav_menu的时候加入一个字段：’walker’=>new description_walker();
|
1 2 3 4 5 6 7 8 9 10 11 |
wp_nav_menu( array( 'container' =>false, 'menu_class' => 'nav', 'echo' => true, 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'depth' => 0, 'walker' => new description_walker()) ); |
- c、css美化
|
1 2 3 4 5 6 7 8 9 10 11 |
.nav li a strong { display:block; font-size:14px; font-weight:normal; } .nav li a span { display:block; font-size:10px; line-height:14px; } |
2、文章显示模式切换
这个其实没啥技术含量，就是纯css+一点jquery代码+一点php。css实现文章样式；jquery切换样式和cookies；php获取cookies。内容比较杂，以后有空了再说。
效果请点击首页的星星~在菜单栏下面的~~把js部分贴出来：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$('.switch').click(function(){ $('#content').hide(); if(xx == 'grid') { $('#content').addClass('grid'); $('.switch span').remove(); $('.switch').append('<span class="list">List</span>'); } else{ $('#content').removeClass("grid"); $('.switch span').remove(); $('.switch').append('<span class="grid">Grid</span>'); } $('#content').fadeIn('slow'); }); |
3、文章图片美化
在项目1里面那个网站里看到了点击图片看大图的样式，主要hover部分比较好看，遂copy+paste过来~~嘿嘿。其实就添加了一个span，然后设定了显示层，最后设置鼠标滑过图片透明度变小。效果如下图~~
转载请注明转自：Twenty Ten主题新加功能
你这主题倒是挺有功能化了，评论居然停在那了，不错，赞一个！
@郑永 很多人不习惯呢
折腾的不错，等哪天我也拿3.0默认主题开个刀玩玩~
@Leo.N 修改它是不错的尝试
主题真的越来越不错啦
另外，我想请教一下，怎么给评论加上1.2.3.4……这样的序号呢？我在google上找了很多方法，但是都不适用我的博客，因为我的博客的代码和网上说的不一样
@ipage 这个功能，去zww那里看看，http://zww.me/archives/25161
@阿修 我看了，那个方法要成功是有前提的，可惜我的主题与那个前提不对应啊
主题控。
@Kada bingo！~
这个是默认主题么，看不出来
@Dianso 哈哈，看footer就知道啦，我没改那里
@Google不爱我 是的，是TT
2010这个主题很强大吗？
@有点蓝 这个主题确实很强大，而且改着很方便。
@wookaooo 谢谢
@kaka 右侧脚本？不光是脚本那，添加了挺多东西，要修改js文件、php文件和css文件。组合
@kaka 这个主题已经发出来了，你可以去看看啦
@阿修 ,其实我就需要那个脚本，随窗口高度移动这行为，我写了1个跟我那主题不知道哪个脚本有冲突。
@kaka 给你发邮件啦
功能 还是很全的了
@WordPress啦 谢谢大侠
确实很强大，而右侧评论栏的脚本能
@iSymphony 哈哈，那是这主题的核心了。
Nicely, educate yourself really comfy.