新主题正式上线,记录下自己对新主题所修改的地方。

2011年01月27日 Wordpress 评论 22 条 阅读 27,140 views 次

这几天什么也没有干,就折腾主题的,先是找,后是改,折腾来折腾去,也没有折腾个适合我自己的主题出来。只因为自己的技术水平太烂了,不然,自己就写个wordpress主题了。

最终还是选择了我现在使用的主题。但还是存在一些问题,后面会慢慢完善。先记录下对这个主题的修改全过程,方便以后升级用。因为这个主题的作者也是鸟哥,而且也很负责,所以,以后就不准备再找其他的主题了。

1、修改顶部导航

首页的图片太宽,不太适合我,所以我修改了
首先打开style.css,找到下面的代码,

-------------------------------------------

.home {
float: left;
width:117px;
height:35px;
}
.home a:hover {
width:117px;
height:36px;
background: url(images/bg.png) 0 -163px;
}

-------------------------------------------
换成下面的代码
-------------------------------------------

.home {
float: left;
width:60px;
height:35px;
}
.home a:hover {
width:60px;
height:36px;
background: url(images/bg.png) 0 -163px;
}

-------------------------------------------
也就是把
width:117px;改成    width:60px;

然后就是修改bg.png的源文件,调整到60宽度,再保存后,上传到服务器。

其次是修改导航上面的效果,我觉得不用太花哨
打开style.css找到
-------------------------------------------

#topnav li a, #topnav li a:link, #topnav li a:visited {
display: block;
padding: 0 25px 0 25px;
line-height:36px;
color: #4b4b4b;
text-shadow: 0px 1px 0px #d1d1d1;
}
#topnav li a:hover, #topnav li a:active {
background: url(images/bg.png) repeat-x 0 -199px;
color: #fff;
display: block;
text-decoration: none;
line-height:36px;
padding: 0 25px 0 25px;
}

-------------------------------------------
修改成下面的
-------------------------------------------

#topnav li a, #topnav li a:link, #topnav li a:visited {
padding: 0 15px 0 15px;
line-height:36px;
color: #4b4b4b;
text-shadow: 0px 1px 0px #d1d1d1;
}
#topnav li a:hover, #topnav li a:active {
background: #545454;
color: #fff;
display: block;
text-decoration: none;
line-height:36px;
padding: 0 15px 0 15px;
}

-------------------------------------------

2、修改界面,如果不加个框架的话,我感觉有点乱

打开style.css找到
-------------------------------------------

body {
background: #f2f2f2;
font: 12px 微软雅黑, Verdana, Tahoma, Lucida Grande, Arial, sans-serif;
color: #000;
}

-------------------------------------------
换成下面的内容,
-------------------------------------------

body {
background: #2e3538;
font: 12px 微软雅黑, Verdana, Tahoma, Lucida Grande, Arial, sans-serif;
color: #000;
}

-------------------------------------------

再找到
-------------------------------------------

#wrapper {
width: 980px;
margin: 18px auto;
line-height: 21px;
}

-------------------------------------------
在里面加入一句    background: #f2f2f2;目的就是把整个界面规范起来,让在换背景的时候,不会影响这个里面的背景,因为,这个主题,如果换背景的话,可能会导致界面不美观。
-------------------------------------------

#wrapper {
width: 980px;
margin: 18px auto;
line-height: 21px;
background: #f2f2f2;
}

-------------------------------------------

3、去掉彩色的标签,换成按标签数量,由多到的来排列

先把functions.php的只读属性去掉,然后
打开functions.php文件,找到
-------------------------------------------

//彩色标签云
function colorCloud($text) {
$text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);
return $text;
}
function colorCloudCallback($matches) {
$text = $matches[1];
$color = dechex(rand(0,16777215));
$pattern = '/style=(\'|\")(.*)(\'|\")/i';
$text = preg_replace($pattern, "style=\"color:#{$color};$2;\"", $text);
return "<a $text>";
}
add_filter('wp_tag_cloud', 'colorCloud', 1);

