︿
✖ CLOSE
  •  
  •  
  •  
  •  
  •  
  •  

本篇要來介紹製作 WordPress 佈景主題之一的 header.php 檔案,WordPress 中的 header.php 是用來專門放置一些標題、外部載入語法 CSS、JS檔案及選單…等項目,所以也是 WordPress 佈景主題架構中最重要的頁面之一。

header.php基本結構

建立 WordPress 佈景主題 header.php 前必需要先了解 HTML 最基本的結構,簡單來說一個網頁只需要有以下的語法就能建立。

只是 WordPress 不同會將:
<!DOCTYPE html><html><head></head>拆成 header.php
</body></html> 拆成 footer.php。

可以先觀看此篇文章,會有更詳細的 HTML 解說:HTML基本介紹及語法介紹篇

HTML 結構。

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>

WordPress 結構。

跟HTML結構一樣,能夠在<head>…</head>內放置META標籤、JS、CSS 語法、外部載入…等等。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

(1).加入標示網站標題<title>(顯示於像是 Chrome 分頁的名稱)、基本<meta>資料,放在</head>之內

<title><?php wp_title(); ?></title>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="description" content="<?php bloginfo( 'description' ); ?>">

(2).載入WordPress 基本架構的 CSS 語法檔案 style.css,將 CSS 網址放在</head>之內。

跟 HTML 使用方式一樣,差別在於 href(網址)必需要指定到佈景路徑,非常簡單只需要使用:<?php echo esc_url( get_template_directory_uri() ) ?>/style.css

就能夠載入佈景內的 CSS 了。

<link target="_blank" rel="noopener" href="<?php echo esc_url( get_template_directory_uri() ) ?>/style.css" media='all' rel="stylesheet" type="text/css"/>

(3).加入網站標題,放在 <body> 後面。

<?php bloginfo('name');?>

完成的樣式將會是下方整段語法。
所以,先在資料夾上建立一個 header.php 頁面並放入下方語法。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); ?></title>
<link target="_blank" rel="noopener" href="<?php echo esc_url( get_template_directory_uri() ) ?>/style.css" media='all' rel="stylesheet" type="text/css"/>
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<?php bloginfo('name');?>

完成之後,之後在其他佈景頁面就能使用 <?php get_header(); ?> 語法來帶入header.php,一些其他頁面也是像 header.php 以獨立方式處理,然後再另外帶入使用,也能用於避免程式碼過於雜亂。

關於WordPress系列文章事項
文章版本:
第 2.0 版本,WordPress 系列教學純屬個人經驗,若有錯誤會重新修正並加上版本號碼,目前會持續調整樣式、整理佈景語法,目前版本已調整為先教學基本架構再教學設計樣式,之後會以最終版本告知。

▪ 相關文章