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 : 底部模板
- 第一部分主要用于控制页面和内容的,有html基础的朋友应该知道style.css是用来规划网页的布局的,如果想对网页某个位置进行调整的话可以在style.css中修改,一些特效也可以用css来实现,functions.php里包含了很多函数用于控制内容,比如你想记录文章被查看了几次,就可以在这用函数来实现。
- 第二部分是页面,也就是浏览器所看到的部分。当进入首页时会显示index.php所定义的内容,打开文章就会显示single.php的内容,点了下搜索就进入了search.php页面。
- 第三部分是第二部分的组成元素,我们都知道wordpress的顶部、右边侧栏以及底部大都是不变的,所以为了节省代码,把他们拿出来放入特定的文件中,需要的时候再调用。比如打开首页后index.php会先调用header.php,有了头部后就是正文了,这个需要自定义,然后就是sidebar.php,最后footer.php,这样一个完整的首页就出现了。进入文章后也是如此,只不过多了个comments.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标签把下面的内容搞得乱七八糟,哎,只能手动修改。总的来说初次尝试还是比较成功的,还有问题的话再修改就是了,这样主题就会越来越完美了!