-------------------------------------------

把里面的$color = dechex(rand(0,16777215));换成黑色$color = #000;

-------------------------------------------

//彩色标签云
function colorCloud($text) {
$text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);
return $text;
}
function colorCloudCallback($matches) {
$text = $matches[1];
$color = #000;
$pattern = '/style=(\'|\")(.*)(\'|\")/i';
$text = preg_replace($pattern, "style=\"color:#{$color};$2;\"", $text);
return "<a $text>";
}
add_filter('wp_tag_cloud', 'colorCloud', 1);

-------------------------------------------

打开include目录里面的map.php把45修改成60
-------------------------------------------

<div class="tag_c"><?php wp_tag_cloud('smallest=12&largest=12&unit=px&number=45');?></div>

-------------------------------------------
也就是换成下面的代码
-------------------------------------------

<div class="tag_c"><?php wp_tag_cloud('smallest=12&largest=12&unit=px&number=60');?></div>

-------------------------------------------

找到wp-includes/category-template.php,打开并搜索wp_tag_cloud
排列规则(orderby)可以按“名字”(name)或“使用次数”(count)排列,而排列顺序是升序(ASC),或降序(DESC)。
-------------------------------------------
修改'orderby' => 'name'的name为count
修改'order' => 'ASC'的ASC为DESC
-------------------------------------------
这样就可以使标签由多到少的顺序排列出来了,而且字体是一样的大小。

4、修改评论上面的版权申明处的个人简介

打开single.php删除
-------------------------------------------
<?php the_author_description(); ?>
-------------------------------------------

5、修改回复右上角的蓝色回复背景

打开style.css文件
找到
-------------------------------------------

.reply {
position:absolute;
background:url(images/bg.png) 0 -398px;
float:right;
right:20px;
top:-1px;
}

-------------------------------------------
换成下面的内容
-------------------------------------------

.reply {
position:absolute;
float:right;
right:20px;
top:-1px;
}

-------------------------------------------
并增加下面两个内容
-------------------------------------------

.reply  a{
color: #000;
}
.reply  a:hover {
color: #0196e3;
text-decoration: none;
}

-------------------------------------------

6、修改右侧的滚动条

因为背景换了,所以需要修复一下这个图片

7、修改替换随机图片

8、修改浏览器标题内容

打开includes里面的seo.php
找到
-------------------------------------------

<?php if ( is_home() ) { ?><title><?php bloginfo('name'); ?> | <?php bloginfo('description'); ?></title><?php } ?>
<?php if ( is_search() ) { ?><title>搜索结果 | <?php bloginfo('name'); ?></title><?php } ?>
<?php if ( is_single() ) { ?><title><?php echo trim(wp_title('',0)); ?> | <?php bloginfo('name'); ?></title><?php } ?>
<?php if ( is_page() ) { ?><title><?php echo trim(wp_title('',0)); ?> | <?php bloginfo('name'); ?></title><?php } ?>
<?php if ( is_category() ) { ?><title><?php single_cat_title(); ?> | <?php bloginfo('name'); ?></title><?php } ?>
<?php if ( is_month() ) { ?><title><?php the_time('F'); ?> | <?php bloginfo('name'); ?></title><?php } ?>

-------------------------------------------
修改如下
-------------------------------------------

<?php if ( is_home() ) { ?><title>RHEL/CentOS教程 | Linux服务器 | <?php bloginfo('name'); ?></title><?php } ?>
<?php if ( is_search() ) { ?><title>RHEL/CentOS教程 | Linux服务器 | <?php bloginfo('name'); ?></title><?php } ?>
<?php if ( is_single() ) { ?><title><?php echo trim(wp_title('',0)); ?> | RHEL/CentOS教程 | Linux服务器 | <?php bloginfo('name'); ?></title><?php } ?>
<?php if ( is_page() ) { ?><title><?php echo trim(wp_title('',0)); ?> | RHEL/CentOS教程 | Linux服务器 | <?php bloginfo('name'); ?></title><?php } ?>
<?php if ( is_category() ) { ?><title><?php single_cat_title(); ?> | RHEL/CentOS教程 | Linux服务器 | <?php bloginfo('name'); ?></title><?php } ?>
<?php if ( is_month() ) { ?><title><?php the_time('F'); ?> | RHEL/CentOS教程 | Linux服务器 | <?php bloginfo('name'); ?></title><?php } ?>
<?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><title><?php  single_tag_title("", true); ?> | RHEL/CentOS教程 | Linux服务器 | <?php bloginfo('name'); ?></title><?php } ?> <?php } ?>

