繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CMS技巧 > 介绍worpress博客header.php
- CMS技巧
- Zblog帮助:模板文件与模板标签
- Joomla教程:模板覆盖方式修改系统输出
- Joomla教程:为Joomla插件创建语言包
- Joomla教程:文章页面中显示指定的模块
- Joomla教程:控制Section中的分类列表页面的显示方式
- Joomla教程:mod-rewrite是否真的被开启
- 在Joomla自定义HTML模块组合使用Google小工具
- Joomla教程:本地搭建的Joomla站点发送邮件
- Joomla教程:在Who is online模块中显示用户名
- dedecms教程:栏目页面转换为单独页面
- CMS可用性测评:帮助找到适合自己的内容管理系统
- Joomla中文教程:构建多重站点
- Joomla教程:在templateDetails.xml中添加语言文件声明
- Joomla教程:为页面和模块添加独立的自定义Class
- Joomla教程:为“read more”链接添加对应的文章标题
- Joomla教程:查看并修改模板的CSS
- Joomla中文教程:创建并使用插件对文章内容进行修改
- Joomla教程:网站首页第一次加载时播放一次Flash动画
- Joomla教程:禁止未分类文章被站内搜索
- Joomla教程:去掉分类文章列表中的文章序号
CMS技巧 中的 介绍worpress博客header.php
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-03 浏览: 65 ::
收藏到网摘: n/a
要制作自己的Wordpress主题首先要局部下面的一些知识：
html知识
css知识
javascript知识
还有一点php知识
这里以worpress默认模板的代码为例来解析header.php，其余的在以后教程中解析，同时分享一些在主题制作过程中的经验；它的位置位于：
（你的安装目录）wp-content / themes / default文件夹里；
全部header代码：
<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/
?>
<!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" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php _fcksavedurl=""<?php" bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<style type="text/css" media="screen">
<?php
// Checks to see whether it needs a sidebar or not
if ( !empty($withcomments) && !is_single() ) {
?>
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; }
<?php } else { // No sidebar ?>
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
<?php } ?>
</style>
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body>
<div id="page">
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>
<hr />
下面来逐条分析代码：
<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/
?>
最开头是有关主题的注释：介绍了主题相关信息可以加上版权主题名称等；
<!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" <?php language_attributes(); ?>>
上面代码中的xhtml1-transitional.dtd定义了Xhtml的文档类型；<?php language_attributes(); ?>为WordPress设置的语言；中文的WordPress在使用主题生成页面后会显示为 lang=”zh-CN”，大家可通过查看网页的源代码发现。
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
上面的wp_title(’«’, true, ‘right’);为博客标题，这个在后台可以设置；bloginfo(’stylesheet_url’)输出主题的css文件地址；bloginfo(’name’)为博客名称。
<style type="text/css" media="screen">
<?php
// Checks to see whether it needs a sidebar or not
if ( !empty($withcomments) && !is_single() ) {
?>
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; }
<?php } else { // No sidebar ?>
#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
<?php } ?>
</style>
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
<style >与</style>之间的css样式可以根据后台主题设置头部图片；
if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ );为当页面是文章页是加入与评论相关的JavaScript文件；
php wp_head(); 为其他由插件定义的要插入head的JavaScript文件或css代码；
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>
<hr />
id=”header”与id=”headerimg”可以通过css文件定义#header为其单独定义样式和位置；
echo get_option(’home’);输出了网站主页的网址；
bloginfo(’name’);为网站名称
bloginfo(’description’); 是网站描述；
这样就介绍完了header代码；
评论 (0) All
