样式/插件后图像从页面中消失空白空间[Wordpress.org localhost, PHP, HTML, CSS}

Question

背景

作为课程的一部分，我在 Notepad++ 中创建了一个非常基本的 WordPress 主题 (PHP)。 工作正常。 添加了一些插件。 工作正常。 添加了联系表格和讨论插件。 还做了一些造型。

问题

现在图像不显示，只有图像应该出现的空间。 不确定是插件（留下支持请求）还是样式（在这里询问）。 我在这里粘贴我的所有代码（PHP 模块和 CSS）。 希望更有经验的人可以发现错误。

我试过什么

我将导航向左float 。 向下一个元素（类 main）添加了一个clear但这没有帮助。
当我将主题更改为另一个 WordPress 主题（二十二十）时的图像显示。 图片也会在 WordPress 定制模式下显示，但不会在发布帖子/页面时显示。
支持请求Wordpress ，讨论论坛插件 (Asgaros)（此处截图），联系表单插件（ formator ， WP Forms ）
编辑：在此 Google 云端硬盘文件夹中添加了屏幕截图（开发人员工具、php 错误消息、博客页面、wp-admin 页面、自定义主题页面）

代码

header.php

<!-- HEADER.PHP START -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="<?php echo get_bloginfo('template_directory'); ?>/style.css" rel="stylesheet">
        <title>My first Wordpress Theme</title>
</head>

<body>
    <div id="wrapper">
        <header>
            <div>
                <h1 class ="title-heading" >The Internet Life</h1>
                <p>Working and living with the web</p>
            </div>
        </header>
        <nav>
            <!-- <p>Navigeringsmeny. This will be the navbar area</p> -->
            <ul>
                <li class = "page_item"><a href ="<?php echo home_url(); ?>">Home</a></li>
                <?php wp_list_pages( '&title_li=' ); ?>
            </ul>
        </nav>
        <!-- HEADER.PHP END -->

index.php该部分中的代码将在起始页上显示博客文章，这与我手动创建的其他页面相反，它们将出现在导航中

<!-- PHP INSERT HEADER CODE -->
    <?php get_header(); ?>
        <div class="main">
            <div id="content">
                <article>
        <!--START individual BLOG POSTS CODE -->
        <?php 
        if ( have_posts() ) : while ( have_posts() ) : the_post();?>
            <section>
                <h1><?php the_title(); ?></h1>
                <p><?php the_content(); ?></p>
            </section>
        <?php endwhile; endif;?>
        <!--START individual BLOG POSTS CODE -->
                </article>
            </div>
<!-- PHP INSERT sidebar CODE -->
    <?php get_sidebar(); ?>
<!-- PHP INSERT footer CODE -->
    <?php get_footer(); ?>

侧边栏.php

            <!-- SIDEBAR.PHP START ASIDE -->
            <aside class="sidebar">
                <p>
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
                <a href="#">Ethics</a>
                <a href="#">History</a>
                <a href="#">Webtech</a>
                </p>
            </aside>
            <!-- SIDEBAR.PHP  END ASIDE -->

页脚.php

        <!-- FOOTER.PHP START -->
        <footer>
            <div class="footerarea">
                <p>Copyright abc</p>
            </div>
        </footer>
        <!-- FOOTER.PHP END -->

page.php这是每个页面如何显示的模板。 该代码在该部分中插入单个页面内容

    <?php 
/** 
* Template Name: Mall
*/
    ?> 
<!--  PHP INSERT HEADER CODE -->
    <?php get_header(); ?>
        <div class="main">
            <div id="content">
                <article id="page-wrapper">
        <section class="page_content">
        <!-- START individual page CODE -->
        <?php
            if ( have_posts() ) : while ( have_posts() ) : the_post();
                get_template_part( 'content', get_post_format() );
            endwhile; endif; 
        the_content(); ?>
        <!-- END individual page CODE -->
       </section>
                </article>
            </div>
