wordpress主题修改总结

2012年10月18日 分类:Wordpress其他

我以前的wordpress主题是Suffusion,用了快一年了吧,这主题真的十分强大,基本上所有的地方都可以在后台修改。也正因如此,这主题是很复杂的,很臃肿。因为选项太多,每次调用都会进行很多的判断和加载,所以我想自己弄一个简单点的主题。

一开始我是想直接修改Suffusion,把不要的选项去掉,但是他太庞大了,里面错综复杂,很难清理干净。所以还是选一个本来就比较简单的主题来修改来的方便,于是就选了blixed这款主题。这个主题很简洁,只有基本功能,而且历史久远,在wordpress上都找不到了。经过这几天的修改和测试,主题现在差不多成形了,特此写篇文章,总结一下修改主题的方法,和遇到的一些问题。

1.介绍

一个完整的wordpress主题应该有如下几个文件:
  • style.css : 样式表文件,用于DIV+CSS布局。

  • functions.php : 功能函数
  • index.php : 首页模板,很重要。
  • single.php : 文章页面模板
  • page.php : 页面模板,比如About页面。
  • archive.php : 文章归档/分类目录模板
  • search.php : 搜索结果模板
  • 404.php : 404 模板,链接无效时显示的内容。
  • header.php : 顶部模板
  • sidebar.php : 侧栏模板
  • comments.php : 显示和发表评论的模板
  • footer.php : 底部模板
在这里我把他们分成了三部分:
  1. 第一部分主要用于控制页面和内容的,有html基础的朋友应该知道style.css是用来规划网页的布局的,如果想对网页某个位置进行调整的话可以在style.css中修改,一些特效也可以用css来实现,functions.php里包含了很多函数用于控制内容,比如你想记录文章被查看了几次,就可以在这用函数来实现。
  2. 第二部分是页面,也就是浏览器所看到的部分。当进入首页时会显示index.php所定义的内容,打开文章就会显示single.php的内容,点了下搜索就进入了search.php页面。
  3. 第三部分是第二部分的组成元素,我们都知道wordpress的顶部、右边侧栏以及底部大都是不变的,所以为了节省代码,把他们拿出来放入特定的文件中,需要的时候再调用。比如打开首页后index.php会先调用header.php,有了头部后就是正文了,这个需要自定义,然后就是sidebar.php,最后footer.php,这样一个完整的首页就出现了。进入文章后也是如此,只不过多了个comments.php,加个留言功能。
这些文件是一个完整主题所必须的,如果缺了某个会怎么样呢?这就要说一下wordpress的模版层次了,index是必须有的,位于最高层,如果第二部分的其他某个文件没有的话都会调用index.php。也就是说你完全可以只用一个index.php来构成你的页面部分。所以我们可以发现某些极度精简的主题只有style.css和index.php。

2.header.php

接下来我会根据我的主题为例子,来看一下如何自定义。我会根据页面的布局来说明,首先就是头部header。
header.php包括三部分,head标签的部分、banner部分和下面的导航栏。

2.1.head标签部分

这部分是html所必须的,一般都通用的,代码如下:

<title><?php bloginfo('name'); wp_title();?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version');?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url');?>" type="text/css" media="screen, projection" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url');?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url');?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url');?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url');?>" />
<?php wp_head();?>

这部分和html有关,我就不多说了,就强调一下最后一行,这个是wordpress自己的函数,用于在head添加一些信息,比如插件的初始化等,如果没有的话有些插件就会不工作,这是必须的。

2.2.banner部分

也就是最上方的那一块,如果你美工比较好的话可以加个图片什么的,我比较偷懒也不太会美化,就写了博客名字和描述。

<div id="header">
 <h1><a href="<?php bloginfo('url'); ?>/" rel="home"><strong><?php bloginfo('name'); ?></strong></a></h1>
 <div id="description"><?php bloginfo('description');?></div>
</div>

套上div,这样就可以用css来美化和布局了。

2.3.导航栏部分

要开启导航菜单功能,必须在functions.php中注册一个菜单,这样我们在后台主题那就会出现菜单选项了。

<?php
if (function_exists('add_theme_support')) {
    //开启导航菜单主题支持
    add_theme_support('nav-menus');
    //注册一个导航菜单
    register_nav_menus( array( 'primary' => __( 'Primary Navigation', 'primary' ) ) );
}
?>

