12 12
发新话题
打印

[技术分享] 菜鸟修改arthemia

菜鸟修改arthemia

前些日子忙着结婚,没有更新博客,最近终于有闲情了。在http://wordpress.org.cn/上看到了这款名为arthemia的主题,作者是:michael jubel。同时也看到了牛奶糖博客对这款主题进行了改良,感觉非常漂亮。于是又心动了,下载安装一气呵成,可就是没达到人家那效果。年初写过一篇菜鸟讲解对英文模板的汉化,今天又写了这个,希望能和大家共同探讨这个主题使用中的一些问题,,,不对的地方还请各位多多指教。

浩大的工程即将到来:


以下内容如无特殊说明,皆按原版主题中的代码进行比较修改。
第一步:修改header.php
引用:
<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。
引用:
注意修改CSS中#navbar {
margin:0 auto;
margin-top:15px;  这里要修改距顶部的位置。。。。。 改为-5PX
引用:
删除<div id=”tagline”><?php bloginfo(’description’); ?></div>
说明:把副标题删掉
引用:
删除<img src=”<?php echo get_option(’home’); ?>/wp-content/themes/arthemia/images/banners/wide.jpg” alt=”" width=”468px” height=”60px”  />
说明:把广告位删掉
第二步:修改index.php
引用:
左侧头条日志:
<?php query_posts(”showposts=1&category_name=Headline”); ?>中的headline改为new
说明:把原定义的分类改成自己想要在首页显示的分类。
引用:
修改上面代码的前一段中的headline.png改为newpost.jpg
说明:制作一个大小为75*21的图片代替原Headline
引用:
在 <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★★★’, ”, ”); ?>
说明:增加“编辑”,在首页直接点编辑就进入后台修改日志。不会影响美观的,非管理用户看不见滴。
引用:
修改$values = get_post_custom_values(”Image”) 中Image为小写image
说明:日志前的图片缩略图。在发表日志时需要插入自定义字段,我更习惯英文全部小写。字段名大小写必须对应,否则显示不了正确的图片。
引用:
<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;
}    进行靠右对齐的设定
右侧的4篇日志:
引用:
featured.png改为show.jpg 大小还是同样的75*21,当然你也可以将图做的再大点,美观就好。
?php query_posts(”showposts=4&category_name=Featured”); $i = 1; ?>中的Featured改为show
说明:将分类改为自定义的分类。showposts=4 表示显示4篇日志。
引用:
<?php $values = get_post_custom_values(”Image”);同上改为小写
中部分类:
引用:
原版中 第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 } ?>删除
说明:替换了这里的分类,改成了一个隔断的图片,现在看来还是不如原来好,也许等以后会修改成别的样子吧。
引用:
在CSS中找到#middle改为:#middle {
width: 920px;
background:#fff;
float:right;
padding:13px;
margin:10px 0;
background:url(images/midlogo.jpg);   这里是增加图片的代码midlogo.jpg就是图片啦
}
左下方5篇日志:
引用:
我在<div id=”front-list”> 下增加了一段ALIMAMA广告代码。。
query_posts(”cat=-9,-15&paged=$page&posts_per_page=5″); ?>
说明:修改这里的-9,-15,减号代表不显示的分类。去掉减号就代表要显示的分类。后面的5是显示的日志数量。
同上,增加“编辑”;修改Image。
引用:
<?php if(function_exists(’wp_pagenavi’)) { wp_pagenavi(); }
   else { ?>
说明:这段代码的意思是调用插件wp_pagenavi,else意思是如果没有找到插件的话,执行下面的代码。
第三步:修改sidebar.php
引用:
删除<img src=”<?php echo get_option(’home’); ?>/wp-content/themes/arthemia/images/banners/square.jpg” alt=”" width=”300px” height=”250px” />。。。添加自己的广告代码。
引用:
删除<h3>Blogroll</h3>及下面的内容25-34行
在<div id=”sidebar-bottom”>下增加<a href=”http://ilevon.cn/index.php/guestbook/”><img src=”<?php echo get_option(’home’); ?>/wp-content/themes/arthemia/images/guestbook.jpg” alt=”" width=”300px” height=”250px” /></a>
说明:增加一个300*250图片,连接到guestbook,也就是留言板页面。(制作留言板,请参考百度or谷歌)
以上是主要修改的三个文件,由于时间关系和技术所限,只做了基本的修改,美化还很不到位呢。。。
需要注意的问题:
  • 缩略图片显示:从网页中搜索的图片,右键另存为后为默认的BMP格式,如果不经过图片工具而直接改后缀名为JPG,上传到博客中,不能正常显示。最简单的方法是经过WIN系统的画图工具另存为JPG就可以了。我就没有注意到图片格式问题,和牛奶糖请教了下,一直以为是定义字段中图片链接不对,后来由于主题脚本文件夹下的timthumb.php这个文件报错,说图片不是一个真正的JPEG,所以想起图片格式。经过重新修改后,确认了这个问题!;自定义字段一定要和你的index.php中的一样,在链接问题上加前面的/和不加没有影响。
  • 修改CSS。 顶部的TOPLOGO背景图片和NAVBAR图片进行对齐,同时由于原NAVBAR是圆角的,又修改了下图片。
  • 上面的两个分类显示文章的分类一定要对应自己的,别搞错了。。。
  • 图片制作-0- photoshop又有了点小心得,这里就不再和大家分享了。。。
  • 安装和主题配套的插件
  • 中文工具箱提供自动截断,不过对于这款主题排版美化不是太合适。我还没有找到修改此插件中截断(摘要)文字数量的方法。。。
  • 记得保存主题原作者信息和链接!!!
有什么问题,欢迎大家留言,我们共同讨论学习呀。
下周将继续进行修改加工,包括插件方面的调用,侧边栏中内容的补充等等。。。

效果请看我的博客ilevon.cn

[ 本帖最后由 levon 于 2008-9-18 22:08 编辑 ]
:call: 警察叔叔说:“http://ilevon.cn”那个网站人好多啊

TOP

补充图片

不会截全图0-0
附件: 您所在的用户组无法下载或查看附件
:call: 警察叔叔说:“http://ilevon.cn”那个网站人好多啊

TOP

我看,字体显示有问题呀,太小了!

TOP

我用的IE6浏览器,感觉不是很小呀。。


顺便,刚找到了截断摘要的设置。。插件编辑里:
function mul_excerpt ($excerpt) {
     $myexcerpt = substr($excerpt,0,255);      
     return utf8_trim($myexcerpt) . '... ';

255这个数值。。修改下就OK了。不过,不知道为什么改的太大,页面就被破坏了,侧边栏都跑下面去啦。。。我改为400后正常-0-
:call: 警察叔叔说:“http://ilevon.cn”那个网站人好多啊

TOP

很不错的,有空了也研究一下

TOP

我打算修改另一款,不过楼主的博客貌似不能评论,总说失败
怀念1997年的秋天 这里的天空是灰色的,每天坐着一个怀旧的流浪人BBpress

TOP

我看中 图片里的字体啊,咋么弄的,直接photoshop画笔写么?

TOP

这个主题果然很厉害
看见很多修改版了
真是太美乐
完美实惠wp空间       我的 简爱
WP群74015724

TOP

楼主辛苦了,一项一项的展示修改的过程!



我女儿的blog的也是根据牛奶糖的arthemia 主题修改的,有需要咨询的朋友也可以找我啊!


http://www.qiuyinuo.com

[ 本帖最后由 anndi 于 2008-9-20 21:28 编辑 ]

TOP

我打算修改另一款,不过楼主的博客貌似不能评论,总说失败
我自己能呀,,,回头我试试以别的身份发评论。。

我看中 图片里的字体啊,咋么弄的,直接photoshop画笔写么?
不是,是从网上找的字体文件。添加到WINDOWS里,然后PS里写的。


楼主辛苦了,一项一项的展示修改的过程!我女儿的blog的也是根据牛奶糖的arthemia 主题修改的,有需要咨询的朋友也可以找我啊!

我去过你的blog好几次啦,就是没有留言,嘿嘿~
:call: 警察叔叔说:“http://ilevon.cn”那个网站人好多啊

TOP

 12 12
发新话题