-------------------------------------------

9、调整侧边栏的排列顺序

打开sidebar.php文件,进行相应的调整
a.rss
b.search_g
c.文章
d.r_comments
e.分类
f.category_h

10、换favicon.ico

11、图片太大,限制超出内容框

去掉html, body, div, span, applet, object, iframe, h1, h2, h3, h4,img, ol, ul,p这一行的img
找到.entry这里面,增加下面的内容
-------------------------------------------

.entry img {
max-width:100%;
}

-------------------------------------------

12、加入我以前的代码

-------------------------------------------

.mycode {
position:relative;
margin:10px 0 10px 0;
width:100%;
height:auto;
z-index:auto;
padding:0px 5px 0px 5px;
font-size: 1em;
font-family: Verdana, Tahoma, sans-serif, "Times Neo Roman", "Lucida Sans Unicode", Georgia, Arial, "\5b8b\4f53";
/*color: #00ff00;*/
color: #3DFF3D;
background-color: #0D0D14;
/*background-color: #2E2E2E;*/
/*text-align: left;*/
display: inline;
margin: auto;
clear: none;
border: thin inset #FFFFFF;
visibility: inherit;
float: left;
table-layout:fixed;
word-wrap:break-word;
word-break:break-all;
}

-------------------------------------------

13、设置CMS模板和侧边推荐栏目

打开cms.php及includes目录下的category_h.php(侧边推荐栏目),查找类似array(1,2,3,4),修改其中的数字为调用的分类ID,中间用英文逗号分开。
分类ID查看方法:进入后台→文章→分类目录,把鼠标悬停在某个分类名称上,浏览器状态栏上最后显示的数字就是分类ID.
另外,还需为分类添加描述,主题将会调用这个描述,否则部分位置会出现空白。

array(10,21,23,38,1,211);

右侧的推荐栏目设置
Linux基础 10
Linux服务器 21
Linux安全 23
Linux视频 38
wordpress 195
生活 211
其它 1

设置分类图标
把caticon文件夹放到博客的wp-content目录里面,并命名好内容的图标

14、CMS模式下,去掉网页上边的 TAG 标签的显示

header_h.php
删除下面的内容
-------------------------------------------

<div id="map_h">
<div class="tag_t"><?php wp_tag_cloud('smallest=12&largest=12&orderby=count&unit=px&number=12&order=&exclude&include=');?></div>
</div>

-------------------------------------------

15、googole自定义搜索

参考下面两个文章
Google自定义搜索添加流程
http://zmingcx.com/google-custom-search-added-processes.html
为WordPress博客集成Google自定义搜索功能-升级版
http://w.epinv.com/post/153.html
我的搜索引擎ID: partner-pub-2935638875397200:yi4kx5-847n

16、网站SEO

网站关键词更改为:
Linux教程,RHEL教程,CentOS教程,Linux视频教程,Linux服务器,Linux认证,Linux安全,服务器维护,debian教程,WordPress教程,羽飞博客,OPSers-羽飞

网站的描述更改为:
此博客以“分享学习Linux点滴”为宗旨,以“凝聚力量、奔向开源”为目标。为好爱开源的朋友提供有价值的Linux参考资料,所有教程均来源于羽飞的亲自实践,是学习Linux的好地方。

17.RSS地址

http://feeds.feedburner.com/opsers

18、增加GOOGLE的统计代码

加到 </head> 标记之前
-------------------------------------------

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12727071-3']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