然后我们在header.php中调用这个菜单。

<div id="navigation"> 
<?php
$menu_args = array(
 'container' => 'div',//使用div包裹
 'container_class' => 'mainNavBlock',//div的class属性
 'container_id' => 'menu',//div的id
 'menu_class' => 'mainNav',//菜单的class
 'menu_id' => "nav",//菜单的id
 'depth' => 0,
 'theme_location' => 'primary'//上面定义的primary,名字随便。
);
wp_nav_menu($menu_args);//调用菜单
?>  
<!-- 下面是搜索框 -->
<form action="<?php bloginfo('siteurl');?>/index.php" method="get">  
 <input type="text" name="s" id="searchfield" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}">
 <input type="submit" id="searchbutton" value="Search" name="searchsubmit">  
</form>
</div>

这样导航栏就完成了,要想他好看一点就用css美化一下:)。

3.index.php

这个是首页模版,开头当然是上面定义好的header.php了,我们使用wordpress的函数来调用它。

<?php get_header(); ?>

然后就是一篇篇文章了,我这是让他们以摘要(excerpt)的形式显示,代码如下:

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
 <div class="entry">
  <div class="excerpt">
  <h1 class="index-title"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); //文章标题?></a></h1>  
  <?php the_excerpt(); //显示摘要?></div>
  <div class="info"><span class="clear"><a href="<?php the_permalink() ?>" class="more">阅读全文</a></span>
      <span class="comments"><?php comments_popup_link('留言评论', '1 条评论', '% 条评论', 'commentlink', ''); ?></span>
      <span class="date"><?php the_time('Y 年 n 月 j 日') ?></span>
  <span class="category">分类:<?php the_category(' , '); ?></span>     
      </div>
 </div>
<?php endwhile; ?>
<div class="navigation">
 <?php posts_nav_link(); //上一页-下一页?>
</div>
<?php else : ?>
<div class="post">
 <h2><?php _e('Not Found'); ?></h2>
</div>
<?php endif; ?>

首先判断当前博客是否有文章,有的话使用while循环依次调用显示,最后加上“上一页、下一页”翻页链接;没有文章的话提示找不到。就这么简单。

4.single.php

single就是单篇文章的模板,是我们点进去时显示的模版,这里和index差不多,把摘要改成全文就行了。

<?php the_content();?>

你还可以在这加个性化的内容,比如文章的版权信息、分享链接、相关文章什么的。以前一般都是插件实现的,现在我们就可以自己来定制他们了。

然后就是调用评论模版,加载评论框了,直接使用wordpress的函数就行了。

<?php comments_template(); ?>

comments.php的写法差不多,找个自己喜欢的就行。

5.sidebar和footer

和导航栏一样,要想使用sidebar必须在functions.php中注册一个。

<?php
if ( function_exists('register_sidebar') ) 
{
 register_sidebar(array('before_widget' => '', 
  'after_widget' => '',
  'before_title' => '<h3>',
  'after_title' => '</h3>',     
  ));
}
?>

然后就可以在主题那看到小工具选项了,把需要的托到右边,然后在sidebar.php中调用这个侧边栏。

<?php dynamic_sidebar() ; ?>

footer部分的话随便写,也就copyright什么的。有一个不能少,上面header部分由wp_head,这里自然有wp_footer了。

<?php wp_footer(); ?>

还可以把一些统计的js代码放在这儿,这样每个页面都能统计到了,还可以放广告代码等等。因为js代码不会显示出来,但加载速度比较慢,所以放在底部再合适不过了。

6.总结

经过了这么多天的修改和测试,新主题终于可以访问了。期间出的问题主要是布局问题,不是导航栏错位就是侧边栏被挤出去了,也就是css部分的。由于自己不了解css,原主题的css又不是很完善,修改了很久才勉强能看。还有就是摘要的问题,因为wordpress的摘要实在是不行,所以我自定义了摘要,但里面有一些没有闭合的html标签把下面的内容搞得乱七八糟,哎,只能手动修改。
总的来说初次尝试还是比较成功的,还有问题的话再修改就是了,这样主题就会越来越完美了!

作者:wuyuan 本文来自Wuyuan's Blog 转载请注明,谢谢! 文章地址: https://wuyuans.com/2012/10/modify-wordpress-theme