天涯左岸

WPSummer免费主题改进

WPSummer主题是由wpyou.com开发的,主题的界面清新,功能强大,易于使用,在高级版本中支持自定义菜单、二级菜单、首页幻灯片显示等。本站的主题既是WPSummer的高级版本,是花了48块大洋从官方网站买的。该主题还有一个免费版本,功能相对于收费版本来说略显简单,不支持自定义菜单,二级菜单的自定义就更不用说了,还有小工具的显示也存在一定的问题。笔者今天突然心血来潮,想要折腾一下WPSummer的免费主题,为其增加自定义菜单的功能,并同时修正侧边栏的几个BUG。


图一    修改后的WPSummer免费主题
图一    修改后的WPSummer免费主题

闲话不多说,直接操刀上。这里的“刀”呢最好使用Dreamweaver CS5,之前笔者用NotePad++折腾了半天也没有成功,后来换Dreamweaver马上就好了。

WPSummer添加自定义菜单

本次的自定义菜单参考了WordPress教程网的《wordpress 3.0自定义菜单功能介绍》一文,在此表示感谢。

在WPSummer主题的文件夹中,找到functions.php函数文件,用Dreamweaver将其打开,一定要保证dreamweaver的编码格式为UTF8,否则会出现乱码和不识别的问题。在函数开始的<?php之后插入以下的代码:

if(function_exists('register_nav_menus')){
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'WPSummer' ),
'second' => __( 'Second Navigation', 'WPSummer' ),
) );
}
图二    定义菜单后的效果
图二    定义菜单后的效果

这样,已经算是注册了WP的菜单,这时在后台登陆,查看外观->菜单的主题位置,应该会有两个下拉菜单,用于选择不同的菜单,如图二所示。之后,在WPSummer主题的文件夹中,找到header.php文件,打开后在其中查找下面的语句:

<?php wp_list_categories('title_li=0&orderby=name&hide_empty=0&show_count=0&depth=1'); ?>

将其替换成这一句:

<?php wp_nav_menu( array(‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary‘)); ?>

然后再搜索这一句:

<?php wp_list_pages('title_li=&depth=1&sort_column=post_date&sort_order=ASC')?>

将其替换成下面的语句:

<li><?php wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘second‘ ) ); ?></li>

这样完成了为WPSummer添加自定义菜单的过程。此时,登录到后台,在外观->菜单的主题位置中可以看到多了Primary Navigation和Second Navigation两个菜单项,只需要在右边新建两个菜单并分别指定给Primary Navigation和Second Navigation即可。需要说明的是Primary Navigation对应主导航菜单,Second Navigation对应子导航菜单,并且主导航菜单只能实现一级菜单的自定义,不能实现定义二级菜单。不过网上有牛人折腾出了该主题的二级菜单,相信以后大家也能搞出来。

修复侧边栏bug

在后台使用了小工具后,标签云的小工具的左右和下边框不见了,这样就显得和别的不一致,对于喜欢追求完美的我来说是难以忍受的。经过分析发现是由于标签云的CSS样式表编写不当造成的。于是在WPSummer主题的文件夹中,找到style.css,将其打开,找到其中关于标签云的样式控制语句:

.sidebar ul li.widget_tag_cloud div{ padding:8px 8px 8px 10px;}

将其改为下面的语句:

.sidebar ul li.widget_tag_cloud div{ padding:8px 8px 8px 10px;border:1px solid #C5DDF6; border-top:none;}

保存后,到博客前台,刷新页面应该就能显示出缺失的边框,不过可能会因为CSS更新的延迟性而暂时不能看到效果,不过过一会再查看应该就没有问题了。

该主题的文章归档小工具在显示下拉列表的时候(普通列表的时候不存在问题)也存在与标签云同样的问题。经过分析,是因为select标签外缺少div标签,因此无法使用div来进行样式控制。找到了问题的根源就好对症下药了。要为select标签添加div标签必须要修改wordpress的系统文件,在wp_include文件夹下找到default-widgets.php文件,将其打开,找到下面的句子:

<select name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'> <option value=""><?php echo esc_attr(__('Select Month')); ?></option> <?php wp_get_archives(apply_filters('widget_archives_dropdown_args', array('type' => 'monthly', 'format' => 'option', 'show_post_count' => $c))); ?> </select>

在其两端分别加上<div>和</div>两个标签,保存后退出,然后在style.css中添加下面的语句:

.sidebar ul li.widget_archive select{margin:5px auto 5px 50px;}
.sidebar ul li.widget_archive div{border:1px solid #C5DDF6; border-top:none;}

其中,select标签是定义下拉列表框的位置,div标签是定义文章归档小工具的边框。

修改文章行距及首行缩进两字符

WPSummer免费主题文章正文的行间距太小,段间距过大,且段落首行不缩进两个字符,不符合中国人的审美观,这个可以通过修改p标签的样式来搞定。在style.css中寻找下面的语句:

.post p{padding:10px 0px 5px;}

将其改为下面的句子:

.post p{margin:4px 0px 0 0; line-height:190%;text-indent:2em;}

其中,margin是用来控制段间距的,line-height控制行间距,text-indent:2em进行首行缩进。

修改文章中图片的对齐方式

WPSummer免费主题默认的文章中图片的对齐方式为左对齐,笔者比较喜欢居中对齐的样式。加之笔者经常要在文章用插入图片,因此这个必须要改。在style.css中添加下面的代码,保存即可。

/*文章图片居中显示,图片边框*/
.aligncenter,div.aligncenter{display:block;margin:auto;}
.alignleft{float:left;}
.alignright{float:right;}
.wp-caption{max-width:620px;text-align:center;margin-top:10px;margin-bottom:10px;padding:4px;border-radius:3px;background:#fff;border:1px solid #ddd;}
.wp-caption img{margin:0;padding:0;background:none;}
.wp-caption p.wp-caption-text{font-size:12px;line-height:20px;padding:4px 0 0;margin:0;}

WPSummer免费主题的原始版和笔者修改后的版本,各位看官可以移步到本站的文件下载区进行下载。使用时请保留WPYOU的版权信息。

8 comments

    1. 这个我还真不知道,要不问下百度吧。或者去官方的论坛看看。最近一直比较忙,没有及时给大家回复。十分抱歉。

发表评论

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