<!-- PHP INSERT sidebar CODE -->
    <?php get_sidebar(); ?>
<!-- PHP INSERT footer CODE -->
    <?php get_footer(); ?>

样式.css

/*
Theme Name: FirstWordpress Practice
Author: abc
Description: def theme 
Version: 1.0
License: GNU General Public License v2 or later
Tags: Fun
Text Domain: basic learning
  */
    /* 
    colors
    linen #f9eee7
    lightest antique white #fce5da
    lightish yellow peachpuff #f7d8ba
    beige #F2A341
    LIGHT BEIGe #F2D5BB
    BROWN #BF815E
    red #F21D1D
    light red #F24444
    */
 
 HTML{
     margin: 0;
     padding: 0;
 }

header {
    margin: 0 auto 0 auto;
    padding: 1rem;
    border: solid 2px #F24444;
    color: #f9eee7;
}
body {
    margin: 0;
    padding: 0;
}   

  @font-face {
      font-family: 'Orbitron', sans-serif, 'Montserrat';
  }

h1, h2, h3, h4, h5, h6, h7, h8 {
      font-family: 'Orbitron', sans-serif;
}
#wrapper {
    background-color: #F21D1D;
    font-family: 'Montserrat', sans-serif ;
    margin: 0;
    padding: 1rem;
} 
#content {
    background-color: #fce5da;
    font-family: 'Orbitron', sans-serif, 'Montserrat';
    margin: 0 auto;
    padding: 2rem;
    line-height: 1.2;     /*accessibility large font with extra letter spacing and line hight*/
    letter-spacing: 1px;
}
/*#content {
width: 95%;
background: whitesmoke;
margin: 0 auto;
}*/ 
title-heading {
margin-top: 0;
}
nav ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #111; /* Black */
}
nav li {
 float: left;
}
nav li a {
 display: block;
 /*color: #ffe6ff; the original black color*/
 color: #F24444;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 text-transform: uppercase;
}

/* Change the navigation link color to #111 (black) on hover */
nav li a:hover {
 background-color: #29293d;
 color: #f7d8ba;
}
/*link styling*/
section a {
 color: #F21D1D;
 text-decoration: none;
 font-weight: bolder;
}
/* Change the link color to #111 (black) on hover */
section a:hover {
 background-color: #29293d;
 color: #f7d8ba;
}
/* Style page content */
.main {
    clear: both; /*Clearing the float from the navigatation element above main in header php*/
margin: 0 160px 0 0; 
 /*margin-right: 160px;  Same as the width of the sidebar */
  padding: 0px 10px;
}
/*Creating spacing 
#page-wrapper, .page_content {
    margin: 1rem;
    padding: 1rem;
}*/ 

/* The sidebar menu */
.sidebar {
  height: 100%; /* Full-height*/
  width: 160px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background-color: #111; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
}

/* The sidebar menu links */
.sidebar a {
  padding: 6px 16px 6px 8px;
  text-decoration: none;
  font-size: 25px;
  color: #F24444;
  display: block;
}

/* When you mouse over the navigation links color changes*/
.sidebar a:hover {
  background-color: #29293d;
 color: #f7d8ba;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

footer {
    border: 3px solid #F24444;
    margin-bottom: 0;
    padding: 0.5rem;
    color: #f9eee7;
}

谢谢

Answer 1

问题是侧边栏上的z-index 。 我给了img更高的z-index ，它们出现了。

样式/插件后图像从页面中消失空白空间[Wordpress.org localhost, PHP, HTML, CSS}

问题描述

1 个解决方案

解决方案1
0 2021-08-19 09:18:46

样式/插件后图像从页面中消失空白空间[Wordpress.org localhost, PHP, HTML, CSS}

问题描述

1 个解决方案

解决方案1 0 2021-08-19 09:18:46

解决方案1
0 2021-08-19 09:18:46