Header.php是每個WordPress主題基本的文件之一。它負責呈現網頁最頂部的內容，包括網站標題、菜單和Twitter Card等默認數據。在本文中，我們將探討如何利用header.php創建一個美觀、響應式的網站，我們將引入一段pre標簽來展示它的代碼。 在header.php中，最常見的數據是網站標題。我們將在pre標簽中示例代碼：

<div class="site-title">
<?php if ( is_front_page() ) :
echo '<h1><a href="' . esc_url( home_url( '/' ) ) . '" rel="home">'.$_SERVER['HTTP_HOST'].'</a></h1>';
else :
echo '<p><a href="' . esc_url( home_url( '/' ) ) . '" rel="home">'.$_SERVER['HTTP_HOST'].'</a></p>';
endif;
?>
</div>

下面是代碼在網站上的樣子：此代碼用條件語句檢查網站是不是首頁（即是否是用戶首次瀏覽你的網站的頁面），并相應地輸出不同的HTML樣式。如果是前臺頁面，就會輸出一個居中的H1標簽，如果是其他頁面，就會輸出一個寬度為100%的P標簽。 接下來，您可以添加網站導航。這里是例子代碼：

<nav id="site-navigation" class="main-navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'twentytwenty' ); ?></button>
<?php
wp_nav_menu(
array(
'theme_location' =>'menu-1',
'menu_id'        =>'primary-menu',
)
);
?>
</nav>

此代碼實際上創建了一個下拉式的菜單，并在HTML中輸出相應的HTML和CSS。由于主題支持響應設計，該導航菜單將根據設備（桌面、平板或移動設備）動態調整其寬度。 下面是代碼在網站上的外觀：最后，我們將在代碼中包含WordPress的默認數據（Twitter Cards）。這些元數據包括您的網站的標題和描述等內容。在pre標記中，引入WordPress默認的Twitter Card數據代碼如下：

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@your_username" />
<meta name="twitter:creator" content="@your_username" />
<meta name="twitter:title" content="Title of your website" />
<meta name="twitter:description" content="This is a description of your website." />

此代碼告訴Twitter如何呈現您的網站的數據。您可以在WordPress中更改這些數據，例如網站的描述和主要聯系方式。 在本文中，我們已經深入探討了如何利用header.php創建一個美觀、響應式的網站。我們已經介紹了網站標題、導航菜單和Twitter Cards等WordPress默認元數據。如果您需要更多的幫助或擁有任何問題，請在評論中留言。