︿
✖ CLOSE

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

3 個月 之前│
Jin

本篇要來介紹製作WordPress佈景主題之一的 header.php 檔案,WordPress中的header.php是用來專門放置一些外部載入的標題、檔頭、css、js檔案及選單…等等項目。

header.php基本結構

一開始預最基本必須擺放的樣式如下:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>

//放置meta、js、css…等等。
(1).加入標示網站標題<title>、基本 meta 資料。
(2).加入 CSS 語法網址

<?php wp_head(); ?>

</head>

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

<header id="header">

//可以放置選單、放置其他的樣式…等等。
(3).加入選單機制

</header>

(1).加入標示網站標題<title>、基本<meta>資料,放在</head>之內

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

(2).加入 CSS 語法網址,放在</head>之內

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

(3).加入選單機制,放在</header>之內

<nav id="menu-herder"><?php wp_nav_menu( array( 'theme_location' => 'primary-menu'));?></nav></div>

於 fuction.php 加入 menu 的 函式。

<?php register_nav_menus( array( 'primary-menu' =>'選單', )); ?>

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

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>

//放置meta、js、css…等等。
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); ?></title>
<meta name="description" content="<?php bloginfo( 'description' ); ?>">
<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(); ?>>

<header id="header">

//可以放置選單、放置其他的樣式…等等。
  <section id="menu-title">

    <span class="menu-title-left"><h1><a target="_blank" rel="noopener" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name');?></a></h1></span>
    <span class="menu-title-right"><nav id="menu-herder"><?php wp_nav_menu( array( 'theme_location' => 'primary-menu'));?></nav></span>

  </section>
</header>

(4).將 CSS 語法放置 style.css

.container {
overflow:hidden;
width:1140px;
margin:0 auto;
min-height:100%;
height:auto;
margin:0 auto 0;
} 
.container:after,.container-single-test:after,.content-author-test:after { 
clear:both; 
content:""; 
display:block;
} 
.content {
width:1140px;
margin:0 auto;
overflow:hidden;
}
.article {
float:left;
width:72%;
max-width:805px;
margin:10px auto;
}
#header {
width:100%;
min-width:1140px;
margin:0 auto;
background:#FFF;
text-align:center;
box-shadow:0 0 10px rgba(0,0,0,0.20);
}
#header img {
width:100%;
padding:auto;
} 
#header a img {
width:100%;
margin:0 auto;
padding:0;
}
.head-images{
height:246px;
margin:0;
padding:0;
border-top:1px solid #F5F5F5;
border-bottom:1px solid #F5F5F5;
}
.title { 
margin:60px 0;
}
/**選單**/
#menu-title {
display: inline-block;
width: 100%;
max-width: 1065px;
margin: 0 auto;
font-size: 14px;
}
.menu-title-left {
float: left;
width: 40%;
max-width: 280px;
margin: 0 auto;
list-style-type:none;
padding: 5px;
}
.menu-title-left h4 {
margin-left: 25px;
color: #FFF;
text-align: left;
font-size: 22px;
}
.menu-title-left a {
color: #484848;
text-align: left; 
} 
.menu-title-left img {
color: #FFF;
text-align: left;
} 
.menu-title-right{
float: right;
margin: 0 auto;
padding: 16px;
list-style-type: none;
} 
#menu-herder { 
width: 100%;
max-width: 1065px;
margin: 0 auto;
border: 0;
font-size: 13px;
}
#menu-herder a {
display: block;
vertical-align: middle;
margin-right: 2px;
padding: 2px 5px;
text-decoration: none;
color: #777;
} 
#menu-herder ul {
z-index: 999;
position: relative;
margin: 0 auto;
padding: 0;
background: #fff;
list-style: none;
text-transform:none;
float: left;
} 
#menu-herder ul:after, #menu-herder:after {
clear: both; 
content: ''; 
display: block;
}
#menu-herder li { 
margin: 5px auto; 
padding-left: 8px; 
padding-right: 8px; 
border-right: 1px solid 
#f1f1f1; list-style: none;
} 
#menu-herder li:first-child { 
margin: 5px auto; 
padding-left: 8px; 
padding-right: 8px; 
list-style: none;
} 
#menu-herder li a { 
display: block; 
vertical-align: middle; 
margin-right: 2px; 
padding: 2px 5px; 
color: #777; 
text-decoration: none;
} 
#menu-herder ul li { 
float: left; 
vertical-align: middle; 
min-height: 1px;
} 
#menu-herder ul li a.active, #menu-herder ul li a:hover { 
color: #000; 
border-top-left-radius: 2px; 
border-top-right-radius: 2px; 
border-bottom-right-radius: 2px; 
border-bottom-left-radius: 2px 
} 
#menu-herder ul li.hover { 
z-index: 999; 
position: relative; 
cursor: default;
}

完成之後,之後在其他頁面就能使用<?php get_header(); ?>語法來帶入header.php頁面,所以各自頁面都是獨立處理的,也可以避免程式碼過於雜亂。

關於WordPress系列文章事項
文章版本:
第 1.0 版本,此WordPress系列教學純屬個人經驗,若有錯誤會重新修正並加上版本號碼,目前會持續調整樣式、整理佈景語法,最終版本會以最終版本告知(預計此系列文章會在12月前完成)。

▪ 相關文章