菜鸟修改arthemia
前些日子忙着结婚，没有更新博客，最近终于有闲情了。在[url=http://wordpress.org.cn/][color=#3c78a7]http://wordpress.org.cn/[/color][/url]上看到了这款名为arthemia的主题，作者是[url=http://www.michaeljubel.com/][color=#3c78a7]:michael jubel[/color][/url]。同时也看到了[url=http://milktown.cn/][color=#3c78a7]牛奶糖[/color][/url]博客对这款主题进行了改良，感觉非常漂亮。于是又心动了，下载安装一气呵成，可就是没达到人家那效果。年初写过一篇[url=http://ilevon.cn/index.php/2008/01/14/translate-english-theme/]菜鸟讲解对英文模板的汉化[/url]，今天又写了这个，希望能和大家共同探讨这个主题使用中的一些问题，，，不对的地方还请各位多多指教。浩大的工程即将到来：
以下内容如无特殊说明，皆按原版主题中的代码进行比较修改。
第一步：修改header.php
[indent][quote]<a href=”<?php echo get_option(’home’); ?>/”><img src=”<?php echo get_option(’home’); ?>/wp-content/themes/arthemia/images/logo.png” width=”177px” height=”39px” alt=”" /></a>
修改为<a href=”<?php echo get_option(’home’); ?>/”><img src=”<?php echo get_option(’home’); ?>/wp-content/themes/arthemia/images/toplogo.jpg” /></a>
说明：原代码中加载logo.png图片，宽177高39，修改为自己定义的图片，也就是网站头部蓝色背景图。大小960*158。
[/quote]
[quote]注意修改CSS中#navbar {
margin:0 auto;
margin-top:15px; 这里要修改距顶部的位置。。。。。 改为-5PX
[/quote]
[quote]删除<div id=”tagline”><?php bloginfo(’description’); ?></div>
说明：把副标题删掉
[/quote]
[quote]删除<img src=”<?php echo get_option(’home’); ?>/wp-content/themes/arthemia/images/banners/wide.jpg” alt=”" width=”468px” height=”60px” />
说明：把广告位删掉
[/quote]
[/indent]第二步：修改index.php
[indent][quote]左侧头条日志：
<?php query_posts(”showposts=1&category_name=Headline”); ?>中的headline改为new
说明：把原定义的分类改成自己想要在首页显示的分类。
[/quote]
[quote]修改上面代码的前一段中的headline.png改为newpost.jpg
说明：制作一个大小为75*21的图片代替原Headline
[/quote]
[quote]在 <div class=”meta”>[<?php the_time('j M Y') ?> | <?php comments_popup_link('No Comment', 'One Comment', '% Comments');?> | <?php if(function_exists('the_views')) { the_views(); } ?>]后增加<?php edit_post_link(’ ★★★Edit★★★’, ”, ”); ?>
说明：增加“编辑”，在首页直接点编辑就进入后台修改日志。不会影响美观的，非管理用户看不见滴。
[/quote]
[quote]修改$values = get_post_custom_values(”Image”) 中Image为小写image
说明：日志前的图片缩略图。在发表日志时需要插入自定义字段，我更习惯英文全部小写。字段名大小写必须对应，否则显示不了正确的图片。
[/quote]
[quote]<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”>Read the full story »</a>改为：
<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”阅读“<?php the_title(); ?>””>阅读全文 »</a>
说明：汉化一下原来的英文。同时加了一个<div id=”yuedu”></div>，又在CSS中定义#yuedu {
float:right;
} 进行靠右对齐的设定
[/quote]
右侧的4篇日志：
[quote]featured.png改为show.jpg 大小还是同样的75*21，当然你也可以将图做的再大点，美观就好。
?php query_posts(”showposts=4&category_name=Featured”); $i = 1; ?>中的Featured改为show
说明：将分类改为自定义的分类。showposts=4 表示显示4篇日志。
[/quote]
[quote]<?php $values = get_post_custom_values(”Image”);同上改为小写
[/quote]
中部分类：
[quote]原版中 第50行到第61行<img src=”<?php echo get_option(’home’); ?>/wp-content/themes/arthemia/images/category.png” class=”clearfloat” alt=”" />
<?php $display_categories = array(5,6,7,8,11); $i = 1;
foreach ($display_categories as $category) { ?>
<div id=”cat-<?php echo $i; ?>” class=”category”>
<?php query_posts(”showposts=1&cat=$category”)?>
<span class=”cat_title”><a href=”<?php echo get_category_link($category);?>”><?php single_cat_title(); ?></a></span>
<a href=”<?php echo get_category_link($category);?>”><?php echo category_description($category); ?></a>
</div>
<?php $i++; ?>
<?php } ?>删除
说明：替换了这里的分类，改成了一个隔断的图片，现在看来还是不如原来好，也许等以后会修改成别的样子吧。
[/quote]
[quote]在CSS中找到#middle改为：#middle {
width: 920px;
background:#fff;
float:right;
padding:13px;
margin:10px 0;
background:url(images/midlogo.jpg); 这里是增加图片的代码midlogo.jpg就是图片啦
}
[/quote]
左下方5篇日志:
[quote]我在<div id=”front-list”> 下增加了一段ALIMAMA广告代码。。
query_posts(”cat=-9,-15&paged=$page&posts_per_page=5″); ?>
说明：修改这里的-9,-15，减号代表不显示的分类。去掉减号就代表要显示的分类。后面的5是显示的日志数量。
[/quote]
同上，增加“编辑”；修改Image。
[quote]<?php if(function_exists(’wp_pagenavi’)) { wp_pagenavi(); }
else { ?>
说明：这段代码的意思是调用插件wp_pagenavi,else意思是如果没有找到插件的话，执行下面的代码。
[/quote]
[/indent]第三步：修改sidebar.php
[indent][quote]删除<img src=”<?php echo get_option(’home’); ?>/wp-content/themes/arthemia/images/banners/square.jpg” alt=”" width=”300px” height=”250px” />。。。添加自己的广告代码。
[/quote]
[quote]删除<h3>Blogroll</h3>及下面的内容25-34行
在<div id=”sidebar-bottom”>下增加<a href=”[url=http://ilevon.cn/index.php/guestbook/][color=#0000ff]http://ilevon.cn/index.php/guestbook/”><img[/color][/url] src=”<?php echo get_option(’home’); ?>/wp-content/themes/arthemia/images/guestbook.jpg” alt=”" width=”300px” height=”250px” /></a>
说明：增加一个300*250图片，连接到guestbook，也就是留言板页面。（制作留言板，请参考百度or谷歌）
[/quote]
[/indent]以上是主要修改的三个文件，由于时间关系和技术所限，只做了基本的修改，美化还很不到位呢。。。
需要注意的问题：
[list][*]缩略图片显示：从网页中搜索的图片，右键另存为后为默认的BMP格式，如果不经过图片工具而直接改后缀名为JPG，上传到博客中，不能正常显示。最简单的方法是经过WIN系统的画图工具另存为JPG就可以了。我就没有注意到图片格式问题，和牛奶糖请教了下，一直以为是定义字段中图片链接不对，后来由于主题脚本文件夹下的timthumb.php这个文件报错，说图片不是一个真正的JPEG，所以想起图片格式。经过重新修改后，确认了这个问题！；自定义字段一定要和你的index.php中的一样，在链接问题上加前面的/和不加没有影响。[*]修改CSS。 顶部的TOPLOGO背景图片和NAVBAR图片进行对齐，同时由于原NAVBAR是圆角的，又修改了下图片。[*]上面的两个分类显示文章的分类一定要对应自己的，别搞错了。。。[*]图片制作-0- photoshop又有了点小心得，这里就不再和大家分享了。。。[*]安装和主题配套的插件[*]中文工具箱提供自动截断，不过对于这款主题排版美化不是太合适。我还没有找到修改此插件中截断（摘要）文字数量的方法。。。[*]记得保存主题原作者信息和链接！！！[/list]有什么问题，欢迎大家留言，我们共同讨论学习呀。
下周将继续进行修改加工，包括插件方面的调用，侧边栏中内容的补充等等。。。
效果请看我的博客[url=http://ilevon.cn/]ilevon.cn[/url]
[[i] 本帖最后由 levon 于 2008-9-18 22:08 编辑 [/i]] 补充图片[attach]4918[/attach]
不会截全图0-0 我看，字体显示有问题呀，太小了！ 我用的IE6浏览器，感觉不是很小呀。。
顺便，刚找到了截断摘要的设置。。插件编辑里：
function mul_excerpt ($excerpt) {
$myexcerpt = substr($excerpt,0,255);
return utf8_trim($myexcerpt) . '... ';
255这个数值。。修改下就OK了。不过，不知道为什么改的太大，页面就被破坏了，侧边栏都跑下面去啦。。。我改为400后正常-0- 很不错的，有空了也研究一下:) 我打算修改另一款,不过楼主的博客貌似不能评论,总说失败 我看中 图片里的字体啊，咋么弄的，直接photoshop画笔写么？ 这个主题果然很厉害
看见很多修改版了
真是太美乐 楼主辛苦了，一项一项的展示修改的过程！
我女儿的blog的也是根据牛奶糖的arthemia 主题修改的，有需要咨询的朋友也可以找我啊！
[url=http://www.qiuyinuo.com/]http://www.qiuyinuo.com[/url]
[[i] 本帖最后由 anndi 于 2008-9-20 21:28 编辑 [/i]] 我打算修改另一款,不过楼主的博客貌似不能评论,总说失败
我自己能呀，，，回头我试试以别的身份发评论。。
我看中 图片里的字体啊，咋么弄的，直接photoshop画笔写么？
不是，是从网上找的字体文件。添加到WINDOWS里，然后PS里写的。
楼主辛苦了，一项一项的展示修改的过程！我女儿的blog的也是根据牛奶糖的arthemia 主题修改的，有需要咨询的朋友也可以找我啊！
我去过你的blog好几次啦，就是没有留言，嘿嘿~
牛奶糖的最新改良效果
[img]http://milktown.cn/images/new.jpg[/img]牛奶糖：[url]http://milktown.cn[/url] 请问大侠，如何将黑色的导航条放到蓝色的主题图片的下方？:handshake
页:
[1]