EP056. “搭建 Campus 归档页 + 接入交互式 Google Map”

这一讲把 EP055 建好的 campus 文章类型接到前台：先把 header 里 Campuses 链接指向归档页，再新建 archive-campus.php（复制 archive-program.php 改），把每篇 campus 的经纬度用 data-lat / data-lng 属性输出到 .marker 的 div 上。前台真正把这些点画成一张可以拖拽缩放的 Google 地图，靠的是 Google 官方 JS 文件 + 一个已经写好的 GoogleMap.js 模块（Brad 说这段是从 ACF 官方文档里抄来的样板代码，不逐行讲）。这一讲做完，Campuses 归档页能看到一张带两个点的可交互地图，但点击 pin 还没反应，那是 EP057 的内容。

涉及文件

• wp-content/themes/fictional-university-theme/header.php （修改，Campuses 链接指向归档页 + 高亮当前菜单项）
• wp-content/themes/fictional-university-theme/archive-campus.php （新建，复制 archive-program.php 改）
• wp-content/themes/fictional-university-theme/functions.php （修改，university_files() 里新增一行加载 Google 官方地图脚本）
• wp-content/themes/fictional-university-theme/src/index.js （修改，导入并实例化 GoogleMap 模块）
• wp-content/themes/fictional-university-theme/src/modules/GoogleMap.js （本讲用到但没有修改——这个文件是 Brad 提前写好放在项目里的，抄自 ACF 官方文档「Google Map field」那页的示范代码，用来找 .marker 元素、读它的 data-lat/data-lng，再喂给 Google 地图）

代码实现

1. header.php：Campuses 链接接上归档页

<!-- wp-content/themes/fictional-university-theme/header.php -->
<!-- 修改前：<li><a href="#">Campuses</a></li> -->
<li <?php if (get_post_type() == 'campus') echo 'class="current-menu-item"' ?>><a href="<?php echo get_post_type_archive_link('campus'); ?>">Campuses</a></li>

跟 Programs / Events 链接是一样的写法（get_post_type_archive_link() 取归档链接，get_post_type() 判断当前是不是这个文章类型来点亮菜单项）。

2. archive-campus.php（新建，复制 archive-program.php 改）

<?php
// wp-content/themes/fictional-university-theme/archive-campus.php

get_header();
pageBanner(array(
  'title' => 'Our Campuses',
  'subtitle' => 'We have several conveniently located campuses.'
));
?>

<div class="container container--narrow page-section">

<div class="acf-map">

<?php
  while(have_posts()) {
    the_post();
    $mapLocation = get_field('map_location');
   ?>
    <div class="marker" data-lat="<?php echo $mapLocation['lat'] ?>" data-lng="<?php echo $mapLocation['lng']; ?>"></div>
  <?php }
  echo paginate_links();
?>
</div>

</div>

<?php get_footer(); ?>

要点：

• get_field('map_location') 拿到的是一个数组（用 print_r() 打印出来确认过），里面有 address、lat、lng 三个 key。
• 每篇 campus 输出一个 .marker 的 div，data-lat / data-lng 就是 JS 要读的经纬度，外层用 .acf-map 包起来给 JS 找入口，也顺手用来做 CSS 定高。
• 这一版的 echo paginate_links(); 后面 EP057 会删掉（当时是从 archive-program 里原样带过来的，后来发现校区归档页不需要分页链接）。

3. functions.php：加载 Google 官方地图脚本

// wp-content/themes/fictional-university-theme/functions.php

function university_files() {
  // 新增：加载 Google Maps 官方 JS（要带上申请到的 API Key）
  wp_enqueue_script('googleMap', '//maps.googleapis.com/maps/api/js?key=你的APIKey', NULL, '1.0', true);
  wp_enqueue_script('main-university-js', get_theme_file_uri('/build/index.js'), array('jquery'), '1.0', true);
  // ...原本的样式加载不变
}

用 // 开头而不是 http:///https://，避免某些浏览器/主机因协议不一致报错。依赖数组传 NULL（不依赖其他脚本），版本号随便写，最后一个参数 true 表示放在页面底部加载。

4. src/index.js：接入 GoogleMap 模块

// wp-content/themes/fictional-university-theme/src/index.js
import "../css/style.scss"

// 我们自己的模块/类
import MobileMenu from "./modules/MobileMenu"
import HeroSlider from "./modules/HeroSlider"
import GoogleMap from "./modules/GoogleMap" // 新增

// 实例化
const mobileMenu = new MobileMenu()
const heroSlider = new HeroSlider()
const googleMap = new GoogleMap() // 新增

存完这个文件要保证本地 npm run start（EP051 配置的构建命令）还在跑着监听变化，才会重新打包进 build/index.js，前台刷新（可能要强制刷新）才能看到地图。

[截图：前台 Campuses 归档页显示可拖拽缩放的 Google Map，地图上有两个校区图钉的画面]

Hook / Function 速查

常见坑

• 新注册的文章类型（campus）第一次在前台访问归档页会 404，要去后台固定链接页面点保存刷新 rewrite 规则。

延伸 / 后续讲座会用到

• 点击地图上的 pin 目前没有任何反应（没有信息窗口），EP057 会给 .marker 塞进标题+地址的 HTML，GoogleMap.js 里的逻辑本身已经支持了「marker 内如果有 HTML 就自动生成 infoWindow」，只是这一讲还没往 marker 里塞内容。
• Campus 的单篇模板 single-campus.php 也是 EP057 才建。

Sources

Udemy：

• Become a WordPress Developer: Unlocking Power With Code — Section 12, EP056