-------------------------------------------

19、去掉段落自动空两格

打开style.css
删除下面的内容
-------------------------------------------

.entry p {
text-indent:2em;
}

-------------------------------------------

20、右侧的推荐栏目分类图标一样的解决办法

原因:因为我的某个文章属于了多个分类,就导致了分类图标重复。
解决办法:把文章的分类重新调整。

21、让左右边框显示

因为原主题是把sidebar和post相关的都是用float:right或float:left来实现的,如果再继续使用我现在改过的主题后,会发现,左右两侧的竖线会被覆盖,不太好,为了让他们显示出来,我加了padding属性。终于解决了我最遗憾的地方,但不知道兼容性如何,先用着吧,至少在我的IE8下还没有问题,哈哈……

-------------------------------------------

#wrapper {
width: 980px;
margin: 18px auto;
line-height: 21px;
background: #f2f2f2;
}

-------------------------------------------
加上一句
-------------------------------------------

padding:0 5px 0 5px;

-------------------------------------------

22、修改右侧的滚屏图标的位置

找到
-------------------------------------------

#roll {
display:block;
width:15px;
margin-right:-508px;
position:fixed;
right:50%;
top:50%;
_margin-right:-507px;
_position:absolute;
_margin-top:300px;
_top:expression(eval(document.documentElement.scrollTop));
}

-------------------------------------------

-------------------------------------------

margin-right:-508px;

-------------------------------------------
把成
-------------------------------------------

margin-right:-511px;

-------------------------------------------

23、调整网站地图和随便看看及热门标签

因为在页面的下面,字体是蓝色的,容易导致别人以为是连接,其实不是连接,所以我改成了黑色。
随便看看的内容太靠左,要各右侧调整一下,热门标签原来是彩色的,上面的相关修改已经被调整成了黑色。
网站地图和随便看看及热门标签换成黑色
-------------------------------------------

#bottom h2 {
color: #000;
}

-------------------------------------------

随便看看的内容向右移动
-------------------------------------------

.random_c ol {
margin: 0 0 0 35px;
}

-------------------------------------------
把网站地图换成谷歌地图,并换上蓝色
打开include/map.php

<h2>网站地图</h2>
换成
-------------------------------------------

<h2><a href="http://www.opsers.org/sitemap.xml" target="_blank"><font color="#0196e3">谷歌地图</font></a>&nbsp;|&nbsp;<a href="http://www.opsers.org/sitemap_baidu.xml" target="_blank"><font color="#0196e3">百度地图</font></a></h2>

-------------------------------------------

24、禁止wordpress的符号自动转换功能

 

打开wp-includes/formatting.php

-------------------------------------------

$curl = str_replace($static_characters, $static_replacements, $curl);
$curl = preg_replace($dynamic_characters, $dynamic_replacements, $curl);

-------------------------------------------
前面加上//

或者是在主题的founcations.php中加入下面的代码
//禁止符号自动转换
remove_filter('the_content', 'wptexturize');

25、禁用wordpress日志自动保存功能

 

修改wp-config.php,在里面加入如下代码:
-------------------------------------------
define('WP_POST_REVISIONS', false);
-------------------------------------------
修改wp-admin/post-new.php

-------------------------------------------
wp_enqueue_script('autosave')
-------------------------------------------
注释

26、更换右侧热门文章调用方法

HotNews pro主题侧边热门文章是按评论数多少调用的,调用全部文章,无时间段限制,会造成这个模块中的文章很长时间段内无变化,所以决定换个调用方法。这段代码可以只显示某时间段内热门文章排行,比较合理一些。

把下面代码添加到functions.php“//全部设置结束”的上面:

