将 HTML 转换为 PHP Wordpress 页脚不起作用

【问题标题】：Convert HTML to PHP Wordpress footer not working将 HTML 转换为 PHP Wordpress 页脚不起作用
【发布时间】：2017-08-01 12:33:24
【问题描述】：

我目前正在自学如何编写网站代码，我的静态网站现已完成。然后我尝试将其转换为 PHP Wordpress，但到目前为止，我的页脚不像我的 HTML 文件那样工作。 The footer jump into the content of the homepage. It's work fine as HTML. 我也尝试使用其他在线模板将其转换为 PHP Wordpress 以测试我的转换，一切似乎都很好，所以这与我的 Wordpress 配置无关。我还检查了this question，但这并没有解决我的问题。我正在使用 HTML 5 Blank 主题来转换我的 HTML。所以我的问题是当我将静态 HTML 拆分为 header.php 和 footer.php 时，我的静态 HTML 不起作用

这是我的可用静态页眉和页脚 HTML，我未能将其拆分为 PHP

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Movie On The Go</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <link href="css/font-awesome.min.css" rel="stylesheet"/>
        <link rel="shortcut icon" type="image/png" href="#"/>
    </head>
    <body>
    <div class="container">
        <header>
            <div class="header-inner">
                <a href="<?php echo home_url(); ?>" id="logo"><img src="img/raging.gif" alt=""></a>
                <a href="<?php echo home_url(); ?>" id="webname"><h1>Movies On The Go</h1></a>
                <nav>
                    <a href="#" id="menu-icon"></a>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="movieslist.html">Movies list</a></li>
                        <li><a href="aboutus.html">About us</a></li>
                        <li><a href="faq.html">FAQ</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <p>This is the content of the homepage.</p>
        <footer class="credit">
            <p><a href="https://twitter.com/maiphamquanghuy">ImHikaruCat</a></p>
        </footer>
    </div>
    </body>
    </html>

这是我的 header.php

<!doctype html>
<html <?php language_attributes(); ?> class="no-js">
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>

    <link href="//www.google-analytics.com" rel="dns-prefetch">
    <link href="<?php echo get_template_directory_uri(); ?>/img/icons/favicon.ico" rel="shortcut icon">
    <link href="<?php echo get_template_directory_uri(); ?>/img/icons/touch.png" rel="apple-touch-icon-precomposed">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="<?php bloginfo('description'); ?>">

    <?php wp_head(); ?>
    <script>
    // conditionizr.com
    // configure environment tests
    conditionizr.config({
        assets: '<?php echo get_template_directory_uri(); ?>',
        tests: {}
    });
    </script>

</head>
<body <?php body_class(); ?>>
    <div class="container">
    <header>
        <div class="header-inner">
            <a href="<?php echo home_url(); ?>" id="logo"><img src="img/raging.gif" alt=""></a>
            <a href="<?php echo home_url(); ?>" id="webname"><h1>Movies On The Go</h1></a>
            <nav>
                <?php html5blank_nav(); ?>
            </nav>
        </div>
    </header>

