我想将自己的
header.htmlheader.php以下是我的主题
header.php<?php
/**
* The header for our theme.
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @package Newsup
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?> >
<?php wp_body_open(); ?>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content">
<?php esc_html_e( 'Skip to content', 'newsup' ); ?></a>
<div class="wrapper" id="custom-background-css">
<header class="mg-headwidget">
<!--==================== TOP BAR ====================-->
<?php do_action('newsup_action_header_section'); ?>
<div class="clearfix"></div>
<?php $background_image = get_theme_support( 'custom-header', 'default-image' );
if ( has_header_image() ) {
$background_image = get_header_image();
} ?>
<div class="mg-nav-widget-area-back" style='background-image: url("<?php echo esc_url( $background_image ); ?>" );'>
<?php $remove_header_image_overlay = get_theme_mod('remove_header_image_overlay',false); ?>
<div class="overlay">
<div class="inner" <?php if($remove_header_image_overlay == false) {
$newsup_header_overlay_color = get_theme_mod('newsup_header_overlay_color','rgba(32,47,91,0.4)');?> style="background-color:<?php echo esc_attr($newsup_header_overlay_color);?>;" <?php } ?>>
<div class="container-fluid">
<div class="mg-nav-widget-area">
<div class="row align-items-center">
<?php $newsup_center_logo_title = get_theme_mod('newsup_center_logo_title',false);
if($newsup_center_logo_title == false) {
?>
<div class="col-md-3 text-center-xs">
<?php } else { ?>
<div class="col-md-12 text-center mx-auto">
<?php } ?>
<div class="navbar-header">
<?php the_custom_logo();
if (display_header_text()) : ?>
<div class="site-branding-text">
<?php if (is_front_page() || is_home()) { ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php echo esc_html(get_bloginfo( 'name' )); ?></a></h1>
<?php } else { ?>
<p class="site-title"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php echo esc_html(get_bloginfo( 'name' )); ?></a></p>
<?php } ?>
<p class="site-description"><?php echo esc_html(get_bloginfo( 'description' )); ?></p>
</div>
<?php endif; ?>
</div>
</div>
<?php do_action('newsup_action_banner_advertisement'); ?>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mg-menu-full">
<nav class="navbar navbar-expand-lg navbar-wp">
<div class="container-fluid">
<!-- Right nav -->
<div class="m-header align-items-center">
<?php $home_url = home_url(); ?>
<a class="mobilehomebtn" href="<?php echo esc_url($home_url); ?>"><span class="fas fa-home"></span></a>
<!-- navbar-toggle -->
<button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-target="#navbar-wp" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="<?php esc_attr_e('Toggle navigation','newsup'); ?>">
<span class="burger">
<span class="burger-line"></span>
<span class="burger-line"></span>
<span class="burger-line"></span>
</span>
</button>
<!-- /navbar-toggle -->
<?php $header_search_enable = get_theme_mod('header_search_enable','true');
if($header_search_enable == true) {
?>
<div class="dropdown show mg-search-box pr-2">
<a class="dropdown-toggle msearch ml-auto" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-search"></i>
</a>
<div class="dropdown-menu searchinner" aria-labelledby="dropdownMenuLink">
<?php get_search_form(); ?>
</div>
</div>
<?php }
$header_subsc_enable = get_theme_mod('header_subsc_enable','true');
$subsc_target = get_theme_mod('newsup_subsc_link_target','true');
$newsup_subsc_link = get_theme_mod('newsup_subsc_link','#');
if($header_subsc_enable == true) {
?>
<a href="<?php echo esc_url($newsup_subsc_link); ?>" <?php if($subsc_target) { ?> target="_blank" <?php } ?> class="btn-bell btn-theme mx-2"><i class="fa fa-bell"></i></a>
<?php } ?>
</div>
<!-- /Right nav -->
<div class="collapse navbar-collapse" id="navbar-wp">
<div class="d-md-block">
<?php wp_nav_menu( array(
'theme_location' => 'primary',
'container' => 'nav-collapse collapse',
'menu_class' => 'nav navbar-nav mr-auto',
'fallback_cb' => 'newsup_fallback_page_menu',
'walker' => new newsup_nav_walker()
) );
?>
</div>
</div>
<!-- Right nav -->
<div class="desk-header d-lg-flex pl-3 ml-auto my-2 my-lg-0 position-relative align-items-center">
<!-- /navbar-toggle -->
<?php $header_search_enable = get_theme_mod('header_search_enable','true');
if($header_search_enable == true) {
?>
<div class="dropdown show mg-search-box pr-2">
<a class="dropdown-toggle msearch ml-auto" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-search"></i>
</a>
<div class="dropdown-menu searchinner" aria-labelledby="dropdownMenuLink">
<?php get_search_form(); ?>
</div>
</div>
<?php }
$header_subsc_enable = get_theme_mod('header_subsc_enable','true');
$subsc_target = get_theme_mod('newsup_subsc_link_target','true');
$newsup_subsc_link = get_theme_mod('newsup_subsc_link','#');
if($header_subsc_enable == true) {
?>
<a href="<?php echo esc_url($newsup_subsc_link); ?>" <?php if($subsc_target) { ?> target="_blank" <?php } ?> class="btn-bell btn-theme mx-2"><i class="fa fa-bell"></i></a>
<?php } ?>
</div>
<!-- /Right nav -->
</div>
</nav> <!-- /Navigation -->
</div>
</header>
<div class="clearfix"></div>
<?php if (is_front_page() || is_home()) { ?>
<?php $show_popular_tags_title = newsup_get_option('show_popular_tags_title');
$select_popular_tags_mode = newsup_get_option('select_popular_tags_mode');
$number_of_popular_tags = newsup_get_option('number_of_popular_tags');
newsup_list_popular_taxonomies($select_popular_tags_mode, $show_popular_tags_title, $number_of_popular_tags); ?>
<?php } ?>
<?php do_action('newsup_action_banner_exclusive_posts');
do_action('newsup_action_front_page_main_section_1'); ?>
这是我的
header.html<div class="fixed w-full bg-white top-0 z-20" >
<header class="w-full h-auto border-b-2 text-gray-300 text-mont font-medium text-sm text-gray" style="color: #bdbdbd;">
<div class="flex justify-between container mx-auto py-2" >
<div >
<label class="text-sm text-mont text-gray font-semibold focus:outline-none cursor-pointer" style="color: #bdbdbd;">
<select class="w-11" >
<option value="en" >En</option>
<option value="es" >Spanish</option>
</select>
</label>
</div>
<div class="flex flex-row" >
<div class="mr-3" ><a href="" style="cursor: pointer;">Latest News</a></div>
<div ><a href="/zakat" style="cursor: pointer;">Zakat Calculator</a></div>
</div>
<div class="flex flex-row" >
<button class="flex gap-3 items-center text-blue text-sm text-mont font-bold" style="color: #00ade9;">
<img class="" src="https://aidhumanity.org.uk/blogs/wp-content/uploads/2023/07/icon_phone-volume.svg" alt="Phone" >0330 057 9957
</button>
<div class="h-4 w-px border-l border-gray-300 mx-4" ></div>
<div ><a href="/contact" style="cursor: pointer;">Contact Us</a></div>
</div>
</div>
</header>
<div >
<header class="w-full h-auto top-0 left-0 lg:px-0 px-5 py-1 relative container mx-auto" >
<nav class="w-full h-auto" >
<div class="w-full h-auto py-4 flex justify-between items-center" >
<div class="w-96 h-auto" >
<a href="/" style="cursor: pointer;"><img class="w-full" src="https://aidhumanity.org.uk/blogs/wp-content/uploads/2023/07/logo_aid-humanity.svg" alt="logo" ></a>
</div>
<div class="h-6 w-px border-l-2 border-gray-200 mx-8" ></div>
<div class="text-lg text-mont text-black-50 font-semibold w-2/3 h-auto flex gap-4 justify-around items-center" style="color: #1d1d1d;">
<a href="/story" class="whitespace-nowrap font-bold" style="cursor: pointer;">Our Story</a>
<a href="/appeals" class="font-bold" style="cursor: pointer;">Appeals</a>
<a class="font-bold" style="cursor: pointer;">Emergency</a>
<a href="/zakat" class="font-bold" style="cursor: pointer;">Zakat</a>
<a href="/contact" class="font-bold whitespace-nowrap" style="cursor: pointer;">Get Involved</a>
</div>
<div class="flex gap-4 items-center justify-end w-2/3" >
<a class="invisible text-sm text-mont text-gray font-semibold" href="/zakat" style="cursor: pointer;color: #bdbdbd;">Zakat Calculator</a>
<div class="invisible h-6 w-px border-l-2 border-gray-200 ml-5" ></div>
<label class="invisible text-sm text-mont text-gray font-semibold focus:outline-none cursor-pointer" style="color: #bdbdbd;">En
<select >
<option value="en" >English</option>
<option value="es" >Spanish</option>
</select>
<i class="fa-solid fa-angle-down" ></i>
</label>
<a class="text-sm text-mont text-black-50 hover:text-sblue font-semibold flex justify-center items-center gap-2" style="cursor: pointer;color: #1d1d1d;">
<img alt="header-icon" src="https://aidhumanity.org.uk/blogs/wp-content/uploads/2023/07/icon_user_circle.svg" class="w-6 h-6 rounded-full" >
<span class="whitespace-nowrap" >My Account</span>
</a>
<a class="relative" href="" style="cursor: pointer;">
<img src="https://aidhumanity.org.uk/blogs/wp-content/uploads/2023/07/icon_package-box.svg" alt="package-box" >
<p class="px-1.5 py-px text-vs bg-blue rounded-full absolute bottom-0 -right-1 text-white" style="background-color: #00ade9;font-size: 8px;">1</p>
</a>
<a href="/appeals" class="ml-4 text-dblue hover:text-white text-center font-semibold text-sm border-sblue border-2 hover:bg-sblue rounded-lg px-4 py-2 whitespace-nowrap" style="cursor: pointer;border-color: #00ade9;color: #006ba3;">DONATE NOW</a>
</div>
</div>
</nav>
</header>
</div>
</div>
您需要将 HTML 文件包含在您的 php 文件中。下面的示例假设它们位于同一目录中，您可以将以下内容添加到要插入 header.html 的 header.php 文件中
<?php include 'header.html'; ?>