Axiu Blog
:【[传送门](http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output)】,主要功能是在WordPress3.0的自定义菜单功能中加入描述(description)内容,达到常见的 菜单名+描述 的效果。 * a、在function.php加入如下内容:
这几天很罪恶的继续折腾了一下TT,感叹主题强大之余对自己时常的浪费时间感到后怕。希望这是本年度最后一次大规模折腾吧。以后可没时间这么干了。前路漫漫,正事要紧。 ### 1、给自定义菜单添加描述 这个方法网上找到很多,不过最详细的还是这个:【[传送门](http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-out
这几天很罪恶的继续折腾了一下TT,感叹主题强大之余对自己时常的浪费时间感到后怕。希望这是本年度最后一次大规模折腾吧。以后可没时间这么干了。前路漫漫,正事要紧。 ### 1、给自定义菜单添加描述 这个方法网上找到很多,不过最详细的还是这个:【[传送门](http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-out
Twenty Ten主题新加功能
Max

这几天很罪恶的继续折腾了一下TT,感叹主题强大之余对自己时常的浪费时间感到后怕。希望这是本年度最后一次大规模折腾吧。以后可没时间这么干了。前路漫漫,正事要紧。

1、给自定义菜单添加描述

这个方法网上找到很多,不过最详细的还是这个:【传送门】,主要功能是在WordPress3.0的自定义菜单功能中加入描述(description)内容,达到常见的 菜单名+描述 的效果。

  • a、在function.php加入如下内容:

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 . '* '; $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 = ''; $append = ''; $description = ! empty( $item->description ) ? ''.esc_attr( $item->description ).'' : ''; if($depth != 0) { $description = $append = $prepend = ""; } $item_output = $args->before; $item_output .= ''; $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append; $item_output .= $description.$args->link_after; $item_output .= ''; $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();

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美化

.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部分贴出来:

$('.switch').click(function(){ $('#content').hide(); if(xx == 'grid') { $('#content').addClass('grid'); $('.switch span').remove(); $('.switch').append('List'); } else{ $('#content').removeClass("grid"); $('.switch span').remove(); $('.switch').append('Grid'); } $('#content').fadeIn('slow'); });

3、文章图片美化

在项目1里面那个网站里看到了点击图片看大图的样式,主要hover部分比较好看,遂copy+paste过来~~嘿嘿。其实就添加了一个span,然后设定了显示层,最后设置鼠标滑过图片透明度变小。效果如下图~~

zero.jpg

Comments