我的页脚.php

            <footer class="credit">
            <p><a href="https://twitter.com/maiphamquanghuy">ImHikaruCat</a></p>
        </footer>
    </div>
    <!-- /wrapper -->

    <?php wp_footer(); ?>

    <!-- analytics -->
    <script>
    (function(f,i,r,e,s,h,l){i['GoogleAnalyticsObject']=s;f[s]=f[s]||function(){
    (f[s].q=f[s].q||[]).push(arguments)},f[s].l=1*new Date();h=i.createElement(r),
    l=i.getElementsByTagName(r)[0];h.async=1;h.src=e;l.parentNode.insertBefore(h,l)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-XXXXXXXX-XX', 'yourdomain.com');
    ga('send', 'pageview');
    </script>

</body>

我的 style.css 以防万一

@import 'https://fonts.googleapis.com/css?family=Alegreya+Sans';

*{
    margin: 0px;
    padding: 0px;
    border: 0px;
}

body{
    background: #F5F5F5;
    color: #67727A;
    font-family:"Alegreya Sans", sans-serif;
    margin: 0px;
}

h2{
    font-size: 250%;
    font-weight: 700;
    text-align: center;
    padding-top: 2%;
    color: #F5F5F5;
    font-family: "Alegreya Sans", sans-serif;
}

h2 a{
    text-decoration: none;
    color: #F5F5F5;
}

h2 a:hover{
    color: #999;
}

h3{
    font-size: 175%;
    line-height: 155%;
    padding: 5% 0;
    font-weight: 400;
    color: #F5F5F5;
}

p{
    font-size: 160%;
    line-height: 150%;
    padding: 3%;
    text-indent: 2%;
    text-align: justify;
    color: #F5F5F5;
}

img{
    max-width:100%;
    height: auto;
    width: auto;
    margin-bottom: -4px;
}
header{
    background-color: #6991AC;
    width: 100%;
    height: 86px;
}

.header-inner{
    max-width: 1200px;
    margin: 0 auto;
}

#logo{
    display: hidden;
    margin: 0px;
    float: left;
    width: 100px;
    height: auto;
}

#webname{
    display: hidden;
    margin: 20px;
    float: left;
    width: 400px;
    height: auto;
    text-decoration: none;
    color: #ffffff;
}

/*---bat dau thanh navigation---*/

nav{
    float: right;
    padding: 25px 20px 0 0;
}

#menu-icon{
    display: hidden;
    width: 40px;
    height: 40px;
    background: url("http://i.imgur.com/sAjpuaw.png") center;
}

a:hover#menu-icon{
    border-radius: 4px 4px 0 0;
}

ul{
    list-style-type: none;
}

nav ul li{
    font-family: "Alegreya Sans", sans-serif;
    font-size: 150%;
    display: inline-block;
    float: left;
    padding: 10px;
}

nav ul li a{
    color: #F5F5F5;
    text-decoration: none;
}

nav ul li a:hover{
    color: #C3D7DF;
}

.current{
    color: #C3D7DF;
}

/*---het thanh navigation---*/

.banner{
    width: 100%;
    background-color: #6991AC;
}

.banner-inner{
    width: 1920px;
    margin: 0 auto;
    text-align: center;
}

.one-fourth{
    width: 25%;
    float: left;
    text-align: center;
}

.one-fourth h3{
    font-family: "Alegreya Sans", sans-serif;
    display: inline-block;
}

.one-fourth h3 a{
    text-decoration: none;
    color: #F5F5F5;
}

.one-fourth h3 a:hover{
    color: #999
}

a{
    text-decoration: none;
}

#movie1{
    background-color: #F1AA90;
}

#movie2{
    background-color: #BEB9AD;
}

#movie3{
    background-color: #AADCD2;
}

#movie4{
    background-color: #A2B2C1;
}

#movie5{
    background-color: #6da53b;
}

#movie6{
    background-color: #9e7621;
}

#movie7{
    background-color: #c14732;
}

#movie8{
    background-color: #315363;
}

/*---phan spotlight---*/
article{
    float: left;
    margin: 0 auto;
    width: 50%;
    height: auto;
}

aside{
    float: right;
    margin: 0 auto;
    width: 50%;
    height: auto;
}

.inner-wrapper{
    float: left;
    width: 100%;
    background-color: #C3D7DF;
}

#Urara{
    background-color: #F1AA90;
}

#Koe{
    background-color: #AADCD2;
}

.inner-wrapper2{
    float: left;
    width: 100%;
    background-color: #C3D7DF;
}

#Hibike{
    background-color: #BEB9AD;
}

#Hinako{
    background-color: #A2B2C1;
}

footer{
    width: 100%;
    border-top: 1px solid #AADCD2;
    background-color: #544B59;
    margin: 0;
}

footer p{
    padding: 5px 0  9px 0;
    text-align: center;
}

footer a{
    text-decoration: none;
    color: #F5F5F5;
}

footer a:hover{
    text-decoration: none;
    color: #7e7782;
}

