介紹worpress博客header.php文件
來源：程序員人生 發布時間：2014-03-05 17:57:44 閱讀次數：3485次
| 建站學院(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代碼；
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
