WordPress主题制作教程-3制作博客的header

网站建设 4100 Views 0 Comments

WordPress主题制作教程-3制作博客的header

通过上一讲的说明大家知道了WordPress 主题最主要的两个文件是style.css 和index.php,他们是最基本的,但是只有他们显然是不完美的,虽然你可以把所有的功能都写到index.php 中,但这不符合WordPress 主题制作的规范,这一讲我们将学习如何按照规范去制作自己的主题。

WordPress 的页面结构

WordPress 的页面结构

从上面的图示我们可以看出一个基本的WordPress 页面是由四部分构成的(header.php,index.php, footer.php, sidebar.php),他们在WordPress 博客中负责不同的页面部分。我们将在下面的课程中讲解这四个文件的制作方法,今天我们就先来看看怎样来制作header.php 文件。
(1)首先我们在index.php 中写入如下几个简单的函数,这些函数暂时不做讲解,等讲到index.php 文件时我们会进行说明的。
代码如下:
<?php get_header()?>
<?php get_footer()?>
(2)然后在wp-theme目录下建立一个header.php 文件。
写入如下代码:

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0
Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title> <?php bloginfo(‘name’); ?></title>
<linkrel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen”
/>
</head>
<body>
<div >
<h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
<div class=”description”><?php bloginfo(‘description’); ?></div>
</div>
</body>

(3)打开浏览器查看主题是不是可以看到显示出博客的名字还有描述啦。
恩,这就是模版函数的功劳了,下面我们就看看这个是如何实现的。
说明:
一、bloginfo()模版函数
Bloginfo()就是个模版函数,通过它我们可以调用你博客相关的信息,我们在header.php 中
用到了四次这个函数,取出了三个主要的数据:博客的名字bloginfo(‘name’)、样式文件
bloginfo(’stylesheet_url’)、博客描述bloginfo(‘description’)。这里需要特别指出的有两点:
1)Bloginfo()函数具有输出功能,即他不是返回数据,而是直接把数据输出到浏览器。
2)Boginfo()输出不同的数据通过参数配置实现。
Bloginfo()函数的常用配置参数说明

参数名 说明 返回值举例
html_type 文档类型 Text/html
charset 网页编码 Utf8
name 博客的名字 趣味互联网
stylesheet_url style.css的url地址
http://blog.webfuns.cn/wp-content/themes/inove/style.css

comments_rss2_url 评论的rss订阅地址 http://blog.webfuns.cn/comments
/feed
description 副标题 webfuns
admin_email 管理员邮箱
admin@webfuns.cn
version WordPress 的版本 3.7
language 当地的语言  Zh-cn

二、get_option()函数
我们在这里用这个函数得到了博客链接的地址,这个函数需要注意就一点他返回的是一个url 地址变量,所以如果要在页面上显示那么需要在他的前面加上echo 函数。当然我们还应该加上一些样式,但是这超出了我们教程的范围,我在这里只是向大家解释如何使用这些模版函数和主题制作的基本方法,并不会去叫大家如何设计主题,掌握了这些知识再加上丰富的创意才能实现漂亮的主题,这要依赖于你的css 知识基础和设计能力而这些不包含在我们教程的内容之中

转载请注明:一只羊博客 » WordPress主题制作教程-3制作博客的header

分享到:
(2)

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址