当前位置：首页 > 网站综合 > CMS系统技巧

CMS技巧：介绍worpress博客header.php

日期：05-16 来源：作者：

eQS中国设计秀

要制作自己的wordpress主题首先要局部下面的一些知识：eQS中国设计秀

html知识eQS中国设计秀

css知识eQS中国设计秀

javascript知识eQS中国设计秀

还有一点php知识eQS中国设计秀

这里以worpress默认模板的代码为例来解析header.php，其余的在以后教程中解析，同时分享一些在主题制作过程中的经验；它的位置位于：eQS中国设计秀

（你的安装目录）wp-content / themes / default文件夹里；eQS中国设计秀

全部header代码：eQS中国设计秀

<?phpeQS中国设计秀
/**eQS中国设计秀
* @package wordPresseQS中国设计秀
* @subpackage Default_ThemeeQS中国设计秀
*/eQS中国设计秀
?>eQS中国设计秀
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">eQS中国设计秀
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>eQS中国设计秀
<head profile="http://gmpg.org/xfn/11">eQS中国设计秀
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />eQS中国设计秀
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>eQS中国设计秀
<link rel="stylesheet" href="<?php _fcksavedurl=""<?php" bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />eQS中国设计秀
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />eQS中国设计秀
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />eQS中国设计秀
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />eQS中国设计秀
<style type="text/css" media="screen">eQS中国设计秀
<?phpeQS中国设计秀
// Checks to see whether it needs a sidebar or noteQS中国设计秀
if ( !empty($withcomments) && !is_single() ) {eQS中国设计秀
?>eQS中国设计秀
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; }eQS中国设计秀
<?php } else { // No sidebar ?>eQS中国设计秀
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }eQS中国设计秀
<?php } ?>eQS中国设计秀
</style>eQS中国设计秀
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>eQS中国设计秀
<?php wp_head(); ?>eQS中国设计秀
</head>eQS中国设计秀
<body>eQS中国设计秀
<div id="page">eQS中国设计秀
<div id="header">eQS中国设计秀
<div id="headerimg">eQS中国设计秀
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>eQS中国设计秀
<div class="description"><?php bloginfo('description'); ?></div>eQS中国设计秀
</div>eQS中国设计秀
</div>eQS中国设计秀
<hr />eQS中国设计秀

下面来逐条分析代码：eQS中国设计秀

<?phpeQS中国设计秀
/**eQS中国设计秀
* @package wordPresseQS中国设计秀
* @subpackage Default_ThemeeQS中国设计秀
*/eQS中国设计秀
?>eQS中国设计秀

最开头是有关主题的注释：介绍了主题相关信息可以加上版权主题名称等；eQS中国设计秀

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">eQS中国设计秀
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>eQS中国设计秀

上面代码中的xhtml1-transitional.dtd定义了Xhtml的文档类型；<?php language_attributes(); ?>为wordPress设置的语言；中文的wordPress在使用主题生成页面后会显示为 lang=”zh-CN”，大家可通过查看网页的源代码发现。eQS中国设计秀

上面的wp_title(’«’, true, ‘right’);为博客标题，这个在后台可以设置；bloginfo(’stylesheet_url’)输出主题的css文件地址；bloginfo(’name’)为博客名称。eQS中国设计秀

if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ );为当页面是文章页是加入与评论相关的JavaScript文件；eQS中国设计秀

php wp_head(); 为其他由插件定义的要插入head的JavaScript文件或css代码；eQS中国设计秀

<div id="header">eQS中国设计秀
<div id="headerimg">eQS中国设计秀
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>eQS中国设计秀
<div class="description"><?php bloginfo('description'); ?></div>eQS中国设计秀
</div>eQS中国设计秀
</div>eQS中国设计秀
<hr />eQS中国设计秀

id=”header”与id=”headerimg”可以通过css文件定义#header为其单独定义样式和位置；eQS中国设计秀
echo get_option(’home’);输出了网站主页的网址；eQS中国设计秀
bloginfo(’name’);为网站名称eQS中国设计秀
bloginfo(’description’); 是网站描述；eQS中国设计秀
这样就介绍完了header代码；eQS中国设计秀