EP015. “静态 HTML/CSS 整合进主题：Header、Footer、CSS、JS 与图片路径”

首页 › WordPress 开发课程 › THE LOOP · EP015

约 29 分钟· #EP015#THE LOOP

这一讲把 EP014 下载的 university-static 静态项目正式搬进 fictional-university-theme： header、footer 的 HTML 结构分别贴进 header.php / footer.php；build、css、images、 src 四个静态资源夹整份复制进主题目录；functions.php 改成从 build 文件夹加载编译好的 CSS/JS，并额外用外部 CDN 载入 Font Awesome 图标库和 Google Fonts 字体；首页内容（欢迎横幅、活动/博客双栏、图文轮播）贴进 index.php，取代原本用来测试 loop 的代码；所有背景图/图片路径都改成用 get_theme_file_uri() 动态拼出正确网址——直接照抄静态项目里的相对路径（如 images/xxx.jpg）在 WordPress 目录结构下会找不到文件。做完这一讲，首页第一次有了真正的视觉设计，图文轮播也开始正常轮播（靠新载入的 JS 文件驱动）。

[截图：前台首页整合静态项目后的实际效果，含欢迎横幅、活动/博客双栏和底部图文轮播]

涉及文件

wp-content/themes/fictional-university-theme/header.php （修改：贴入静态项目的 header 标记）
wp-content/themes/fictional-university-theme/footer.php （修改：贴入静态项目的 footer 标记）
wp-content/themes/fictional-university-theme/functions.php （修改：改用 build 资料夹里编译好的 CSS/JS，新增 Font Awesome + Google Fonts 外部 CDN，新增 wp_enqueue_script()）
wp-content/themes/fictional-university-theme/index.php （修改：首页内容换成静态项目的欢迎区/活动/轮播区块，图片路径改用 get_theme_file_uri()）
wp-content/themes/fictional-university-theme/style.css （修改：只保留主题信息注释，移除测试用的绿色文字样式）
wp-content/themes/fictional-university-theme/build/、css/、images/、src/ （新建：从 university-static 项目整份复制过来的资源夹——build 是编译好的 CSS/JS 产出，css 是 SCSS 源码，images 是图片素材，src 是 JS 模块源码）

代码实现

// wp-content/themes/fictional-university-theme/header.php
// 修改：从静态项目 index.html 复制 <header> 区块，贴到 <body> 开头，取代原本的 <h1>Fictional University</h1>

<!DOCTYPE html>
<html>
  <head>
    <?php wp_head(); ?>
  </head>
  <body>
    <header class="site-header">
      <div class="container">
        <h1 class="school-logo-text float-left">
          <a href="#"><strong>Fictional</strong> University</a>
        </h1>
        <span class="js-search-trigger site-header__search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
        <i class="site-header__menu-trigger fa fa-bars" aria-hidden="true"></i>
        <div class="site-header__menu group">
          <nav class="main-navigation">
            <ul>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Programs</a></li>
              <li><a href="#">Events</a></li>
              <li><a href="#">Campuses</a></li>
              <li><a href="#">Blog</a></li>
            </ul>
          </nav>
          <div class="site-header__util">
            <a href="#" class="btn btn--small btn--orange float-left push-right">Login</a>
            <a href="#" class="btn btn--small btn--dark-orange float-left">Sign Up</a>
            <span class="search-trigger js-search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
          </div>
        </div>
      </div>
    </header>

// wp-content/themes/fictional-university-theme/footer.php
// 修改：从静态项目 index.html 复制 <footer> 区块，贴到原本的测试文字位置，wp_footer() 仍然保留在 </body> 前

<footer class="site-footer">
      <div class="site-footer__inner container container--narrow">
        <div class="group">
          <div class="site-footer__col-one">
            <h1 class="school-logo-text school-logo-text--alt-color">
              <a href="#"><strong>Fictional</strong> University</a>
            </h1>
            <p><a class="site-footer__link" href="#">555.555.5555</a></p>
          </div>
          <!-- ...省略中间的 Explore / Learn 两栏导航，跟静态项目一模一样直接复制过来... -->
          <div class="site-footer__col-four">
            <h3 class="headline headline--small">Connect With Us</h3>
            <nav>
              <ul class="min-list social-icons-list group">
                <li><a href="#" class="social-color-facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                <li><a href="#" class="social-color-twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                <li><a href="#" class="social-color-youtube"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
                <li><a href="#" class="social-color-linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
                <li><a href="#" class="social-color-instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </footer>

<?php wp_footer(); ?>
</body>
</html>

// wp-content/themes/fictional-university-theme/functions.php
// 修改：全部重写。原本只 enqueue 一个 style.css，现在改成从 build 资料夹载入编译好的 CSS，
// 外加 Google Fonts / Font Awesome 两个外部 CDN 样式，以及一个依赖 jQuery 的 JS 文件（驱动轮播）