/*---scaling---*/
@media screen and (max-width: 1000px){
    h2{
        font-size: 150%;
    }
    h3{
        font-size: 125%;
    }
    p{
        font-size: 120%;
    }
    header{
        position: absolute;
    }

    #menu-icon{
        display: inline-block;
    }
    nav ul, nav:active ul{
        display: none;
        z-index: 100;
        position: absolute;
        padding: 20px;
        background: #6991AC;
        right: 20px;
        top: 60px;
        border: 1px solid #ffffff;
        border-radius: 2px 0 2px 2px;
        width: 50%;
    }
    nav:hover ul{
        display: block;
    }
    nav li{
        text-align: center;
        width: 100%;
        padding: 10px 0;
    }
    .banner{
        padding-top: 86px;
    }
    .one-fourth{
        width: 100%;
    }

    article{
        width: 100%;
    }

    aside{
        width: 100%;
    }
}

/*---css cho article---*/

.title{
    width: 100%;
    float: left;
    background-color: #F1AA90;
}

.title h1{
    font-size: 300%;
    font-weight: 900;
    text-align: center;
    color: #F5F5F5;
    padding: 10px 0;
}

.title p{
    text-align: center;
    color: #F5F5F5;
    background-color: #6991AC;
}

.episodelist{
    background-color: #6991AC;
}

.episodelist ul{
    list-style-type: none;
}

.episodelist ul li{
    font-family: "Alegreya Sans", sans-serif;
    font-size: 150%;
    display: inline-block;
    text-align: center;
    width: 7.14%;
    padding: 10px;
    background-color: #6991AC;
}

.episodelist ul li a{
    color: #F5F5F5;
    text-decoration: none;
}

.episodelist ul li a:hover{
    color: #C3D7DF;
}

.bg{
    text-align: center;
    margin: 0 auto;
    background-color: #6991AC;
}

.movieslist{
    background-color: #6991AC;
}

.movieslist ul{
    list-style-type: none;
}

.movieslist ul li{
    font-family: "Alegreya Sans", sans-serif;
    font-size: 150%;
    display: inline-block;
    text-align: center;
    width: 15.5%;
    padding: 10px;
    background-color: #6991AC;
}

.movieslist ul li a{
    color: #F5F5F5;
    text-decoration: none;
}

.movieslist ul li a:hover{
    color: #C3D7DF;
}

@keyframes slidy {
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}

#slider { overflow: hidden; }
#slider figure img { width: 20%; float: left; }
#slider figure {
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    text-align: left;
    font-size: 0;
    animation: 40s slidy infinite;
}

【问题讨论】：

  • 不清楚您的要求。您展示了很多代码，但我们无法清楚地了解您想要实现的目标或实际问题是什么。
  • 因此，如果它可以作为静态 HTML 页面正常工作，但一旦您动态创建 HTML 代码就不能正常工作了 - 那么动态创建的代码很可能在结构上与静态版本不同。所以开始比较两者，找出有什么不同。 （您可能还想先validate your HTML code，以确保没有严重的嵌套/标签关闭问题或类似问题。）
  • 你可能会在页脚之前错过一个关闭的 div - 然后一切都会搞砸。尝试在页脚标记之前添加
    。如果它不起作用，那么只需再次删除它。但这可能是您的页脚在您体内的原因。
  • 我看不到
    正在关闭
  • 另外，在 wp_footer 之后可能需要我 - 不确定

    • 标签： php html css wordpress


    【解决方案1】：

    在 header.php 文件中，您使用了导航菜单的未定义函数。您可以在 functions.php 中定义 html5blank_nav()，也可以使用 wordpress wp_nav_menus 函数使菜单动态化。

    function html5blank_nav() {
$html = '<ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="movieslist.html">Movies list</a></li>
            <li><a href="aboutus.html">About us</a></li>
            <li><a href="faq.html">FAQ</a></li>
        </ul>';
return $html;

    }

    【讨论】：

      【解决方案2】： 
      <?php wp_footer(); ?>

      将其写入您的布局中，并将其从 footer.php 中删除

      【讨论】：

      • 感谢您的解决方案，但它仍然与我的问题相同。我不知道为什么，但是当我尝试使用其他静态模板进行测试时，&lt;?php wp_footer(); ?&gt; 留在那里并且它仍然可以工作，不知何故。
      猜你喜欢
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode