Wordpress首页中的主html没有显示，我该如何解决?

主标签内的html没有显示，但是当我检查代码时，html在那里。这发生在我添加 get_header 函数之后，该函数会获得一个仅适用于首页的新标题(其他页面将获得普通标题(。页眉和页脚显示没有问题，只有主图部分中列出的一些项目也没有显示。我是Wordpress和PHP的新手，解决这个问题的最佳方法是什么？

我的标头新.php代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Title</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<?php wp_head();?>
</head>
<body>
<!-- ======= Hero Section ======= -->
<section id="hero">
<div class="hero-container">
<img src ="<?php bloginfo('template_directory');?>/assets/img/light-logo.png" alt="Logo" class="img-fluid hero-logo" data-aos="zoom-in">
<ul data-aos="fade-up">
<li>Listed Item 1</li>
<li>Listed Item 2</li>
<li>Listed Item 3</li>
<li>Listed Item 4</li>
</ul>
<a data-aos="fade-up" href="#about" class="btn-get-started scrollto">Learn More</a>
</div>
</section><!-- End Hero -->
<!-- ======= Header ======= -->
<header id="header" class="d-flex align-items-center">
<div id="navbar-container">
<div class="logo d-block d-lg-none">
<a href="index.html"><img src="<?php bloginfo('template_directory');?>/assets/img/dark-logo.png" alt="Maite Richert Logo" class="img-fluid"></a>
</div>
<nav class="nav-menu d-none d-lg-block">
<ul class="nav-inner">
<li class="active"><a href="#about">Meet Me</a></li>
<li class="drop-down"><a href="#services">Programs</a>
<ul>
<li><a href="./one-to-one-coaching.html">One-to-one Coaching</a></li>
<li><a href="./posing-lessons.html">Posing  Lessons</a></li>
</ul>
</li>
<li class="nav-logo"><a href="index.html"><img src="<?php bloginfo('template_directory');?>/assets/img/dark-logo.png" alt="Logo" class="img-fluid logo-image"></a></li>
<li><a href="./shop.html">Shop</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
<main id="main">

我的页脚.php代码：

</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="footer-top">
<div class="container">
<div class="social-links">
<a href="" id="tiktok" target="_blank"><img src="<?php bloginfo('template_directory');?>/assets/img/tiktok.png" alt="TikTok Icon" class="tiktok"></a>
<a href="" class="instagram" target="_blank"><i class="bx bxl-instagram"></i></a>
<a href="" class="youtube" target="_blank"><i class='bx bxl-youtube'></i></i></a>
</div>
</div>
</div>
<div class="container footer-bottom clearfix">
<div class="copyright">
&copy; <strong><span>Maite Richert</span></strong>. All Rights Reserved. 2020
</div>
</div>
</footer><!-- End Footer -->
<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
<?php wp_footer();?>
</body>
</html>

还有我的首页.php代码：

<!-- ======= About Us Section ======= -->
<section id="about" class="about">
<div class="container">
<div class="section-title" data-aos="fade-up">
<h2>Meet Me</h2>
</div>
<div class="row">
<div class="col-lg-6" data-aos="fade-right">
<div class="image">
<img src="<?php bloginfo('template_directory');?>/assets/img/maite.jpg" class="img-fluid" alt="Fitness Coach">
</div>
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="content pt-4 pt-lg-0 pl-0 pl-lg-3 ">
<h3>Hi, I'm Maite</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<ul>
<li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
</div>
</div>
</section><!-- End About Us Section -->
<!-- ======= Services Section ======= -->
<section id="services" class="services">
<div class="container">
<div class="section-title" data-aos="fade-up">
<h2>Programs</h2>
</div>
<div class="row" style="margin-bottom: 10vh;">
<div class="col-lg-6 order-2 order-lg-1 services-box">
<div class="icon-box mt-5 mt-lg-0" data-aos="fade-up">
<i class="icofont-muscle-weight"></i>
<h4>One-to-one coaching</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="./personal-training.html"><div class="learn-more-btn">Learn More</div></a>
</div>
<div class="icon-box mt-5" data-aos="fade-up" data-aos-delay="100">
<i class="icofont-trophy"></i>
<h4>Posing Coach</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="./one-to-one-coaching.html"><div class="learn-more-btn">Learn More</div></a>
</div>
</div>
<div class="col-lg-6 order-1 order-lg-2" data-aos="fade-left" data-aos-delay="100"><img class="img-fluid" src="<?php bloginfo('template_directory');?>/assets/img/services.jpg" alt="Fitnees posing"></div>
</div>
</div>
</section><!-- End Services Section -->
<!-- ======= Why Us Section ======= -->
<section id="why-us" class="why-us">
<div class="container">
<div class="row">
<div class="col-lg-12 order-2 order-lg-1 d-flex flex-column justify-content-center align-items-stretch">
<div class="content" data-aos="fade-up">
<h3><b>Why should you choose me?</b></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<h4>How can you help you?</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<h4>Will this work for you?</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<h4>Aren't all the personal trainers the same?</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</section><!-- End Why Us Section -->
<!-- ======= Sponsors Section ======= -->
<section id="sponsors" class="sponsors">
<div class="container">
<h3>Sponsors</h3>
<div class="row sponsor-img-container">
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="400">
<a href="https://womens.best/maiterichert" target="_blank"><img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-5-1.png" id="womens-best" class="img-fluid" alt="Women's Best"></a>
</div>
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="500">
<a href="https://www.ryderwear.com/maite" target="_blank"><img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-6.png" class="img-fluid" alt="Ryderwear"></a>
</div>
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="300">
<a href="https://wbffshows.com" target="_blank"><img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-4-1.png" id="wbff" class="img-fluid" alt="WBFF"></a>
</div>
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="100">
<a href="https://www.amazon.de/stores/node/19654276031?_encoding=UTF8&field-lbr_brands_browse-bin=Fitgriff&ref_=bl_dp_s_web_19654276031&_encoding=UTF8&tag=maite03-21&linkCode=ur2&linkId=45540dc51e0b104622d7d53318ee6fc2&camp=1638&creative=6742" target="_blank"><img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-2.png" class="img-fluid" alt="FitGriff"></a>
</div>
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="200">
<a href="https://factory4.lu" target="_blank"><img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-3-1.png" id="f4" class="img-fluid" alt="Factory 4"></a>
</div>
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in">
<a href="https://www.basic-fit.com" target="_blank"><img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-1.png" class="img-fluid" alt="Basic Fit"></a>
</div>
</div>
</div>
</section><!-- End Sponsors Section -->
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact section-bg">
<div class="container">
<div class="section-title">
<h2>Contact</h2>
<p>If you are interested in my services or if you have any questions, don't hesitate to contact me!</p>
</div>
<div class="row">
<div class="col-lg-8 mt-5 mt-lg-0 form-box">
<form action="forms/contact.php" method="post" role="form" class="php-email-form" data-aos="fade-left">
<div class="form-row">
<div class="col-md-6 form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validate"></div>
<p>So I can get to know you better.</p>
</div>
<div class="col-md-6 form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validate"></div>
<p>Only to reply you back. No marketing.</p>
</div>
</div>
<div class="form-group" style="padding-bottom: 2rem;">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validate"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validate"></div>
</div>
<div class="mb-3">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
</div>
<div class="text-center form-btn-container"><button type="submit">Send Message</button></div>
</form>
</div>
</div>
</div>
</section><!-- End Contact Section -->
<?php get_footer();?>

这不是对你的问题的直接回答，但它可能会解决你的问题，所以我希望答案对你有帮助。

如果您只想在首页添加英雄部分，我认为您不需要仅针对这种情况的页面模板和标题模板。您可以在默认标题中添加 if 子句.php检查您是否在首页上。如果这是真的，则正在插入您的英雄部分：

<body>
<?php  if (is_front_page()) { ?>
<!-- ======= Hero Section ======= -->
<section id="hero">
<div class="hero-container">
<img src ="<?php bloginfo('template_directory');?>/assets/img/light-logo.png" alt="Logo" class="img-fluid hero-logo" data-aos="zoom-in">
<ul data-aos="fade-up">
<li>Listed Item 1</li>
<li>Listed Item 2</li>
<li>Listed Item 3</li>
<li>Listed Item 4</li>
</ul>
<a data-aos="fade-up" href="#about" class="btn-get-started scrollto">Learn More</a>
</div>
</section><!-- End Hero -->
<?php } ?>
.
.
.

这将是我的解决方案。它对你有用吗？如果没有，请尝试追逐您的英雄容器的内容，以检查此代码是否有问题。只需添加一个<p>test</p>即可查看 if 子句是否有效，并且只有首页输出带有"test"的段落。

如果你想要一个不同的页面模板(可能是因为你想显示更多的页面来显示主图部分(，请确保使用正确的文件名来使wordpress模板层次结构工作：https://developer.wordpress.org/themes/basics/template-hierarchy/

可以通过复制页面.php，将其重命名为页面首页.php并在其顶部添加/* Template Name: Frontpage */来创建页面模板。转到您的WordPress后端并编辑您的首页。在右侧的"页面属性"下，选择创建的页面模板。

在页面首页中.php将 get_header(( 函数更改为：

get_header('frontpage');

然后创建标题的副本.php并将其命名为"header-frontpage.php"。

现在，每个具有"首页"页面模板的页面都将使用名称为"首页"的标题。在页眉首页中.php您可以进行更改。

对我来说，模板只有在应用于更多页面时才有意义。对于一种情况，您可以使用 if 子句更轻松、更快速地完成操作。

希望这能帮助你。

相关内容

最新更新

热门标签：