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

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

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

喜歡這篇文章的話
請按個讚或者分享支持一下!

喜歡這篇文章的話
請按個讚或者分享支持一下!

最新的教學及情報資訊都在INMAG!

作者簡介

Jin
寫好每一篇文章讓各位都能學習到各種小知識,希望大家會喜歡!