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

【问题标题】：Images disappeared from page after styling / plugins Empty space [Wordpress.org localhost, PHP, HTML, CSS}样式/插件后，图像从页面消失空白空间[Wordpress.org localhost，PHP，HTML，CSS}
【发布时间】：2021-10-20 12:06:13
【问题描述】：

背景

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

问题

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

我已经尝试过什么

我floated 导航到左侧。在下一个元素中添加了 clear (class main) 但这没有帮助。
当我将主题更改为另一个 WordPress 主题（二十二十）时，图像显示。图片也在 WordPress 定制器模式下显示，但在发布帖子/页面时不显示。
支持对Wordpress、discussion forum plugin (Asgaros) (screenshots here)、联系表单插件（forminator、WP Forms）的请求
编辑：添加截图（开发者工具、php错误信息、博客页面、wp-admin页面、自定义主题页面）in this Google Drive folder

代码

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(); ?>

sidebar.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 -->

footer.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(); ?>

style.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;
}

谢谢

【问题讨论】：

您是否单独禁用了插件以查看是否有影响？您的浏览器中有广告拦截插件吗？如果是这样，请尝试禁用它。另外，您是否在浏览器的开发工具中检查了控制台？
是的，我禁用了停用并删除了有问题的插件。我在 devtools 中没有看到任何问题，我一直在寻找那里。任何想法要寻找什么？谢谢

标签： php html css wordpress image

【解决方案1】：

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

【讨论】：