<?php

function university_files() {
  wp_enqueue_script('main-university-js', get_theme_file_uri('/build/index.js'), array('jquery'), '1.0', true);
  wp_enqueue_style('custom-google-fonts', '//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i');
  wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
  wp_enqueue_style('university_main_styles', get_theme_file_uri('/build/style-index.css'));
  wp_enqueue_style('university_extra_styles', get_theme_file_uri('/build/index.css'));
}

add_action('wp_enqueue_scripts', 'university_files');

// wp-content/themes/fictional-university-theme/index.php
// 修改：把 EP011 写的测试 loop 内容整个换成静态项目的首页内容（欢迎横幅 + 活动/博客双栏 + 图文轮播），
// 图片路径统一改用 get_theme_file_uri() 拼接，不能照抄静态项目里的相对路径

<?php get_header(); ?>

  <div class="page-banner">
      <div class="page-banner__bg-image" style="background-image: url(<?php echo get_theme_file_uri('/images/library-hero.jpg') ?>);"></div>
      <div class="page-banner__content container t-center c-white">
        <h1 class="headline headline--large">Welcome!</h1>
        <h2 class="headline headline--medium">We think you&rsquo;ll like it here.</h2>
        <h3 class="headline headline--small">Why don&rsquo;t you check out the <strong>major</strong> you&rsquo;re interested in?</h3>
        <a href="#" class="btn btn--large btn--blue">Find Your Major</a>
      </div>
    </div>

    <!-- ...中间的 "Upcoming Events" / "From Our Blogs" 双栏内容跟静态项目一模一样，纯 HTML，先照抄贴过来... -->

    <div class="hero-slider">
      <div data-glide-el="track" class="glide__track">
        <div class="glide__slides">
          <div class="hero-slider__slide" style="background-image: url(<?php echo get_theme_file_uri('/images/bus.jpg') ?>);">
            <!-- ...文案照抄静态项目... -->
          </div>
          <div class="hero-slider__slide" style="background-image: url(<?php echo get_theme_file_uri('/images/apples.jpg') ?>);">
            <!-- ...同上，另外两张 slide (apples.jpg / bread.jpg) 结构一样，只换图片和文案，这里不重复贴，完整内容看 sources 里 10-2021/index.php -->
          </div>
          <div class="hero-slider__slide" style="background-image: url(<?php echo get_theme_file_uri('/images/bread.jpg') ?>);">
          </div>
        </div>
        <div class="slider__bullets glide__bullets" data-glide-el="controls[nav]"></div>
      </div>
    </div>

  <?php get_footer(); ?>

/* wp-content/themes/fictional-university-theme/style.css */
/* 修改：删掉之前测试用的 body { color: green; } 之类代码，只留 WordPress 识别主题需要的注释头 */

/*
 Theme Name: Fictional University
 Author: Brad
 Version: 1.0
*/

Hook / Function 速查

名称	类型	用途
`get_theme_file_uri( $file )`	WP 内建 function	传入相对路径，返回当前主题目录下该文件的完整网址（用来拼图片、CSS、JS 的路径）
`wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer )`	WP 内建 function	载入 JS 文件；`$deps` 是依赖的其他脚本数组（这里用 `array('jquery')`），`$ver` 是版本号，`$in_footer` 传 `true` 表示放在 `</body>` 前载入
`wp_enqueue_style()`	WP 内建 function	第二个参数除了本地文件路径，也可以直接传外部 CDN 网址（Font Awesome / Google Fonts 就是这样载入的）

常见坑

图片路径不能直接照抄静态项目里的相对路径（例如 images/library-hero.jpg），
因为主题实际所在网址是 wp-content/themes/主题名/images/...，路径层级完全不同，
必须用 get_theme_file_uri() 动态拼出正确的完整网址，否则图片会 404。
Font Awesome / Google Fonts 这类外部 CDN 资源，第一直觉可能是直接在 header.php
的 <head> 里手写 <link> 标签，但这样绕过了 wp_head() 的统一管理机制。
正确做法是在 functions.php 用 wp_enqueue_style() 把外部网址当作第二个参数传进去，
让 WordPress（以及以后装的插件）统一管理 head 区要载入的文件。
wp_enqueue_script() 比 wp_enqueue_style() 多好几个参数，容易漏填：
依赖数组（没有依赖就传 null 或空数组）、版本号、以及是否放进 footer（true/false）。

延伸 / 后续讲座会用到

这一讲搭好的 build/css/images/src 资源夹和 functions.php 里的 enqueue 逻辑，
后面几讲做内页模板（例如 page banner）时会持续用到。
JS 里目前依赖 jQuery 才能跑轮播，Brad 提到后面课程会提供不依赖 jQuery 的替代写法。

Sources

Udemy：

Become a WordPress Developer: Unlocking Power With Code — Section 4, EP015