介绍worpress博客header.php文件
来源:程序员人生 发布时间:2014-03-05 17:57:44 阅读次数:3274次
建站学院(LieHuo.Net)文章简介:要制作自己的Wordpress主题首先要局部下面的一些知识:html知识、css知识、javascript知识、还有一点php知识。 |
要制作自己的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" ""> <html xmlns="" <?php language_attributes(); ?>> <head profile=""> <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" ""> <html xmlns="" <?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代码;
生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