WordPress自定义主题添加插件及样式后页面图片消失仅留空白位排查

云上老周

2026-10-7

背景

作为课程作业的一部分，我在Notepad++中编写了一个非常基础的WordPress主题（PHP），最初运行正常。后续添加了若干插件也无异常，之后我又新增了联系表单和论坛插件，同时对主题做了部分样式调整。

问题

现在页面内图片无法正常显示，仅在图片应展示的位置留下空白区块。我暂时无法确定问题出在插件（已提交支持请求）还是样式层面，因此在此处粘贴所有PHP模块及CSS代码，希望有经验的开发者可以帮忙定位错误。

已尝试的排查方案

我将nav元素设置了float左浮动，给下一级class为main的元素添加了clear属性，问题未解决。
切换为WordPress默认主题Twenty Twenty时图片可正常显示；在WordPress自定义器模式下图片也可显示，但文章/页面发布后图片不展示。
已在WordPress官方论坛、讨论区插件Asgaros（附截图）、联系表单插件Forminator及WP Forms的支持渠道提交求助请求。
补充：已将开发者工具截图、PHP错误信息、博客页面、wp-admin后台页面、主题自定义页面的截图上传至Google Drive文件夹。

代码

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 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 START -->
        <footer>
            <div class="footerarea">
                <p>Copyright abc</p>
            </div>
        </footer>
        <!-- FOOTER.PHP END -->

page.php

该文件为单页面展示模板，代码会将单页内容插入到对应section区块中

<?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;
}

谢谢

内容的提问来源于stack exchange，提问作者codingisfun976

WordPress自定义主题添加插件及样式后页面图片消失仅留空白位排查

header.php

index.php

sidebar.php

footer.php

page.php

style.css

WordPress自定义主题添加插件及样式后 页面图片消失仅留空白位排查

header.php #

index.php #

sidebar.php #

footer.php #

page.php #

style.css #

WordPress自定义主题添加插件及样式后页面图片消失仅留空白位排查

header.php

index.php

sidebar.php

footer.php

page.php

style.css