【架構篇】WordPress佈景主題製作【header.php】

2022-04-13 2023/04/25

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

header.php基本結構

建立 WordPress 佈景主題 header.php 前必需要先了解 HTML 最基本的結構，簡單來說一個網頁只需要有一般的 HTML 結構。可以先觀看此篇文章，會有更詳細的 HTML 解說：HTML基本介紹及語法介紹篇

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

WordPress 雖然也是能夠直接用上述 HTML 架構方式建立，不過基本的 WordPress 卻是將 HTML 結構拆成許多不同的頁面，將檔案拆成多個的好處是能夠更好的管理，也能夠清楚的知道所編輯的語法位置在哪。

接下來進入正題來建立 WordPress 的 header.php 檔案，首先在 WordPress 佈景主題內資料夾建立一個 header.php 檔案，然後跟著下述步驟教學來學習與建立 header.php 檔案。

先建立一個 header.php 空白的檔案，可預先使用下列的結構，後面會再詳細的介紹。

header.php

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

首先與 HTML 相同一樣要先建立開頭的文本宣告，為目前最新的 HTML5的文本宣告。

<!DOCTYPE html>

以及加入 html 標籤 <?php language_attributes(); ?> 透過此段語法讓搜尋引擎知道是用什麼語言所編寫。

<html <?php language_attributes(); ?>>

在 <head>...</head> 之間能夠放置 Meta 標籤、JS、CSS 語法、外部載入…各種語法。

<head>
<?php wp_head(); ?>
</head>

❶. 加入標示網站標題<title>（顯示於像是 Chrome 分頁的名稱）、基本 <meta> 資料，放在 </head> 之間。

header.php

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

❷. 載入WordPress 基本架構的 CSS 語法 style.css 檔案，將 CSS 網址放在 </head> 之間。

跟 HTML 使用方式一樣，差別在於 href（網址）必需要指定到佈景路徑，非常簡單只需要使用：<?php echo esc_url( get_template_directory_uri() ) ?>/style.css 就能夠載入 style.css 檔案了。

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

❸. 加入網站標題，放在 <body> 後面。

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

header.php 完成的樣式將會是下方整段語法。

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 系列教學純屬個人經驗，若有錯誤會重新修正並加上版本號碼，目前會持續調整樣式、整理佈景語法，目前版本已調整為先教學基本架構再教學設計樣式，之後會以最終版本告知。