Twenty Ten主题新加功能

By
WP札记

这几天很罪恶的继续折腾了一下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 . '<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();
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('<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,然后设定了显示层,最后设置鼠标滑过图片透明度变小。效果如下图~~

zero.jpg

留言: 114

  1. 郑永

    你这主题倒是挺有功能化了,评论居然停在那了,不错,赞一个!

    2010年09月22日
  2. Leo.N

    折腾的不错,等哪天我也拿3.0默认主题开个刀玩玩~

    2010年09月23日
    • axiu

      @Leo.N 修改它是不错的尝试

      2010年09月25日
  3. ipage

    主题真的越来越不错啦

    2010年09月25日
  4. ipage

    另外,我想请教一下,怎么给评论加上1.2.3.4……这样的序号呢?我在google上找了很多方法,但是都不适用我的博客,因为我的博客的代码和网上说的不一样

    2010年09月25日
    • axiu

      @ipage 这个功能,去zww那里看看,http://zww.me/archives/25161

      2010年09月25日
    • ipage

      @阿修 我看了,那个方法要成功是有前提的,可惜我的主题与那个前提不对应啊

      2010年09月25日
  5. Kada

    主题控。

    2010年09月25日
  6. Dianso

    这个是默认主题么,看不出来

    2010年09月26日
    • axiu

      @Dianso 哈哈,看footer就知道啦,我没改那里

      2010年10月02日
  7. Google不爱我

    :eek: 这个是Twenty Ten?!必须膜拜一下

    2010年09月27日
  8. 有点蓝

    2010这个主题很强大吗?

    2010年09月29日
    • axiu

      @有点蓝 这个主题确实很强大,而且改着很方便。

      2010年10月02日
  9. wookaooo

    :arrow: 默认主题被折腾成这样了。。

    2010年10月02日
  10. kaka

    :grin: 阿修,你右侧评论栏的脚本能发一份么 :roll:

    2010年10月07日
    • axiu

      @kaka 右侧脚本?不光是脚本那,添加了挺多东西,要修改js文件、php文件和css文件。组合

      2010年12月04日
    • axiu

      @kaka 这个主题已经发出来了,你可以去看看啦

      2010年12月04日
    • kaka

      @阿修 ,其实我就需要那个脚本,随窗口高度移动这行为,我写了1个跟我那主题不知道哪个脚本有冲突。 :arrow:

      2010年12月04日
    • axiu

      @kaka 给你发邮件啦

      2010年12月04日
  11. WordPress啦

    功能 还是很全的了

    2010年11月14日
  12. iSymphony

    确实很强大,而右侧评论栏的脚本能 :mrgreen:

    2010年12月04日
    • axiu

      @iSymphony 哈哈,那是这主题的核心了。

      2010年12月04日
  13. 书包网

    :?: 代码,真的不会··

    2012年05月16日
  14. Chauncey Sagehorn

    Nicely, educate yourself really comfy.

    2012年07月31日

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

:razz:

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>