Twenty Ten主题新加功能

By axiu

2010年09月13日

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 . '';
           $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，然后设定了显示层，最后设置鼠标滑过图片透明度变小。效果如下图~~

转载请注明转自：Twenty Ten主题新加功能

您已经发表过意见了！

2009年05月18日有关WordPress评论-隐藏特定文章（页面）的评论4
2009年06月23日应该为你的WordPress做的几件事19
2013年01月11日wordpress技巧：给账户的联系信息加入不可编辑内…41
2011年08月08日WordPress主题MxS2104
2009年09月18日wp代码的空行问题12
2010年03月31日WordPress高亮作者和文章置顶的实现54
2012年04月14日去除分类页链接的category/字段以及修复nginx下…43

上一篇“盗梦空间”之前

下一篇最近喜欢的《七百年后》

Comments: 29

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

郑永 2010年09月22日
- @郑永很多人不习惯呢
  
  axiu 2010年09月25日
折腾的不错，等哪天我也拿3.0默认主题开个刀玩玩~

Leo.N 2010年09月23日
- @Leo.N 修改它是不错的尝试
  
  axiu 2010年09月25日
主题真的越来越不错啦

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

ipage 2010年09月25日
- @ipage 这个功能，去zww那里看看，http://zww.me/archives/25161
  
  axiu 2010年09月25日
- @阿修我看了，那个方法要成功是有前提的，可惜我的主题与那个前提不对应啊
  
  ipage 2010年09月25日
主题控。

Kada 2010年09月25日
- @Kada bingo！~
  
  axiu 2010年10月02日
这个是默认主题么，看不出来

Dianso 2010年09月26日
- @Dianso 哈哈，看footer就知道啦，我没改那里
  
  axiu 2010年10月02日
这个是Twenty Ten？！必须膜拜一下

Google不爱我 2010年09月27日
- @Google不爱我是的，是TT
  
  axiu 2010年10月02日
2010这个主题很强大吗？

有点蓝 2010年09月29日
- @有点蓝这个主题确实很强大，而且改着很方便。
  
  axiu 2010年10月02日
默认主题被折腾成这样了。。

wookaooo 2010年10月02日
- @wookaooo 谢谢
  
  axiu 2010年10月02日
阿修,你右侧评论栏的脚本能发一份么

kaka 2010年10月07日
- @kaka 右侧脚本？不光是脚本那，添加了挺多东西，要修改js文件、php文件和css文件。组合
  
  axiu 2010年12月04日
- @kaka 这个主题已经发出来了，你可以去看看啦
  
  axiu 2010年12月04日
- @阿修 ,其实我就需要那个脚本，随窗口高度移动这行为，我写了1个跟我那主题不知道哪个脚本有冲突。
  
  kaka 2010年12月04日
- @kaka 给你发邮件啦
  
  axiu 2010年12月04日
功能还是很全的了

WordPress啦 2010年11月14日
- @WordPress啦谢谢大侠
  
  axiu 2010年12月04日
确实很强大，而右侧评论栏的脚本能

iSymphony 2010年12月04日
- @iSymphony 哈哈，那是这主题的核心了。
  
  axiu 2010年12月04日
代码，真的不会··

书包网 2012年05月16日
Nicely, educate yourself really comfy.

Chauncey Sagehorn 2012年07月31日