// 热评文章
function simple_get_most_viewed($posts_num=10, $days=30){
global $wpdb;
$sql = "SELECT ID , post_title , comment_count
FROM $wpdb->posts
WHERE post_type = 'post' AND TO_DAYS(now()) - TO_DAYS(post_date) < $days
ORDER BY comment_count DESC LIMIT 0 , $posts_num ";
$posts = $wpdb->get_results($sql);
$output = "";
foreach ($posts as $post){
$output .= "\n<li><a href= \"".get_permalink($post->ID)."\" rel=\"bookmark\" title=\"".$post->post_title." (".$post->comment_count."条评论)\" >".cut_str($post->post_title,32)."</a></li>";
}
echo $output;
}

然后,打开sidebar.php和sideba_a.php用:
<?php simple_get_most_viewed(); ?>
替换
<?php $popular = new WP_Query('orderby=comment_count&caller_get_posts=4&posts_per_page=10'); ?>
<?php while ($popular->have_posts()) : $popular->the_post(); ?>
<a href="<?php the_permalink(); ?>"><?php echo cut_str($post->post_title,32); ?></a>
<?php endwhile; ?>

其中:数字10是调用篇数,数字30是天数

27、把主题所带的“GOOGLE自定义搜索”换成wordpress自带的搜索代码

把header_h.php中的
<div id="searchbar">
<form action="<?php echo get_option('swt_search_link'); ?>" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="<?php echo get_option('swt_search_ID'); ?>" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="text" onclick="this.value='';" name="q" id="q" />
<input type="image" src="<?php bloginfo('template_directory'); ?>/images/go.gif" id="go" alt="Search" title="搜索" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=zh-Hans"></script>
</div>

换成下面的代码
<div id="searchbar">
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input type="text" value="搜索" onclick="this.value='';" name="s" id="s" />
<input type="image" src="<?php bloginfo('template_directory'); ?>/images/go.gif" id="go" alt="Search" title="搜索" />
</form>
</div>

28、使用管理的邮箱来代替 WordPress@博客域名 的邮箱发送邮件。

在主题的 functions.php 文件的“//全部设置结束”上面增加下面的代码

//使用管理员邮箱来发邮件
function res_from_email($email) {
$wp_from_email = get_option('admin_email');
return $wp_from_email;
}
function res_from_name($email){
$wp_from_name = get_option('blogname');
return $wp_from_name;
}
add_filter('wp_mail_from', 'res_from_email');
add_filter('wp_mail_from_name', 'res_from_name');

 

29、禁止WordPress自动保存。

编辑functions.php文件
加入下面内容

function disableAutoSave(){
wp_deregister_script('autosave');
}
add_action( 'wp_print_scripts', 'disableAutoSave' );

30、修改h3\h4标签

修改Style.css

##content h3 {
	font-weight: bold;
	color: #0196E3;
	font-size: 16pt;
	text-shadow: 1px 1px 2px #AAAAAA;
	}  

#content h4 {
	font-weight: bold;
	color: #F0F;
	font-size: 14px;
        margin: 15px;
	text-shadow: 1px 1px 2px #AAAAAA;
}

.entry_title {
	font-size: 16px;
 	font-weight: bold;
	text-shadow: 1px 1px 2px #AAAAAA;
	}

#post h3 {
	font-size: 15px;
 	font-weight: bold;
	text-shadow: 1px 1px 2px #AAAAAA;
	}

修改home.css

.cat_post {
        float:right;
        background: url(../images/login.png) no-repeat 0 -110px;
        width:500px;
        font-size: 13px;
        text-shadow: 1px 1px 2px #AAAAAA;
        list-style: none;
        height:28px;
        padding:0 10px 0 20px;
        border-bottom:1px solid #f1f1f1;
        }

待续……

22 条留言  访客:14 条  博主:7 条   引用: 1 条

  1. 请问羽飞老师你的博客主题是哪款,我也要弄一款这个,一直找不到!

    • 我的博客下面有连接的啊!!呵呵,是鸟哥的HotNews主题,下载地址http://zmingcx.com/hotnews-pro-theme-27.html

来自外部的引用: 1 条

  • 邓肯博客:知更鸟主题新闻热点的修改 | Duncan's Blog

给我留言

Copyright © 羽飞博客 保留所有权利.   Ality主题 皖ICP备14013844号-1

用户登录