樣式/插件后圖像從頁面中消失空白空間[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