从零搭建的WordPress测试主题样式与图片加载异常求助

遇到的问题 #

• style.css出现404未找到错误，但直接访问文件URL（如Localhost:8888/test/style.css）可正常加载；
• 添加图片容器后，所有图片均无法加载；
• 出现新的模板相关错误（错误截图：错误截图）

主题目录结构 #

相关代码 #

index.php #

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>this is a test Carolina WP</title>
    <link rel="stylesheet" href="wp-content/themes/carodev/styles.css" />
  </head>

  <body>

  <div>
    <h2>Title</h2>
    <p>this is a phrase </p>
    <img src="ressources/womanicon.png">
  </div>

    <div class="services-container">
        <div class="service">
            <div class="service-preview">
                <h6>Services</h6>
                <h2>Depannage</h2>
                <a href="#">autres services <i class="fas fa-chevron-right"></i></a>
            </div>
            <div class="service-info">
                <div class="progress-container">
                    <div class="progress"></div>
                    <span class="progress-text">
                        Trés demandé
                    </span>
                </div>
                <h2>Votre ordinateur <br>
                    ne marche pas ?</h2>
                <button class="btn">Contact-nous</button>
            </div>
        </div>
    </div>
<div class="container">

        <img src="./ressources/womanicon.png">
        <img src="../womanicon.png">
        <img src="../ressources/womanicon.png">
        <img src="womanicon.png">
        <img src="womanicon.png">
        <img src="womanicon.png">
        <img src="womanicon.png">
        <img src="womanicon.png">
        <img src="womanicon.png">
        <img src="womanicon.png">
        <img src="womanicon.png">
        <img src="womanicon.png">
</div>
  </body>
</html>

style.css #

* {
    box-sizing: border-box;
}


body {
    background-image: linear-gradient(45deg, #7175da, #9790F2);
    font-family: 'Muli', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

.service {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    max-width: 100%;
    margin: 20px;
    overflow: hidden;
    width: 700px;
}

.service h6 {
    opacity: 0.6;
    margin: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.service h2 {
    letter-spacing: 1px;
    margin: 10px 0;
}

.service-preview {
    background-color: #2A265F;
    color: #fff;
    padding: 30px;
    max-width: 250px;
}

.service-preview a {
    color: #fff;
    display: inline-block;
    font-size: 12px;
    opacity: 0.6;
    margin-top: 30px;
    text-decoration: none;
}

.service-info {
    padding: 30px;
    position: relative;
    width: 100%;
}

.progress-container {
    position: absolute;
    top: 30px;
    right: 30px;
    text-align: right;
    width: 150px;
}

.progress {
    background-color: #ddd;
    border-radius: 3px;
    height: 5px;
    width: 100%;
}

.progress::after {
    border-radius: 3px;
    background-color: #2A265F;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
    width: 66%;
}

.progress-text {
    font-size: 10px;
    opacity: 0.6;
    letter-spacing: 1px;
}

.btn {
    background-color: #2A265F;
    border: 0;
    border-radius: 50px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 16px;
    padding: 12px 25px;
    position: absolute;
    bottom: 30px;
    right: 30px;
    letter-spacing: 1px;
}

.container {  display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
    ". . ."
    ". . ."
    ". . ."
    ". . .";
}

问题解决方法 #

1. 样式表404错误修复 #

WordPress不能用硬编码的相对路径引用资源，必须用官方函数生成正确的主题目录URL：

• 如果你的主题样式文件是style.css（WordPress默认要求），替换引用代码为：

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" />

• 如果样式文件名是styles.css，则用：

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/styles.css" />

2. 图片加载错误修复 #

所有图片路径同样需要用WordPress函数生成绝对路径，替换图片src属性：

<img src="<?php echo get_template_directory_uri(); ?>/ressources/womanicon.png" alt="女性图标">

3. 模板缺失错误修复 #

• 确保主题根目录下的style.css顶部包含主题信息头（WordPress识别主题的必要条件），示例：

/*
Theme Name: Carodev
Theme URI: https://example.com/carodev
Author: Your Name
Author URI: https://example.com
Description: 个人测试主题
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: carodev
*/

• 确保主题目录下存在index.php文件，WordPress会优先使用该文件作为默认模板加载内容。

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